Skip to content
QuantCDN

Code editor

For developers who need direct access to source files, Studio includes a full code editor powered by Monaco. Browse the project file tree, edit Astro components, TypeScript, CSS, and configuration files — all within 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 GitHub repository and opens the Monaco editing environment.

File tree

Section titled “File tree”

The left panel displays a recursive directory browser with expand and collapse controls for every folder in your project. The file tree shows all project source files, including:

  • Astro components (.astro)
  • TypeScript and JavaScript files (.ts, .js)
  • CSS and style files (.css)
  • JSON configuration files (.json)
  • Markdown and MDX content files (.md, .mdx)
  • Project configuration files (astro.config.mjs, tailwind.config.cjs, tsconfig.json)

The file tree loads from your GitHub repository, so it always reflects the current state of the branch you are working on.

Editing files

Section titled “Editing files”

Select a file from the tree to open it in the Monaco editor. Monaco provides full syntax highlighting and IntelliSense for Astro, TypeScript, CSS, JSON, and Markdown — giving you the same editing experience you would expect from a desktop code editor.

Saving a file commits the change directly to the current branch in your GitHub repository. Changes are visible immediately in the visual editor preview, so you can switch between the code editor and the visual editor without losing context.

Creating and deleting files

Section titled “Creating and deleting files”

Create new files and directories directly from the file tree. Right-click a folder to add a new file or subdirectory within it. Delete files you no longer need using the same context menu.

This is useful for adding new components, layouts, or utility files to your project — for example, creating a new Astro layout in src/layouts/ or adding a helper module in src/utils/.

Component preview

Section titled “Component preview”

The preview panel shows the rendered output of the current component alongside the code editor. As you make changes to a component file, the preview recompiles and updates automatically.

Test different prop values directly in the editor to see how components behave under various conditions. This gives you a rapid feedback loop for component development without leaving the browser.

Next steps

Section titled “Next steps”