Try the demo

Open the demo → No account, no install, nothing uploaded.

The demo opens on a choice of two starting points, because there are two questions people arrive with: what does a finished report look like, and what is it like starting from nothing.

Starting point	What it is
Client investment review	A finished six-section report: a cover, an adviser summary, KPIs, an area chart, a donut, two data tables, a repeater of recommendations and a signature block. Three sample clients, three brands, and a custom acme.risk-profile block registered by the host.
Blank page	Nothing on the canvas and the review's schemas to bind to. Where your own users start.

Each keeps its own draft in the browser, so you can leave one half-edited and come back to it. Reset restores the one you are looking at.

pnpm install
pnpm dev        # the designer, on http://localhost:5173
pnpm docs       # these docs, on http://localhost:5175

Nothing is uploaded and no key is needed. The PDF is rendered in your own browser by the WebAssembly engine — there is no server in the loop at all.

Design mode. Blue chips are bound fields; the panel on the right is the selected block.

Preview mode, with the editing furniture out of the way.

What to try

Try this	What it shows
Switch to Blank page	An empty document with the same schemas beside it: what your own users see on their first day.
Hover a bar, slice or point in Preview	Tooltips and highlighting on the chart. The SVG being pointed at is the one the PDF contains; nothing is drawn twice. See Charts.
Switch the brand in the toolbar	One template, three identities. Nothing in the document names a colour or a font.
Switch the sample client	Conditional blocks appear and disappear; the "Edge case" client exercises missing data.
Click Checks	Two separate answers: whether the template is sound, and what this data does to it.
Drag a field from Data onto the page	Scalars become a field block, lists become a table.
Type {{ inside a text block	The binding autocomplete, over your own schema.
Preview → Export	A four-page PDF, rendered in the browser.
Add ?measure=dom to the URL	Switches the canvas back to measuring with the browser, so you can see the difference between the two measurers.

The example output

Download the example PDF the demo produces (Meridian Wealth brand, balanced client). Four pages, selectable text, vector charts, a repeated table header on the holdings table.

Page 1 — cover, summary, performance.

Page 2 — allocation, holdings, attitude to risk.

Where the demo's code lives

File	What it is
apps/demo/src/data/schema.ts	The host's data contract — the DataSource[] the designer is given.
apps/demo/src/data/samples.ts	Three sample clients. Every figure is derived from the holdings, so the report cannot contradict itself.
apps/demo/src/data/template.ts	The investment review template, built with createNode/createSection.
apps/demo/src/data/scenarios.ts	The two starting points. A scenario is schemas, sample data and template together — changing the template without the schemas would leave every binding pointing at a field that no longer exists.
apps/demo/src/brands/themes.ts	Three themes.
apps/demo/src/blocks/risk-profile.ts	A custom block, registered the way yours would be.
apps/demo/src/pdf-export.ts	Browser-side PDF export.