Keystatic CMS

Keystatic is a visual editor for the content in your project. It writes the same JSON, MDX and Markdown files you would write by hand, so every edit is an ordinary change you can review and commit. There is no database and no account.

Open it

npm run cms

This starts the dev server and opens http://127.0.0.1:4321/keystatic. With npm run dev already running, open the address yourself.

What you can edit

The sidebar is grouped by language. Each language has the same four collections:

Collection	Files	Notes
Case studies	src/content/projects/	Every field, including layout, metrics, gallery and credits
Journal	src/content/journal/	A rich text editor for the article body
Open roles	src/content/roles/	Roles on the careers page
Legal pages	src/content/legal/	Privacy policy and imprint

Labels and help text in the editor match the fields described in Case studies and Journal. Dropdowns for disciplines, industries and authors come from src/content/taxonomy.ts, so the editor and the build always agree.

Images

Images uploaded in the editor are stored per entry, for example src/assets/projects/halden-rail/cover.jpg. Translations point at the same files, so a German case study uses the English one’s images and you upload each image once.

Translations

1. Open the collection in the language you want, for example “Case studies (DE)”.

2. Create an entry and give it exactly the same name as the English one. The name becomes the file name, and the same file name is how the site knows the two belong together.

3. Translate the text. Leave the images: choose the same files as the English entry.

An entry that exists only in English still appears on the German and Indonesian site, in English. See Translating content.

Nothing of it ships

Keystatic runs only with npm run dev. npm run build produces a fully static site with no React, no CMS routes and no admin login. Set KEYSTATIC=false to switch it off in development as well, which is what netlify.toml and the CI workflow do.

Formatting

Keystatic formats the files it saves in its own way, so src/content/projects and src/content/journal are excluded from Prettier. That keeps npm run format from undoing the editor’s formatting and creating noisy diffs.

Editing a deployed site

Out of the box the editor only works on your machine. To let a client edit from the browser, Keystatic can save to GitHub instead of the local disk. This needs a server, so it is a bigger change:

1. Switch storage in keystatic.config.ts to { kind: 'github', repo: 'your-org/your-repo' } (or use Keystatic Cloud).
2. Load the Keystatic integration in production too: in astro.config.mjs, remove the isDev condition from cms.
3. Add an Astro server adapter for your host, so the /keystatic routes can run on demand. The rest of the site can stay prerendered.
4. Follow Keystatic’s GitHub mode guide to create the GitHub app it signs in with.

Every save then becomes a commit, and your host rebuilds the site.

Changing a field

The editor’s fields are defined in keystatic.config.ts and mirror the schemas in src/content/schema.ts. When you add or rename a field, change both files. The build validates every entry against the schema, so a mismatch shows up as a build error rather than a broken page.