Editing files

The model does most of the writing, but you can open and edit any file yourself.

The file tree

The middle pane lists every file in the project. Folders first, then files. A blue dot marks a file with a pending AI change; created files show a plus icon, deletions a cross. Click a file to open it in the editor.

The editor

A full code editor with syntax highlighting for TypeScript, TSX, CSS, JSON, Markdown and shell, bracket matching and multiple cursors. Colourful file-type icons and a choice of editor themes are in Settings → Editor.

Edit, then click Save. A save:

1. writes the file to the project as a new version,
2. pushes it into the running sandbox,
3. reloads the preview.

Unsaved edits are kept while you switch between files, but they're lost if you leave the builder — save before navigating away.

Editing with a pending AI change

If you open a file that has a pending change, you see the diff, not the editor. Accept or reject the change first, then edit. This keeps "what the model proposed" and "what you typed" from getting tangled.

Creating and deleting files

Ask the model ("create lib/format.ts with a currency formatter") — it's faster and it wires imports for you. Deleting is the same: "remove the old components/legacy-form.tsx and its usages".

.env and generated files

.env is editable but two lines are managed by Qyant — see Environment variables. node_modules, .next and other build output are never part of the project and never appear in the tree.

Limits

Up to 2,000 files per project, 1 MB per file. Binary assets (images, fonts) are better served from a URL or a storage bucket than committed to the project.