Studio Editor

The Studio is the heart of RepoPress - a visual editor for MDX and Markdown files that commits directly to your GitHub repository. This guide covers every part of the editing experience.

Editor Layout

The Studio is organized into three resizable panels:

  • File Tree (Left) - Browse your repository’s content directory. Click any file to open it in the editor. Directories are collapsible, and the current file is highlighted.
  • Editor (Center) - The main editing area. Edit frontmatter fields at the top and content below. A formatting toolbar provides quick access to headings, bold, italic, links, images, and code blocks.
  • Preview (Right) - A live representation of your MDX content. The fidelity badge identifies whether the current result is Generic or Compatible and explains any downgrade.

You can resize each panel by dragging the dividers, or collapse the file tree and preview panels to focus on writing.

Preview Fidelity

RepoPress labels every preview so an approximation is never presented as the repository’s production output:

  • Generic - Renders a safe, bounded Typeset model without running repository code. This fallback is always available.
  • Compatible - Renders an exact signed browser-compatible artifact in an isolated opaque-origin frame. Framework loaders, Server Components, and full application context may still differ from production.
  • Native - Reserved for a future isolated managed runner that uses the repository’s real framework runtime. It is not available in the current first slice.

When a trusted Compatible artifact is unavailable, stale, or unsupported, the Studio keeps editing available, downgrades to Generic, and shows the reason.

Product-specific MDX components

A repository can declare complete component fields in its RepoPress config and provide a product-owned preview entry. That entry maps names such as an information box, checklist, or product CTA to RepoPress’s portable preview primitives. Your production site keeps its own framework bindings; the Studio adapter does not need Next.js, Astro, or another application runtime.

Compatible product previews are structural and intentionally inert. Images appear as labelled placeholders and actions cannot navigate. RepoPress authorizes the project, reads the adapter from the exact Git commit, signs the current snapshot, and verifies it before the isolated preview mounts. Until that succeeds, the Generic preview remains visible.

MDX Editing with Frontmatter

RepoPress understands MDX frontmatter natively. When you open a file with frontmatter (the YAML block between --- delimiters), the Studio displays each field as a structured form input:

  • Text fields - For title, description, and other string values
  • Date pickers - For date and publishedAt fields
  • Tag inputs - For array fields like tags and categories
  • Toggles - For boolean fields like draft

The body content is edited below the frontmatter section using a full-featured MDX-aware editor with syntax highlighting.

Saving Drafts

Every change you make in the Studio is automatically saved as a draft. Drafts are stored in Convex (not in your Git repository) so you can freely experiment without affecting your live content.

  • Auto-save - Drafts are saved automatically as you type, with a brief debounce to avoid excessive writes.
  • Draft indicator - A status indicator in the editor header shows whether your changes are saved, saving, or unsaved.
  • Discard changes - You can discard a draft at any time to revert to the last published version from Git.

Publishing Workflow

When your content is ready, the publishing workflow guides you through committing changes back to your repository:

Draft → Review

Mark a document for review to signal to collaborators that it’s ready for feedback. Documents in review are visible to all project members but are not yet committed to Git.

Review → Publish

Once reviewed (or if you skip the review step), click Publish to commit the changes. You’ll be prompted to enter a commit message. RepoPress then creates a commit on the configured branch of your repository via the GitHub API.

Publish → Live

Once published, your changes are live in the repository. If your site has CI/CD (e.g., Vercel, Netlify), it will pick up the commit and redeploy automatically.

Version History

Since all published content is committed to Git, you get full version history for free. RepoPress shows the commit history for the current file, including:

  • Commit message and timestamp
  • Author information
  • Ability to view previous versions and compare changes

You can view any previous version and optionally restore it by creating a new draft from that version’s content.

Keyboard Shortcuts

The Studio supports keyboard shortcuts for common editing actions:

ActionShortcut
Bold⌘ + B
Italic⌘ + I
Insert Link⌘ + K
Save Draft⌘ + S
Toggle Preview⌘ + Shift + P

That covers the essentials of the Studio editor. If you haven’t already, head back to Getting Started or learn more about How It Works under the hood.