Skip to content

Keystatic

Keystatic edits the content files in your project. Everything stays in your repository: no database, no extra service.

Run pnpm dev and open /keystatic on the local site. Saving writes the files on disk; commit and push them like any other change.

The editor is organised like the site: Pages (home, landing pages, every single page, legal, site settings, brand), Blog and Content (changelog, docs, interface texts). Fields have the same rules as the build (required fields, formats such as colors), so you can’t save something the site would reject.

In production, Keystatic saves each change as a commit to your GitHub repository, and your host rebuilds the site.

  1. Set PUBLIC_KEYSTATIC_GITHUB_REPO=owner/name in .env and run pnpm dev.
  2. Open /keystatic and follow the steps: Keystatic creates a GitHub App and writes four values into .env (PUBLIC_KEYSTATIC_GITHUB_APP_SLUG, KEYSTATIC_GITHUB_CLIENT_ID, KEYSTATIC_GITHUB_CLIENT_SECRET, KEYSTATIC_SECRET).
  3. Add all of them to your host’s environment variables and redeploy.
  4. In the GitHub App settings, add the callback URL https://<your-domain>/api/keystatic/github/oauth/callback.

Editors then log in with GitHub at https://<your-domain>/keystatic. Once the repository is set, saves in pnpm dev become commits too.

Each page and collection keeps its photos in its own folder under src/assets/photos/, named the way Keystatic names them. Upload photos through the editor rather than reusing one file in several places: when an entry is saved, Keystatic removes photos that entry no longer uses.