Content management

The collection browser is Studio’s home screen. Browse content collections, create and edit entries, manage media assets, and monitor deployment status — all from a single view.

Collection browser

The collection browser displays all entries in the currently selected content collection. Switch between Grid and List views depending on how you prefer to scan your content.

Feature	Description
Live search	Filter entries in real time by typing into the search bar at the top of the browser
Collection selector	Use the dropdown to switch between content collections defined in your project
Branch selector	Switch to a different branch to browse and edit content in an isolated environment
Deployment status badge	Shows the latest build state for the current branch so you know whether your changes are live
Preview URL links	Each entry displays a clickable preview link, auto-detected from your Astro route patterns

Tip

Use the branch selector to work on draft content in a feature branch without affecting your production site. See Branches and environments for more detail.

Creating entries

Click New Entry to open the quick-create modal. Enter a title and the slug is auto-generated from it. Smart defaults from the collection schema are applied automatically — for example, draft: true and today’s date are populated if those fields exist in your Zod definition.

After filling in the title you can choose where to continue editing:

• Visual editor — Open the entry in the visual editor for live-preview, click-to-edit authoring
• Entry editor — Open the entry in the code-based entry editor for a schema-driven form and raw Markdown editing side by side

Entry editor

The entry editor is a code-based alternative to the visual editor. It uses a split-pane layout:

Pane	Purpose
Left — frontmatter form	A schema-driven form generated from your Zod definition, with the same field types available in the visual editor
Right — Markdown editor	A Monaco-powered editor with full syntax highlighting for Markdown and MDX content

Edit frontmatter fields using the structured form on the left, and write body content in the Markdown editor on the right. When you click Save, the change is committed directly to the current branch.

Note

The entry editor supports the same field types as the visual editor — text, date, boolean, select, image, and more — all derived from your content schema.

Deleting entries

Delete an entry from either of two places:

• Collection browser — Right-click an entry (or open its context menu) and select Delete
• Inside an editor — Use the delete action within the visual editor or entry editor

Deletion is committed to the current branch. If you are working on a feature branch, the entry remains intact on other branches until you merge.

Media management

Navigate to Media in the Studio sidebar to manage files stored in your repository’s /public directory.

Capability	Description
Upload	Drag and drop or browse to upload files into /public
Browse directories	Navigate the folder structure within /public
View thumbnails	Image files display as thumbnail previews for quick identification
Delete files	Remove files you no longer need from the repository

The media browser operates in two modes:

• Standalone browser — Open from the sidebar to manage assets independently of any entry
• Selection mode — Embedded inside the entry editor or visual editor when you interact with an image field, allowing you to pick an existing asset or upload a new one to populate the field

Tip

Uploaded files are committed to the current branch, so you can manage media in a feature branch and merge it alongside your content changes.

Preview URLs

Studio auto-detects Astro dynamic route patterns from the src/pages/ directory to generate preview links for each entry. For example:

Route file	Generated preview URL pattern
src/pages/blog/[...slug].astro	/blog/{slug}
src/pages/docs/[...slug].astro	/docs/{slug}

Each entry in the collection browser shows a clickable preview link built from these patterns. Clicking the link opens the rendered page in the Studio preview pane so you can see exactly how the entry looks on your site.

Next steps

• AI assistant — Use Studio’s AI-powered assistant to generate, refine, and restructure content
• Code editor — Edit project files directly in Studio’s Monaco-powered code editor