Using the in-browser CodeMirror IDE over your Documents folder

Software → IDE gives you a full code editor that runs entirely in your browser and works directly on your project's Documents folder — no third-party editor, no separate checkout.

What the IDE is

The IDE is a self-hosted CodeMirror 6 editor mounted over your project's full Documents folder. It loads the files you already have in the project (including any repositories you've imported as nested folders) and lets you read and edit them in place. Because the editor is browser-only, it loads client-side and never renders during server rendering.

Working with files

You get a file tree on the left and a clean editor on the right. The tree reflects your real Documents structure, including nested folders — imported repo clones keep their directory paths. Right-click in the tree to add a new file, add a folder, or delete one. Top-level folders are expanded by default so you can find things quickly.

The editor provides multi-language syntax highlighting across common languages — TypeScript/JavaScript, JSON, HTML, CSS, Python, Go, Rust, SQL, YAML, Markdown and many more — picked automatically from each file's extension.

What you can do here

Beyond editing, the IDE includes an in-browser preview for runnable web projects and a Camelia bar so the AI copilot can edit across the whole folder for you. Edits save straight back to the project's encrypted store — see the related articles on saving, previewing, and asking Camelia to make changes.

The IDE renders even when the project has no code yet, so you can start from an empty folder and build up from there.