Keystatic integration
Keystatic is a Git-based CMS from Thinkmill: editors use an admin UI at /keystatic and every save is written as a file in the code repository (YAML or JSON, with Markdoc or MDX for long text). We add it to Astro with @keystatic/astro and to Next.js with @keystatic/next. Framer and Webflow host their own content, so Keystatic only fits a coded site.
| Complexity | Medium |
|---|---|
| Method |
|
| Typical setup | 2 to 4 days |
| What we do | We define the collections and fields in keystatic.config.ts, wire the pages to them, and set up GitHub mode or Keystatic Cloud so editors can log in. |
| Category | CMS |
Setup by platform
How we set up Keystatic
Framer
- Not supported
Not possible. Framer stores content in its own CMS and does not read files from a Git repository, so there is nothing for Keystatic to write to.
Webflow
- Not supported
Not sensible. Webflow CMS is the content store for a Webflow site, and Keystatic needs a codebase it can commit files to. If you want Git-based content, the site moves to Astro or Next.js first.
Astro
- Native
@keystatic/astro with the React and Markdoc integrations adds the admin UI at /keystatic. Pages read entries with the Reader API or Astro content collections. The admin needs server code, so a deployed editor needs an Astro adapter; the public pages can still be prerendered.
Astro developmentNext.js
- Native
@keystatic/next adds the admin page under app/keystatic and an API route under app/api/keystatic. Server Components read content with createReader from @keystatic/core/reader, so nothing from the CMS runs in the browser.
Next.js development
Use cases
What teams use it for
Small marketing sites
A handful of editors change pages, posts and SEO fields, with no CMS subscription or database to run.
Content reviewed like code
Each save is a commit, so changes can go through a branch and pull request before they reach main.
Editing SEO in one place
Titles and meta descriptions sit in JSON or YAML files next to the code. We use Keystatic this way on our own Astro site.
Before you add it
What to watch out for
Security
GitHub mode needs a GitHub App
On first login Keystatic creates a GitHub App and writes KEYSTATIC_GITHUB_CLIENT_ID, KEYSTATIC_GITHUB_CLIENT_SECRET and KEYSTATIC_SECRET to .env. Those go into the host’s secrets, never into the repo.
Limits
Editors need write access
In GitHub mode only people with a GitHub account and write access to the repository can log in. Keystatic Cloud handles the GitHub side for editors without accounts, with a user cap on the free plan.
Performance
The admin needs a server
Keystatic’s API routes need Node.js on the host. We keep the public site static and give the admin its own server-rendered route or deployment, so editors never slow the live pages.
FAQ
Questions about Keystatic
Where does the content live?
In your repository, as files. Entries are YAML by default or JSON if configured, and long text is saved as .mdoc or .mdx. There is no database, so content is versioned, backed up and moved with the code.
Can editors without GitHub accounts use it?
Not in GitHub mode, which checks each editor’s access to the repository. Keystatic Cloud connects the project to GitHub for you and lets team members edit without their own GitHub account.
How does the site update after an edit?
In local mode a save writes the file on your computer, and you commit and deploy. In GitHub mode each save is a commit on a branch; merging it to the main branch triggers your host’s normal build.
Keep exploring
Compare platforms
Other integrations
- SanityA headless CMS for structured content, with live preview and click-to-edit for marketers.
- ContentfulAn API-first headless CMS for teams that publish across many sites, brands and channels.
- StoryblokA headless CMS with a visual editor, so marketers build pages from blocks and see them as they edit.
You've reached the end, so now…
Tell us what you’re building.
We’ll help you map the right scope, team, timeline, and next steps.
Book a call