Examples

Three example apps live in examples/ in the repo, each with its own README, and each runnable live in the Playground:

report-builder

Open in the playground →

The full designer — JSON data sources, a field explorer, 6 ready-made templates, page tabs (Template.pages — each tab its own design, one combined PDF with continuous numbering) — using the package's ready-made UI components (Button/Card/Input/PdfPreviewModal). The fastest path: use the components the library already ships.

custom-ui

Open in the playground →

The exact same features as report-builder, but the entire shell (header, sidebar, cards, field tree, modals) is hand-written plain CSS — zero Button/Card/Input/icon imported from the package. Proves <Designer> itself works with any design system, or none at all.

headless-designer

Open in the playground →

No <Designer> component at all. A hand-built canvas — its own drag/ resize logic (plain mousedown/mousemove/mouseup, no react-rnd) over generatePdf + types from json-pdf-designer/server, plus PdfPreview from the main entry. Proves the data model and PDF engine work standalone, independent of the drag/drop editor — the same idea a Node backend relies on (see Server-only usage and Backend integration), just running in the browser here for the demo.

Running locally

None of the three are npm workspaces — each points at the package via "json-pdf-designer": "file:../.." in its own package.json. From the repo root:

npm run build          # build the root package once, so dist/ exists
cd examples/report-builder   # or custom-ui, or headless-designer
npm install
npm run dev