A workbench for HTML and CSS design systems, and a successor to Pattern Lab. Write components as Handlebars templates with SCSS, data and Markdown docs; Pattern Dump shows them live, checks them, maps how they relate, and publishes the result as a static site.
Demo: a style guide and the website built from it, at https://lab.n8d.studio/pattern-dump-demo/
0.x. Pattern Dump works end to end, but breaking changes are possible between minor versions (0.3 to 0.4); the changelog names each one.
Coming from Pattern Lab? Point patternsDir at your patterns folder: Handlebars templates, .json data and
~ variants work as they are, and no build step of your own is needed.
- Live workbench. Every component and variant in a live preview, with themes, viewport sizes, colour-vision simulation and reload on save for templates, data, docs, styles, themes and scripts.
- Docs next to the code. Markdown docs with live examples and source that can't drift from the component, because they are rendered from it.
- Relationships. Which components each one uses and is used by, including CSS classes borrowed from other components.
- Checks. Render errors, schema mismatches, HTML validation and accessibility findings per component,
and a corpus-wide audit (
pd audit) with machine-readable output for CI. - Static publishing.
pd buildwrites the whole workbench as plain files for any static host. - Pattern packages. Use a design system from npm next to your own components.
- Your conventions. Components are found wherever their templates live; Pattern Lab-style
~variants and existing Handlebars helpers work.
Node.js 22.22 or later, and npm.
Pattern Dump is on npm. Create a project with it:
npx pattern-dump init my-design-system
cd my-design-system
npm run dev # → http://localhost:4000To try changes that are not released yet, build the package from this repository and create the project from the file:
git clone https://github.com/n8design/pattern-dump.git
cd pattern-dump
npm install
npm run pack:pd # → .pd-pack/pattern-dump-<version>.tgz
cd ..
TGZ="$PWD/pattern-dump/.pd-pack/pattern-dump-<version>.tgz"
npx --package="$TGZ" pd init my-design-system --pd-source "$TGZ"Day to day:
npm run dev # the workbench, with live reload
npm run audit # defects across every component
npx pd build # a static site in ./dist| Guide | |
|---|---|
| Getting started | Create a project, tour the workbench, add a component, audit and publish |
| Authoring components | Templates, variants, data, docs, ordering, styles, scripts and assets |
| Configuration | Every option in pattern-dump.config.ts |
| Themes | Writing and switching themes |
| Pattern packages | Using and publishing design systems as npm packages |
| Static build | pd build: options, hosting and troubleshooting |
| Storefront | A website written in markdown, with live examples, beside the workbench |
| Command line | Every pd command and option |
All documentation: docs/. See CONTRIBUTING.md for setup, the checks every change has to pass, and the rules the code base depends on. docs/development/architecture.md describes how the code is organised.
MIT © 2026 Stefan Bauer (N8D e.U.)