Code Editor

View and edit the generated code directly for complete control over your application.

Accessing the Code Editor

Toggle to code view using:

• Click the code icon </> in the header
• Press Cmd/Ctrl + /
• Click "View Code" on any component

Editor Features

Syntax Highlighting

Full syntax highlighting for:

• JavaScript / TypeScript
• JSX / TSX
• CSS / Tailwind
• JSON
• Markdown

IntelliSense

Smart code completion:

• Component props
• CSS classes
• Import suggestions
• Function signatures

Error Detection

Real-time error detection:

• Syntax errors highlighted
• Type errors shown (TypeScript)
• Unused imports flagged
• Best practice warnings

Formatting

Automatic code formatting:

• Format on save (optional)
• Format selection
• Consistent style across project

File Types

Components (*.tsx)

React components with TypeScript:

interface HeroProps {
  title: string;
  subtitle: string;
}

export function Hero({ title, subtitle }: HeroProps) {
  return (
    <section className="py-20 bg-gradient-to-r from-blue-600 to-purple-600">
      <div className="container mx-auto text-center text-white">
        <h1 className="text-5xl font-bold mb-4">{title}</h1>
        <p className="text-xl opacity-90">{subtitle}</p>
      </div>
    </section>
  );
}

Styles (*.css)

Global and component styles:

@tailwind base;
@tailwind components;
@tailwind utilities;

.custom-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Utilities (lib/*.ts)

Helper functions and utilities:

export function formatDate(date: Date): string {
  return new Intl.DateTimeFormat('en-US', {
    month: 'long',
    day: 'numeric',
    year: 'numeric'
  }).format(date);
}

API Routes (api/*.ts)

Backend API endpoints:

export async function GET(request: Request) {
  const data = await fetchFromDatabase();
  return Response.json(data);
}

Editing Code

Direct Editing

Make changes directly in the code:

1. Navigate to the file
2. Make your edits
3. Changes apply to the preview instantly

AI-Assisted Editing

Select code and ask AI to modify it:

1. Highlight the code section
2. Press Cmd/Ctrl + K
3. Describe the change
4. AI updates the selection

Find and Replace

Search across your project:

• Cmd/Ctrl + F - Find in file
• Cmd/Ctrl + Shift + F - Find in project
• Cmd/Ctrl + H - Find and replace

Code Navigation

File Tree

Browse all project files in the left panel.

Go to Definition

Jump to where functions and components are defined:

• Cmd/Ctrl + Click on any identifier
• F12 with cursor on identifier

Go to Symbol

Find components and functions:

• Cmd/Ctrl + Shift + O - Symbols in file
• Cmd/Ctrl + T - Symbols in project

Breadcrumbs

See your location in the file structure at the top of the editor.

Split View

View code and preview side by side:

1. Click the split view icon
2. Drag the divider to adjust sizes
3. Changes in either view sync automatically

Export Code

Download your code to run locally or deploy elsewhere:

1. Click Export in the header menu
2. Choose format:
   • React - Standard Create React App
   • Next.js - Full Next.js project
   • HTML - Static HTML/CSS/JS
3. Download the ZIP file

The exported code is clean and well-organized, ready for further development.

Keyboard Shortcuts

Shortcut	Action
Cmd/Ctrl + /	Toggle code view
Cmd/Ctrl + S	Save
Cmd/Ctrl + F	Find
Cmd/Ctrl + H	Replace
Cmd/Ctrl + G	Go to line
Cmd/Ctrl + D	Duplicate line
Alt + Up/Down	Move line
Cmd/Ctrl + Shift + K	Delete line

Tips

Read Before Editing

Understand the generated code structure before making changes.

Small Changes First

Make incremental changes and verify each one works.

Use AI for Complex Logic

For tricky code, describe what you need to the AI.

Keep It Clean

The code you write is the code you'll maintain. Keep it readable.