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
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.jsonThe 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
Click the new file or new folder button in the upper right
Choose the file/folder location
Enter the filename with extension (e.g., Button.tsx)
Click Create
Ask the AI to create files for you:
Create a new component file called components/ui/Card.tsx with a basic card componentThe AI creates the file with appropriate code automatically.
Find code across your entire project with content search.
How to search:
Expand the file view via the button on the top left
Enter your search term
Results show:
- File path and name
- Line number
- Code context around the match
Double-click any element on the canvas to jump directly to its source code.
What happens:
Double-click an element
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.
CodeOnlook maintains real-time sync between canvas and code. Changes in either place instantly reflect in the other.
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
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
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
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.
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 most efficient way to build in Onlook combines all three modes. Here's when to use each:
Layout and positioning
Spacing and alignment
Visual styling (colors, borders, shadows)
Responsive design tweaks
Drag-and-drop component arrangement
Creating new components and features
Generating boilerplate code
Complex logic and functionality
Setting up integrations
Refactoring and optimization
Editing text content (hardcoded HTML text)
Writing utility functions
Fine-tuning logic
Setting up API calls
Complex state management
Building a contact form:
AI Chat: "Create a contact form with name, email, and message fields using shadcn/ui components"
Visual Editing: Adjust spacing, alignment, and button styles on canvas
Code Editor: Edit placeholder text and button labels directly in code
AI Chat: "Add form validation with error messages"
Visual Editing: Style error message colors and positioning
This workflow is faster than using any single approach alone.
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.tsxPages: page.tsx (lowercase)
Layouts: layout.tsx (lowercase)
Components: ComponentName.tsx (PascalCase)
Utilities: utils.ts (lowercase)
Types: types.ts or ComponentName.types.ts
Good:
UserProfileCard.tsx
formatCurrency.ts
useAuth.ts
Avoid:
Card.tsx
utils.ts
hook.ts
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() { ... }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