Visual editor

The visual editor pairs a live preview of your page with schema-driven field editors, so you can edit frontmatter, click elements in the preview to jump to their fields, and see changes reflected in real time — all powered by Studio’s in-browser Astro runtime.

Opening the visual editor

From the collection browser, click an entry to open it. Use the view-mode toggle in the toolbar to switch between Code, Split, and Preview — the split and preview modes render the live Astro preview alongside (or in place of) the field editors. The visual editor works on any entry that has a corresponding page template in your Astro project.

Editor layout

The visual editor uses a three-pane layout you can show or hide as you work:

Pane	Purpose
Explorer (toggleable, left)	The file tree for the active branch
Editor and preview (centre)	Monaco code editor and the live Astro preview — switch with the view-mode toggle
Fields panel (toggleable, right)	Schema-driven field editors rendered from your Zod content schema

Toggle the view mode in the toolbar with Code, Split, or Preview. Use the sidebar buttons to show or hide the Explorer and Fields panes.

The toolbar also provides quick access to key actions:

Back button — return to the collection browser
Breadcrumb — shows the current collection and entry path
Unsaved changes indicator — appears when you have edits that have not been saved
Preview status — shows Live preview, Loading…, or No preview
Save — commits your changes to the current branch (primary button when the entry is a draft)
Save & Publish — sets draft: false and saves; the only save button shown for entries that are already published
History — view recent commits for the active file
Revert — restore the file to its state on the production branch

Live preview

Studio’s runtime compiles Astro components directly in the browser, so the preview updates without server round-trips. Project files are loaded from your Git repository on demand into an in-memory file tree that the compiler reads from. Astro 5.x with content collections defined in src/content/config.ts is the supported target — the same generation described in the overview.

The runtime compiles the file types you’d expect in an Astro project: .astro components, .ts / .tsx / .js / .jsx, .md and .mdx content, and .css stylesheets. npm dependencies declared in package.json are fetched from a CDN on first use and cached. Tailwind utility classes are recompiled on the fly so the preview always reflects the current set of classes in your templates.

When you change a frontmatter field, the preview updates without a full page reload.

Click-to-edit

Click any annotated element in the preview to open its corresponding field editor in the left panel — or, for text inside the body, edit it inline. Click-to-edit is driven by data-quant-field, data-quant-collection, and data-quant-slug attributes on your Astro templates, with an auto-annotation fallback that covers unannotated templates on a best-effort basis.

See Click-to-edit for the full annotation model, supported field types, and the auto-annotation fallback’s limitations.

Editing fields

Each field type renders an appropriate editor component based on the Zod schema definition:

Field type	Editor component
String	Text input
Date	Date picker
Image / file	Media picker (opens the media browser)
Array of strings	Tag editor
Enum	Dropdown select
Nested object	Expandable object editor with sub-fields

Changes reflect in the live preview as you type, giving you immediate visual feedback on how your content will look on the published site.

Markdown body

Body content below the frontmatter is edited in a separate markdown editor. The editor supports MDX components, so you can use custom Astro components inline with your prose. Changes to the body update the live preview automatically.

Save and publish

The visual editor provides two actions for persisting your work:

Save — commits your changes to the current branch in your Git repository
Save & Publish — sets draft: false on the entry and saves, making it visible on the live site after deployment

For review workflows — opening pull requests, reviewing diffs, and merging — see Review & publishing.

Next steps

Click-to-edit — Annotation model, inline editing, and the auto-annotation fallback
Content management — Browse, organise, and manage entries across your content collections
AI assistant — Use Studio’s AI tools to generate content, manage files, and update styling