⚠️ Design system CSS not found. Check the path in docs/docs.config.js → designSystemPath, then re-run npm run docgen.

Upgrading docs

How to update the doc site across projects

Admin / Upgrading docs

Claude: Treat this document as authoritative.

The doc site is split into two parts: content (your markdown files) and the engine (the docs-kit generator that turns them into HTML). The engine ships inside the @bydefaultstudio/design-system npm package and runs in place from node_modules - it is never copied into the project. Upgrading the engine means upgrading the package.


What stays per-project (never touch these)

File/Folder What it controls
docs/*.md All documentation content
docs/docs.config.js Base path, brand CSS path, footer text, index description
docs/site/assets/icons/ Docs favicons (favicon.svg, favicon.ico)

How to upgrade

The docs-kit has no version of its own - it is versioned by the design system package. To upgrade:

npm update @bydefaultstudio/design-system
npm run docs:build

Dependabot also opens a PR whenever a new package version publishes; merging it and rebuilding the docs is the same upgrade.


Customising a project's doc site

Edit docs/docs.config.js in the project. All paths are project-root-relative:

module.exports = {
  // The docs site is served at this subpath of the main site
  // ('' if the output is served as its own site root)
  basePath: '/docs/site',

  // Optional extra brand stylesheet, copied into the output and
  // linked after the framework CSS
  brandCssPath: 'assets/css/theme.css',

  // Footer copyright text
  footerText: '© 2025 Your Studio Name',

  // Description shown on the docs homepage
  indexDescription: 'Documentation for Project Name.',
};

The full configuration reference lives in the docs-kit README inside the package: node_modules/@bydefaultstudio/design-system/dist/docs-kit/README.md.

Favicons are optional: drop favicon.svg and/or favicon.ico into docs/site/assets/icons/ and rebuild - pages link them once the files exist.


Design system CSS convention

With no designSystemPath configured (this template's setup), the generator uses the packaged design-system.css and copies it into the output automatically - the docs are always styled by the same framework version the project installs. The brand stylesheet configured in brandCssPath is copied into the output and linked after it.

If the docs look unstyled, run npm install at the repo root (a fresh clone has no node_modules until then), then npm run docs:build.


Doc generator commands

Run these from the repo root:

npm run docs:build # Generate HTML from markdown
npm run docs:watch # Auto-regenerate on markdown changes

When to update the template first

Engine improvements happen in the design-system repo (the docs-kit ships with the package). Template-side, the only thing to keep current is the package version - Dependabot handles that. Improve project docs content here; improve the engine upstream.

On this page
  • What stays per-project (never touch these)
  • How to upgrade
  • Customising a project's doc site
  • Design system CSS convention
  • Doc generator commands
  • When to update the template first
Previous

Folders

© 2026 By Default