Skip to content
QuantCDN

Code editor

When you need direct access to source files, Studio includes a Monaco-based code editor. Browse the project file tree, edit components, scripts, styles, and configuration files in the browser.

Opening the code editor

Section titled “Opening the code editor”

Navigate to Files from the Studio sidebar. The code editor loads your project’s file tree from the connected Git repository and opens the Monaco editing environment.

File tree

Section titled “File tree”

The left panel is a recursive directory browser with expand and collapse controls for every folder in your project. It loads from the connected Git repository so it always reflects the current state of the branch you’re on.

Right-click any file or folder for a context menu with Rename, Move to…, and Delete, plus New folder on folders and Discard unsaved changes on files that have unsaved edits. To create files, use the New file and New folder buttons in the file-tree toolbar. Use these to add components in src/components/, layouts in src/layouts/, or any other source file your project needs.

Editing files

Section titled “Editing files”

Select a file from the tree to open it in Monaco. Syntax highlighting is applied based on the file extension:

Extension Mode
.astro, .html HTML
.ts, .tsx TypeScript
.js, .jsx, .mjs, .cjs JavaScript
.css, .scss, .less CSS / SCSS / Less
.md, .mdx Markdown
.json JSON
.yaml, .yml YAML
.xml, .svg XML
.sh, .bash Shell
.toml, .ini, .env INI
.php, .py, .rb, .go, .rs, .sql, .graphql Language-specific

Files without a recognised extension open as plain text. .astro files use HTML highlighting — the editor doesn’t have a dedicated Astro grammar.

Monaco features that ship enabled: minimap, line numbers, word wrap, bracket-pair colourisation, indentation guides, and Cmd/Ctrl+S to save. Saving commits the change directly to the current branch in your Git repository.

Live preview

Section titled “Live preview”

When the preview pane is open alongside the editor, changes you save (or even type, after a short debounce) are written through to the runtime’s in-memory file system and the preview re-renders. The same runtime that powers the visual editor handles re-compilation, so component, layout, page, and style edits all reflect in the preview without leaving Studio.

Next steps

Section titled “Next steps”