Skip to main content

Customizing generated code

Fine-tune your app with manual edits and AI assistance.

When to customize​

Use the editor for:​

  • Quick style changes (colors, spacing, fonts)
  • Text and label updates
  • Small logic tweaks
  • Configuration changes

Use AI prompts for:​

  • New features
  • Structural changes
  • Multi-file updates
  • Complex logic

Understanding the code​

Web apps (React)​

// Components are React functional components
export function TaskItem({ task, onToggle, onDelete }) {
  return (
    <div className="flex items-center gap-2 p-2">
      <input
        type="checkbox"
        checked={task.completed}
        onChange={() => onToggle(task.id)}
      />
      <span className={task.completed ? 'line-through' : ''}>
        {task.title}
      </span>
      <button onClick={() => onDelete(task.id)}>Delete</button>
    </div>
  );
}

Mobile apps (React Native)​

// Similar to React but with native components
export function TaskItem({ task, onToggle, onDelete }) {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => onToggle(task.id)}>
        <Text style={task.completed ? styles.completed : styles.normal}>
          {task.title}
        </Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => onDelete(task.id)}>
        <Text>Delete</Text>
      </TouchableOpacity>
    </View>
  );
}

Backend (Python/FastAPI)​

# API endpoints use FastAPI decorators
@router.get("/tasks")
async def get_tasks(db: Session = Depends(get_db)):
    tasks = db.query(Task).all()
    return tasks

@router.post("/tasks")
async def create_task(task: TaskCreate, db: Session = Depends(get_db)):
    db_task = Task(**task.dict())
    db.add(db_task)
    db.commit()
    return db_task

Common customizations​

Change colors (TailwindCSS)​

Find color classes and update them:

// Before
<button className="bg-blue-500 hover:bg-blue-600">

// After
<button className="bg-indigo-500 hover:bg-indigo-600">

Update spacing​

// Before
<div className="p-2 gap-2">

// After (more padding and gap)
<div className="p-4 gap-4">

Modify text​

// Before
<h1>Welcome to TaskApp</h1>

// After
<h1>My Personal Task Manager</h1>

Add conditional styling​

// Show different styles based on state
<div className={`
  p-4 rounded-lg
  ${task.priority === 'high' ? 'bg-red-100 border-red-500' : 'bg-white'}
`}>

Add new props​

// Before
function Button({ children }) {
  return <button className="btn">{children}</button>;
}

// After
function Button({ children, variant = 'primary', size = 'md' }) {
  const styles = {
    primary: 'bg-blue-500 text-white',
    secondary: 'bg-gray-200 text-gray-800',
  };
  const sizes = {
    sm: 'px-2 py-1 text-sm',
    md: 'px-4 py-2',
    lg: 'px-6 py-3 text-lg',
  };

  return (
    <button className={`btn ${styles[variant]} ${sizes[size]}`}>
      {children}
    </button>
  );
}

File organization​

Know where to find things:

Web​

  • src/components/ - Reusable UI components
  • src/pages/ - Route pages
  • src/hooks/ - Custom React hooks
  • src/services/ - API calls
  • src/styles/ - CSS files

Mobile​

  • app/ - Expo Router pages
  • components/ - React Native components
  • hooks/ - Custom hooks
  • services/ - API calls

Backend​

  • app/routers/ - API endpoints
  • app/models/ - Database models
  • app/schemas/ - Pydantic schemas
  • app/services/ - Business logic

Tips​

Make small changes​

Edit one thing, save, verify it works.

Use browser dev tools​

Inspect elements to find the right classes.

Copy existing patterns​

Look at how other components do similar things.

Keep backups​

In Coder mode, commit before big changes.

Ask AI when stuck​

"How do I add a loading spinner to the TaskList component?"