Try the demoGet Started
  • Astro CMS

Add a complete CMS behind your Astro frontend

ApostropheCMS is an open source CMS for Astro with structured content and true in-context editing. Your Astro components still render the site.

npm create apostrophe@latest
  • Editing Experience

Edit content directly on the Astro-rendered page

Apostrophe gives editors in-context visual editing directly on the Astro-rendered page. They can update content, add approved widgets, rearrange layouts, and see the result in the context of your frontend — while your Astro components remain responsible for rendering the site.

Editors work with the actual page. Developers control the components and editing options available to them.

  • Design System

Keep editors within your design system

Editors can only use the widgets you allow, in the areas you allow, with the fields and options you define. Each widget is rendered by your own Astro component, so editor-created pages still follow your design system.

Use React, Vue, Svelte or Solid inside your Astro components. Apostrophe doesn’t replace them. Some structured fields, like relationships between content, open in a focused editing dialog rather than inline. Editors still see the result on the real page.

  • Architecture

Keep Astro in control of the frontend

An ApostropheCMS and Astro implementation combines two connected projects with clearly divided responsibilities. They can live together in a monorepo or be maintained separately, depending on how your team prefers to work.

How Apostrophe and Astro fit together: Apostrophe owns the content model. Astro owns the rendering. The official @apostrophecms/apostrophe-astroApostrophe Astro connects them.

my-project/ ├── backend/ # Apostrophe: schemas, content, admin └── frontend/ # Astro: components, routes, rendering

Ready for coding agents. The starter ships with CLAUDE.md and ARCHITECTURE.md, so agents follow your project's conventions from the first prompt. Every content type and widget uses the same structure: schema in backend/modules, Astro components in frontend/src. Agent-written changes land where you expect them and are quick to review.

Model content → map components → render in Astro.

// backend/modules/default-page/index.js export default { extend: '@apostrophecms/page-type', options: { label: 'Default Page' }, fields: { add: { main: { type: 'area', options: { widgets: { '@apostrophecms/rich-text': {}, '@apostrophecms/image': {}, '@apostrophecms/video': {} } } } } } };
AposArea renders each widget with the component you mapped and makes the area editable in place for logged-in editors. Visitors get plain Astro output. The catch-all Astro route fetches content for URLs managed by Apostrophe, so editors can add pages without developers creating new routes.
  • Rendering and deployment

Choose the rendering model your project needs

Apostrophe supplies the content and editing layer. Astro's rendering model stays your decision.

  • Server-rendered: output: 'server' fetches current content on each request, so published changes appear right away.

  • Static: output: 'static' fetches content at build time and outputs static files. Published changes appear after the next build.

  • Live editing either way: Editors always work in context on a running Apostrophe + Astro instance, even if your public site ships static. Edit on a server instance, publish a static build.

  • Choose based on how often content changes, how quickly updates need to go live, and how your team prefers to operate the site.

Open source, deployed your way. The Community Edition is MIT licensed with no user or content limits. It includes the core CMS, in-context editing, localization, media and SEO features. Paid editions add features for larger teams and multisite setups.

Apostrophe is a Node.js application. Self-host it alongside your Astro frontend, either deployed separately or in the same container. Requires Node.js 22.19+.

Is ApostropheCMS right for your Astro project?

There’s no single best CMS for Astro. Start with who edits the content and what they need to build.

Approach

Good fit when

Tradeoff

Astro content collections (Markdown/MDX files)

Developers write and update the content

Every change goes through Git and a deploy; no editing UI

Git-based CMS

A small team wants a form-based editor over files in the repo

Limited structure, relationships and page building

API-only headless CMS

Content is shared across many apps and channels

Editors usually work in forms, not on the page; visual editing is often an add-on or paid tier

ApostropheCMS

Non-developers edit and build pages, and you want structured content behind them

A second application to run, and an area and widget model to learn

Tradeoffs to know before you try it

  • Areas and widgets take time to learn. Expect a few hours to get comfortable; the demo starter kit is the fastest way to learn them.

  • You run two applications. Apostrophe and Astro share APOS_EXTERNAL_FRONT_KEY. The CLI sets this up for you.

  • Static builds aren’t instant. Use server rendering if published changes must appear immediately.

  • Schemas are JavaScript, not TypeScript types. Your Astro frontend is a standard Astro project with TypeScript configured.

  • Customer Story

See Astro and Apostrophe running at enterprise scale

Michelin uses ApostropheCMS and Astro as part of a digital platform supporting more than 350 websites across 36 languages, eight brands, and nine business lines. Astro handles the frontend; Apostrophe provides the shared content, editing and multisite foundation.

56

Increase in organic audience

12.5

Improvement in lead conversion rate

75

Increase in total lead volume

ApostropheCMS's visual editor continues to provide a user-friendly interface, enabling non-technical teams to manage content effectively without interfering with the headless architecture.

(opens in new tab)
Clément Ravier

CTO, Consumer Experience Factory at Michelin

Read the Michelin story (opens in new tab)

Common questions

Run npm create apostrophe@latest and choose ApostropheCMS + Astro. The CLI creates an Apostrophe backend and an Astro frontend connected through the official @apostrophecms/apostrophe-astro integration.

Yes. Install the integration in your Astro project, add a [...slug].astro route, and map your page types and widgets to your existing components. The work depends mostly on how your current content is stored and how many components you want editors to use.

The integration supports Astro 5, 6 and 7, and requires Node.js 22.19 or newer.

Yes. Logged-in editors edit content directly on the Astro-rendered page, inside the areas and widgets developers define. Visitors see plain Astro output.

No. Every page type and widget is rendered by an Astro component you write. Apostrophe provides the content and the editing interface.

Yes. Use them inside your Astro components the way you normally would. Apostrophe doesn’t require a specific UI framework.

Yes. Set output: 'static' and the integration fetches content at build time. Editing happens on a running server instance, and published changes appear on the static site after the next build.

Only where editors work. The public site can be a static build or the same server-rendered app that editors use.

Your Astro frontend is a standard Astro project with TypeScript configured. Apostrophe schemas are defined as JavaScript modules, not TypeScript types.

SQLite by default, with no setup. PostgreSQL and MongoDB are also supported.

Yes. The Community Edition is MIT licensed with no user or content limits, and includes the core CMS, in-context editing, localization, media and SEO features. Paid editions add features for larger teams and multisite setups.

Your Astro frontend does not have to become your CMS

Keep the frontend components you chose Astro for. Add the structured content and editorial experience your project needs as it grows.