Made for Astro content collections

The CMS experience your Astro content deserves

Astro Editor reads your Zod schemas and transforms frontmatter into smart forms. Get validation, cross-collection references, image fields with previews, and multi-framework MDX components — all in a beautiful interface inspired by iA Writer.

Download for macOS Universal (Intel & Apple Silicon)

Or install via Homebrew: brew install --cask astro-editor

See it in action

Schema-aware frontmatter forms meet distraction-free writing. Your content collections, beautifully organized.

File Sidebar
Collections & drafts organized by date
Clean Editor
Markdown without the YAML clutter
Smart Forms
Auto-generated from your Zod schemas

Most Astro developers work in two modes: coder mode for components and deployment, writer mode for content. Code editors excel at the former but overwhelm the latter with distractions and YAML complexity. Astro Editor focuses purely on writer mode—no git, no preview, no deployment—just beautiful, distraction-free writing with intelligent frontmatter forms that understand your schemas.

Focus mode

Eliminate distractions with focus mode. Only your current sentence stays bright while everything else fades away.

Perfect for deep writing sessions when you need to concentrate on one thought at a time.

Focus mode highlighting only the current sentence

Copyedit highlighting

Analyze your writing with color-coded parts of speech. Spot overused adverbs, check verb consistency, and improve your prose.

Toggle individual highlights for nouns, verbs, adjectives, adverbs, and conjunctions.

Editor with copyedit highlighting showing different parts of speech in colors

MDX component insertion

Press Cmd+/ in MDX files to instantly insert components from any framework—Astro, React, Vue, or Svelte. Configure props visually, then tab through to fill values.

Reads your component props automatically from your project's MDX component directory.

MDX component insertion panel showing component props configuration

Beautiful dark interface

Inspired by iA Writer's clean aesthetics. Custom syntax highlighting makes your markdown beautiful without overwhelming your content. Customize heading colors to match your style.

Light and dark themes with thoughtful typography designed for long writing sessions.

Dark mode interface showing clean editor with syntax highlighting

Smart image fields

Image fields with live previews and drag-and-drop support. Images are automatically copied to your assets directory with web-safe names using relative paths by default for portable content.

Edit paths manually or clear images with a click. Configure absolute paths per project or collection when needed. Works with Astro's image() helper for type-safe frontmatter.

Image field in frontmatter sidebar showing preview and path editing

Image preview on hover

Hold Option/Alt and hover over any image path or URL in your markdown to see an instant preview in the bottom right corner.

Works with remote images (URLs), absolute paths relative to your project root, and relative paths. Perfect for quickly checking your images without leaving the editor.

Image preview appearing when hovering over an image path in the editor

Everything you need to edit Astro content

Thoughtful details for teams and solo creators — designed to keep you in flow.

Schema-aware frontmatter

Reads your Zod schemas to generate smart forms. Dates become pickers, enums become dropdowns, references link collections. Nested objects and constraints fully supported.

Smart image handling

Image fields with live previews. Drag images to automatically copy, rename, and link them with relative paths for portability. Hover over any image path with Option to preview it instantly.

Writer mode, not coder mode

Focus mode dims everything but your current sentence. Typewriter mode keeps your cursor centered. Write without distractions.

Command palette

Press Cmd+K for instant access. Fuzzy search files across collections, execute commands, switch projects — all keyboard-driven.

MDX component insertion

Press Cmd+/ in MDX files to insert Astro, React, Vue, or Svelte components. Configure props visually, then tab through to fill values.

Auto-save & crash recovery

Automatically saves as you write with configurable delay, plus backup saves every 10 seconds during flow state. Full crash recovery means you never lose work, even if the app quits unexpectedly.

Navigate deep hierarchies

Full support for nested subdirectories with breadcrumb navigation. Files and folders sorted intelligently, with draft filtering across all levels.

Adapt to any project structure

Three-tier preferences system lets you override paths and field mappings globally, per project, or per collection. Works with unusual Astro setups without compromise.

Image preview on hover

Hold Option/Alt and hover over any image path or URL in the editor for an instant preview. Works with remote images, absolute paths, and relative paths.

How it works

  1. 1

    Open your Astro project

    Point to any Astro 5+ project with content collections. Schemas are read from your content.config.ts automatically.

  2. 2

    Write without friction

    Frontmatter fields become smart forms. YAML stays hidden. Focus purely on your content.

  3. 3

    Stay in your workflow

    Use your IDE for code, terminal for git. Astro Editor handles the writing. Each tool does what it does best. 

import { defineCollection, z } from "astro:content";

const posts = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    featured: z.boolean().default(false),
    date: z.date(),
    tags: z.array(z.string()).default([]),
    description: z.string().optional()
  })
});

export const collections = { posts };

Your schemas define the editing experience. No configuration needed.