Files
The Files panel is a file tree explorer showing every file and folder in your project. Click any file to open it as a tab in the center area's code editor.
The Files panel is a file tree explorer showing every file and folder in your project. Click any file to open it as a tab in the center area's code editor.
File Tree
The panel shows the full directory structure of your project. Folders have expand/collapse controls, and files are shown with type-specific icons (.tsx, .css, .ts, .json, etc.). Click any file to open it in the code editor.
Quick Open
Press Cmd+P (Mac) or Ctrl+P (Windows) to open the Quick Open dialog. Start typing a filename and the list filters in real time using fuzzy matching. This is a fast way to jump to any file without browsing the tree.
Code Editor
Files open in a tabbed code editor in the center area, alongside the Preview tab. The editor includes:
- Syntax highlighting for TypeScript, CSS, JSON, and other languages
- Line numbers in the left gutter
- Code folding to collapse and expand blocks
You can edit code directly in the editor. Changes are saved automatically and reflected in the preview.
Tabbed Editing
The center area works like a tabbed editor. You can have multiple files and the Preview open as tabs simultaneously.
Tabs follow a dynamic-until-pinned system:
- Opening a file replaces the current unpinned tab (shown in italic text)
- Double-click a tab to pin it (it switches to normal text and stays open)
- Making an edit to a file automatically pins its tab
Related Articles
- Working with Code – guide to browsing and editing code
- Search – search across file contents
Theme
The Theme panel manages your project's design system: semantic color tokens and typography scales that apply consistently across every component. It has two tabs, Color and Typography.
Search
The Search panel lets you search for text across all files in your project. Type a query in the search box and results appear instantly, grouped by file.