Code Editor

What is the Code Editor?

The Code Editor gives you direct access to your project's source code without leaving Onlook. Unlike traditional design tools that generate code you can't modify, Onlook treats code as the source of truth—every visual change updates your actual files, and every code change reflects immediately on canvas.

Key benefits:

• Edit code side-by-side with visual preview

• Jump directly from canvas elements to their code location

• Search across your entire codebase

• Create and organize files and folders

• Access integrated terminal for running commands

Real Code, No Abstractions
The Code Editor works with real React/Next.js and TailwindCSS files—no proprietary formats. Your code remains clean, maintainable, and standard.

Understanding Your Project Structure

Onlook projects follow the standard Next.js App Router structure:

my-app/

├── app/

│   ├── layout.tsx          # Root layout

│   ├── page.tsx            # Home page

│   ├── globals.css         # Global styles

│   └── [route]/

│       └── page.tsx        # Route-specific page

├── components/

│   ├── ui/                 # UI components

│   └── custom/             # Custom components

├── public/

│   └── images/             # Static assets

├── lib/

│   └── utils.ts            # Utility functions

├── package.json

├── tailwind.config.ts

└── tsconfig.json

Navigating the File Tree

The left sidebar displays your complete project structure:

• Folders appear with a caret icon (▸) to expand/collapse

• Files show their extension and can be clicked to open

• Active file is highlighted with a red indicator

• Modified files show a white save button

Creating Files and Folders

Through the Code Panel

1. Click the new file or new folder button in the upper right

2. Choose the file/folder location

3. Enter the filename with extension (e.g., Button.tsx)

4. Click Create

Through AI Chat

Ask the AI to create files for you:

Create a new component file called components/ui/Card.tsx with a basic card component

The AI creates the file with appropriate code automatically.

Searching Your Codebase

Find code across your entire project with content search.

How to search:

1. Expand the file view via the button on the top left

2. Enter your search term

3. Results show:
   - File path and name
   - Line number
   - Code context around the match

Jump to Code from Canvas

Double-click any element on the canvas to jump directly to its source code.

What happens:

1. Double-click an element

2. The Code Panel automatically:
   - Opens the correct file
   - Scrolls to the exact line
   - Highlights the relevant code

This is the fastest way to connect visual elements with their implementation.

Bidirectional Sync: Visual Code

Onlook maintains real-time sync between canvas and code. Changes in either place instantly reflect in the other.

Visual → Code

When you edit on the canvas:

• Drag to reposition → Tailwind position classes update

• Resize an element → Width/height values update

• Change styles in Style panel → Tailwind classes update

• Insert components → TSX code generated in the right location

Code → Visual

When you edit code:

• Type new TSX → Elements appear on canvas

• Modify Tailwind classes → Visual styles update instantly

• Add components → Canvas displays them immediately

• Change props or state → Interactive behavior updates live

Hot Module Replacement (HMR)

Onlook uses HMR for instant updates:

• Fast Refresh preserves component state during edits

• Sub-second updates for most changes

• Error overlay shows TypeScript or runtime errors

• Automatic recovery when errors are fixed

Preview Not Updating?
If the preview doesn't update immediately, click the Refresh button (⟳) in the canvas window.

When to Restart the Sandbox

Some changes require a full sandbox restart:

• Adding new dependencies to package.json

• Modifying next.config.js or tailwind.config.ts

• Changing environment variables

• Adding new API routes

Click the Restart Sandbox button in the bottom toolbar when needed.

Integrated Terminal

Run commands without leaving Onlook.

Opening the terminal:

Click the Terminal icon in the bottom toolbar.

Terminal features:

• Session persists when you close and reopen the panel

• Command history preserved

• Current directory maintained across sessions

The Ideal Workflow: AI + Visual + Code

The most efficient way to build in Onlook combines all three modes. Here's when to use each:

Use Visual Editing For:

• Layout and positioning

• Spacing and alignment

• Visual styling (colors, borders, shadows)

• Responsive design tweaks

• Drag-and-drop component arrangement

Use AI Chat For:

• Creating new components and features

• Generating boilerplate code

• Complex logic and functionality

• Setting up integrations

• Refactoring and optimization

Use Code Editor For:

• Editing text content (hardcoded HTML text)

• Writing utility functions

• Fine-tuning logic

• Setting up API calls

• Complex state management

Example Workflow

Building a contact form:

1. AI Chat: "Create a contact form with name, email, and message fields using shadcn/ui components"

2. Visual Editing: Adjust spacing, alignment, and button styles on canvas

3. Code Editor: Edit placeholder text and button labels directly in code

4. AI Chat: "Add form validation with error messages"

5. Visual Editing: Style error message colors and positioning

This workflow is faster than using any single approach alone.

File Organization Best Practices

Organize by Feature, Not Type

Good:

app/

├── dashboard/

│   ├── page.tsx

│   ├── layout.tsx

│   └── components/

│       ├── stats-card.tsx

│       └── activity-feed.tsx

└── settings/

    ├── page.tsx

    └── components/

        └── settings-form.tsx

Avoid:

components/

├── all-components-in-one-folder.tsx

├── stats-card.tsx

├── activity-feed.tsx

└── settings-form.tsx

Follow Next.js Conventions

• Pages: page.tsx (lowercase)

• Layouts: layout.tsx (lowercase)

• Components: ComponentName.tsx (PascalCase)

• Utilities: utils.ts (lowercase)

• Types: types.ts or ComponentName.types.ts

Use Descriptive Names

Good:

• UserProfileCard.tsx

• formatCurrency.ts

• useAuth.ts

Avoid:

• Card.tsx

• utils.ts

• hook.ts

Keep Files Focused

Good: One component per file

// components/ui/button.tsx

export function Button({ children, ...props }) {

  return <button {...props}>{children}</button>

}

Avoid: Multiple unrelated components in one file

// components/ui/everything.tsx

export function Button() { ... }

export function Card() { ... }

export function Modal() { ... }

Quick Tips

Double-click to jump to code

• Fastest way to connect visual elements with their source

• Opens the exact file and line

Use AI for boilerplate, code for refinement

• AI generates the structure

• Code editor fine-tunes the details

Edit text content in code

• Hardcoded text is faster to edit directly in code

• Use Find/Replace for bulk text changes

Hot reload is your friend

• Make small changes frequently

• See results instantly

• Catch errors early

Organize files as you go

• Don't wait until your project is messy

• Create logical folder structures from the start

• Delete unused files regularly

Use the terminal for package management

• Install dependencies as needed

• Run build additional commands