Add a demo

Demo pages are Markdown files in src/content/docs/demos/. Adding one means adding a file and opening a pull request. There is no separate CMS and no navigation file to update: the sidebar is generated from the directory automatically.

Steps

1. Create src/content/docs/demos/your-demo-name.md. The filename becomes the URL, so use lowercase words separated by hyphens.
2. Paste the template below and fill it in.
3. Preview locally with npm run dev and confirm the page renders and appears in the sidebar.
4. Open a pull request. Cloudflare Pages builds a preview deployment automatically, and the preview URL is posted on the pull request.
5. Merge. Production rebuilds within a minute or two.

Template

---
title: Your demo name
description: One sentence that will show up in search results and link previews.
sidebar:
  order: 10
---

## What this demonstrates

Why someone should care, in two or three sentences.

**Audience:** who this is for.
**Runtime:** roughly how long it takes.

## Before you start

- Prerequisite one
- Prerequisite two

## Running it

1. First step.

   ```bash
   your command here
   ```

2. Second step.

## What to look for

The specific moments that make the demo land.

## Known issues

Anything that will trip up a first-time runner.

## Ownership

- **Owner:** your name
- **Last verified against:** version or date
- **Source:** repository link

Conventions worth following

Order pages deliberately. sidebar.order controls position within the Demos section. Lower numbers sort first; pages without an order sort alphabetically after those with one.

Write commands so they can be copied. Put each command in its own fenced block with a language tag. Avoid prompts like $ at the start of lines, since they get copied too.

Date your verification claims. “Last verified” is the single most useful line on the page. A demo that says it was verified last week is trustworthy; one with no date is a gamble.

Add a badge when a demo is not ready. In frontmatter:

sidebar:
  badge:
    text: Draft
    variant: caution

Useful components

Starlight ships components you can import in .mdx files, including tabs, cards, file trees, and step-by-step lists. Aside blocks work in plain .md too:

:::tip
Helpful pointer.
:::

:::caution
Something that will bite the reader.
:::

See the Starlight component reference for the full set.