# How to integrate Keystatic into Astro step by step

> How to integrate Keystatic into Astro step by step: installation, astro.config.mjs, keystatic.config.ts, the /keystatic panel and reading with content collections.

URL: https://codegea.com/en/how-to-integrate-keystatic-into-astro-step-by-step
CMS · 2026-07-04 · Derian Pinto

Astro and Keystatic make a good pair: a generator built for fast sites and a CMS that stores content as Markdown files in your repository. The result is a static, fast website with a comfortable editing panel and no database.

If you are still deciding between frameworks, the comparison of [Astro vs Next.js for landing pages](/en/astro-vs-nextjs-for-landing-pages-performance-and-seo-compared) may help first. Here we get straight to the integration, following the [official Keystatic documentation](https://keystatic.com/docs/installation-astro).

## What you need

- An Astro project (new with `npm create astro@latest` or an existing one).
- Node.js and the project in a Git repository.
- The Keystatic panel renders on the server, so to deploy it you will need an SSR adapter (for example `@astrojs/node` or the Vercel one).

## Step 1: Install the dependencies

```bash
npx astro add react markdoc
npm install @keystatic/core @keystatic/astro
```

`npx astro add react markdoc` installs and configures the React integrations (the Keystatic panel uses React) and Markdoc; then we add the Keystatic packages.

## Step 2: Configure Astro

Add the Keystatic integration in `astro.config.mjs`, next to React and Markdoc.

```js
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import markdoc from '@astrojs/markdoc';
import keystatic from '@keystatic/astro';

export default defineConfig({
  integrations: [react(), markdoc(), keystatic()],
});
```

## Step 3: Create the Keystatic configuration

In the project root create `keystatic.config.ts` with your storage and your collections. It is the same configuration as in Next.js: here we define a *posts* collection in `src/content/posts`.

```ts
import { config, fields, collection } from '@keystatic/core';

export default config({
  storage: {
    kind: 'local',
  },
  collections: {
    posts: collection({
      label: 'Posts',
      slugField: 'title',
      path: 'src/content/posts/*',
      format: { contentField: 'content' },
      schema: {
        title: fields.slug({ name: { label: 'Title' } }),
        content: fields.markdoc({ label: 'Content' }),
      },
    }),
  },
});
```

## Step 4: Open the panel

The Keystatic integration already exposes the panel. Start the project with `npm run dev` and open `http://127.0.0.1:4321/keystatic`: from there you create and edit your entries, which are saved as files in `src/content/posts`. Remember that, since the panel is dynamic, when deploying you need an SSR adapter configured.

## Step 5: Show the content

Since the content lives in `src/content`, you can read it with Astro's native *content collections* and its `getCollection` function.

```ts
---
import { getCollection } from 'astro:content';
const posts = await getCollection('posts');
---
<ul>
  {posts.map((post) => (
    <li><a href={`/posts/${post.slug}`}>{post.data.title}</a></li>
  ))}
</ul>
```

For a single entry you use `getEntry` and the `<Content />` component that Astro generates from the Markdown. That closes the loop: you edit in the panel and Astro renders the final HTML.

## What decides whether it works in production

In Astro the Keystatic panel is dynamic, and that is the difference from a purely static site: even if the public pages are generated as HTML, the editing panel needs a server to run it. That is why the SSR adapter is not a detail at the end, it is an architecture decision.

It pays to test the deployment with the adapter from the start, even before you have content. That way you find out early whether your hosting supports it and what it costs. After that: local mode to develop, GitHub for production, and the client editing without touching code.

If your team does not want to maintain a server for the panel, the honest alternative is something else: a managed CMS or editing directly in the repository. Keystatic shines when you want a friendly panel on top of files, not when you want zero infrastructure.

---

Do you need a fast Astro website that is easy to edit? At Codegea we build it with the right CMS for your case. See the [CMS integration](/en/services/cms-integrations) service or tell us about your project from [the contact page](/en/contact).