Add docspp to an existing site

If you already have an Astro site with Starlight, adding docspp takes a few minutes. For a new site, use the quick start instead.

Install the packages.

pnpm add @packagelab/docspp-astro @packagelab/docspp-react @astrojs/react react react-dom
pnpm add -D docspp

On pnpm 10 or later, allow the build scripts it asks about by adding this to pnpm-workspace.yaml:

allowBuilds:
  esbuild: true
  sharp: true

Register the integrations in astro.config.mjs.

import react from '@astrojs/react'
import starlight from '@astrojs/starlight'
import docspp from '@packagelab/docspp-astro'
import { defineConfig } from 'astro/config'

export default defineConfig({
  integrations: [
    docspp(),   // compiles diagrams/ at build time; the build fails on a broken diagram
    react(),
    starlight({
      title: 'My docs',
      // Widens the content column for diagrams and keeps prose at a readable width.
      customCss: ['@packagelab/docspp-astro/starlight.css'],
    }),
  ],
})

docspp({ dir: 'my-diagrams' }) changes the folder, which is diagrams by default.

Add the types. In src/env.d.ts:

/// <reference types="@packagelab/docspp-astro/virtual" />

Create a first diagram.

pnpm docspp new shop
pnpm docspp schema        # editor autocomplete for diagram.yaml
pnpm docspp check

Put it on a page, such as src/content/docs/shop.mdx.

---
title: Shop
tableOfContents: false
---
import Diagram from '@packagelab/docspp-astro/Diagram.astro'

<Diagram name="shop" />

Check in CI. Add "check": "docspp check" to the scripts in package.json, and run it before you build.

Fonts

The starter loads IBM Plex Sans and IBM Plex Mono through Fontsource. To match it:

pnpm add @fontsource/ibm-plex-sans @fontsource/ibm-plex-mono

customCss: [
  '@fontsource/ibm-plex-sans/400.css',
  '@fontsource/ibm-plex-sans/600.css',
  '@fontsource/ibm-plex-mono/400.css',
  '@packagelab/docspp-astro/starlight.css',
],

Or use your own fonts and set --docspp-sans and --docspp-mono. See theming.

An Astro site without Starlight

The same steps apply, except for customCss. Give the diagram a wide container, since a diagram is wide. <Diagram> is a normal Astro component and does not need Starlight.

Check that it works

Run pnpm dev and open the page. You should see the diagram, a scenario button and a player. If you do not:

Symptom	Check
`<Diagram name="x"> does not match a diagram`	The folder name differs. The error lists the names that exist.
The page says “Loading diagram…” and nothing appears	A browser console error. Is `react()` from `@astrojs/react` in `astro.config.mjs`?
The page is narrow and the diagram tiny	Add `@packagelab/docspp-astro/starlight.css` to Starlight’s `customCss`.
Edits to a diagram do not show	Save the file again. If you upgraded docspp, restart the dev server.

Errors and warnings covers what docspp check reports.