Files and editor

The IDE works on a normal folder on your computer. Your files stay where they are, and you can use any other tool on them at the same time.

Opening a project#

1. 1

   Choose a folder

   Click the project switcher in the header and choose Open folder…, or use the open-folder button in Files.

2. 2

   Pick it in the dialog

   Select your project in the Open a project folder dialog.

3. 3

   Start working

   Files fills with your project. The IDE remembers your recent projects and the tabs you had open in each.

Files updates by itself when files change on disk, whether you or an agent changed them.

Files#

The toolbar has New file, New folder, Refresh, open folder, Collapse all and Filter files. Right-click an item for more:

• New File, New Folder
• Rename, Cut, Copy, Duplicate
• Copy Full Path, Copy Relative Path
• Show in Explorer, Refresh Explorer
• Delete

• Select several items with Ctrl and Shift. Ctrl+A, Ctrl+C and Ctrl+V work in the tree, and Ctrl+V can paste an image from the clipboard as a file.
• Drag files from Windows Explorer into the tree to copy them in.
• While renaming, press Enter to confirm or Esc to cancel.

Search#

Open the Search tab, or press Ctrl+Shift+F. Choose All, Files (file names) or Text (lines of code). Search finds; it does not replace.

The editor#

The editor is Monaco, the same engine as VS Code, with tabs and syntax highlighting. Press Ctrl+S to save. There is no autosave.

• If a file changes on disk while you have unsaved edits, the editor says File changed on disk. You have unsaved edits. with Reload from disk and Keep mine.
• If a file is deleted on disk, it shows File deleted. with Close tab.
• With no file open, the editor offers Open file or command (Ctrl+K).

When an agent writes a file#

The file opens by itself, its tab shows AI writing, the content streams in live, and the file is read-only until the agent is done, so your edits cannot collide. Changes made by agents open in a diff view.

Code context#

Select code in the editor and it shows in the chat as a Code context chip. Choose Add to keep it with your next message.

Preview#

• Images and PDFs open as a preview by themselves.
• For HTML, Markdown, JSON and SVG files, the Preview eye button in the header shows the rendered file.
• For TSX and JSX files, Live preview renders a single component. It loads React, Babel and Tailwind from the internet and may not work for components that depend on the rest of your app.

There is no built-in browser. When an agent starts your app's dev server, a notification gives you its address to open in your browser. See Agent tools.

FAQ#