Visual editor

The visual editor is Studio’s flagship editing experience. It shows a live preview of your page alongside content fields, letting you edit frontmatter, click elements in the preview to jump to their fields, and see changes reflected in real time — all powered by Studio’s custom in-browser Astro runtime.

Opening the visual editor

From the collection browser, click an entry to open it, then select Visual in the toolbar. The visual editor works on any entry that has a corresponding page template in your Astro project.

Editor layout

The visual editor uses a split-pane layout:

Panel	Purpose
Left panel	Schema-driven field editors rendered as forms based on your Zod content schema
Right panel	Live Astro preview rendered in an iframe using Studio’s in-browser runtime

The toolbar at the top of the editor 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 whether the live preview is up to date or recompiling
Save and Publish buttons — commit or publish your changes

Live preview

Studio’s custom runtime compiles Astro components directly in the browser, producing a live preview without any server round-trips. The VirtualFileSystem loads project files from GitHub on demand and maintains an in-memory file tree for the compiler.

When you change a frontmatter field, the preview updates instantly without a full page reload. If your edits affect Tailwind CSS classes, the JIT compiler recompiles styles on the fly so the preview always reflects the current state of your content.

Click-to-edit

Click any annotated element in the preview to open its corresponding field editor in the left panel. This works via data-quant-field attributes added to your Astro templates.

<h1 data-quant-field="title">{entry.data.title}</h1>
<p data-quant-field="description">{entry.data.description}</p>
<img data-quant-field="image" src={entry.data.image} />

When you click the title in the preview, the title field editor opens on the left. Studio auto-adds these annotations when scaffolding page templates for new collections, so click-to-edit works out of the box for generated templates.

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, publish, and review

The visual editor provides three actions for persisting your work:

Save — commits your changes to the current branch in your GitHub repository
Publish — sets draft: false on the entry and saves, making it visible on the live site after deployment
Request Review — creates a pull request from the current branch, allowing collaborators to review changes before merging

Next steps

Content management — Learn how to browse, organise, and manage entries across your content collections
AI assistant — Use Studio’s AI tools to generate content, manage files, and automate editing workflows