Adding a Singleton Page to Your Template

Singletons are Keystatic entries that exist once — perfect for unique pages like About, Contact, Privacy Policy, or Terms of Service.

When to Use a Singleton

Use a singleton when:

• The page content is unique (no repeatable entries)
• You need separate SEO fields per page
• Editors should see a single form, not a list of entries

Step 1: Create the Schema

In packages/keystatic-config/src/singletons/, create a file like my-page.ts:

import { singleton, fields } from '@keystatic/core';
import { seoFields } from '../seo-fields';

export const myPage = singleton({
  label: 'My Page',
  path: 'content/my-page',
  schema: {
    title: fields.text({ label: 'Title' }),
    body: fields.markdoc({ label: 'Content' }),
    ...seoFields,
  },
});

Step 2: Register in index.ts

import { myPage } from './singletons/my-page';

export const singletons = {
  // ...existing singletons
  myPage,
};

Step 3: Create the Content File

Create content/my-page.yaml:

title: My Page

And content/my-page/body.mdoc with your default content.

Step 4: Create the Astro Page

Create apps/www/src/pages/my-page.astro:

---
import BaseLayout from '../layouts/BaseLayout.astro';
import { reader } from '../lib/reader';
import Markdoc from '@markdoc/markdoc';

const entry = await reader.singletons.myPage.read();
const body = await entry?.body();
const content = body ? Markdoc.renderers.html(Markdoc.transform(body.node, { nodes: Markdoc.nodes })) : '';
const seo = { title: entry?.seoTitle, description: entry?.seoDescription };
---

<BaseLayout seo={seo}>
  <article class="mx-auto max-w-3xl px-4 py-16 prose" set:html={content} />
</BaseLayout>

Step 5: Add Navigation Link

Edit the Site Settings in Keystatic to add a navigation link pointing to your new page.

Questions?

Read the Adding Pages Guide for more recipes.