← All Docs

Building Apps

Direct Code Editing

While chat is the fastest way to build, sometimes you need precise control over your code. The Code tab lets you view and edit every source file in your app directly, just like a traditional code editor.

Accessing the Code Tab

1

Switch to the Code Tab

In the Application Editor, click the Code tab at the top of the left panel. This replaces the chat view with a file browser and code editor.

2

Browse the File Tree

The FileTree on the left shows all of your app's source files organized by folder. Click any file to open it in the editor. The currently open file is highlighted.

3

Edit and Save

Make your changes directly in the code editor. Changes are saved automatically when you click outside the editor or switch files. The preview panel on the right re-bundles and refreshes to show your updates.

What You Can Edit

Every source file that makes up your app is available for editing:

  • React components — .tsx and .jsx files containing your UI components and pages.
  • Stylesheets — .css files for custom styles beyond Tailwind utility classes.
  • Entry points — src/index.tsx or src/index.jsx, the main file that bootstraps your app.
  • HTML template — public/index.html for custom Tailwind config, meta tags, or scripts in the <head>.
  • Utility files — Helper functions, constants, type definitions, and other supporting code.

When to Use Code Editing vs. Chat

Both approaches are powerful, and you can freely switch between them. Here's when each shines:

  • Use the Code tab for small, precise changes — fixing a typo, adjusting a color value, tweaking spacing, renaming a variable, or changing a specific string of text.
  • Use Chat for larger changes — adding features, restructuring components, fixing complex bugs, or making design overhauls. Chat understands your full app context and can coordinate changes across multiple files.

Tip: Any edits you make in the Code tab are picked up by the AI automatically. The next time you send a chat message, the AI will see your manual changes and work with them. This makes it easy to combine both approaches — use chat for the heavy lifting, then fine-tune in the Code tab.

Working with the FileTree

The FileTree provides a familiar folder structure for navigating your app's files. Files are organized into directories like src/, src/components/, src/pages/, and public/. Click a folder to expand or collapse it, and click a file to open it in the editor.

Note: New files can only be created through the Chat panel. If you need a new component or page, ask the AI to create it. You can then refine it in the Code tab afterward.