The interactive demo
Two starting points — a finished investment review and a blank page — three brands, a custom block, and a PDF rendered by the engine in your own tab. Nothing is uploaded anywhere.
Embeddable report designer · React & Angular
Your users design the report. You ship the PDF.
BroadPaper drops a visual report designer into your product. You declare the data; your users lay out the document; BroadPaper handles layout, branding, pagination and a print-perfect PDF, rendered in the browser with @broadpaper/forme — no server required.
pnpm add @broadpaper/react @broadpaper/core @broadpaper/blocks @broadpaper/forme
§ 01What it is
A report designer that lives inside your product, not beside it.
Every serious business application ends up needing customer-facing documents: reviews, statements, factsheets, certificates, invoices. Every team ends up building a report designer for them, badly, twice. BroadPaper is the one you were going to build anyway, finished.
- 01
You declare the data
Describe your data sources with a typed schema, hand over sample data, and mount the designer in a
div. About thirty lines. - 02
Your users design the document
Drag blocks, bind fields, set conditions, pick a brand. They see real data on real pages as they work, and they cannot break the grid.
- 03
BroadPaper produces the file
A saved template is JSON you keep. Render it with live data to a vector PDF, in the browser, in Node, or behind the render service.
§ 02A closer look
Blocks, not a canvas.
Page, section, row, column, block. The structure is what makes the output predictable: a heading cannot be nudged three pixels off its grid, and a table always knows which column it is in. The palette is searchable, the properties panel is declarative, and every bound field is a chip you can read. A new document starts empty, with your schemas already on the left.
Your schema is the palette.
You declare data sources with a typed schema; the designer shows them as a tree. Drag a scalar onto the page and it becomes a field. Drag a list and it becomes a table. Type two braces in any text block and the expression autocomplete offers your fields, with types checked against the schema as you type.
Read about bindings in the docs.
One template. Any brand.
A template can name theme tokens instead of fixed colours and fonts, and a theme resolves them. Built that way, the same JSON renders as Meridian Wealth or as Hartwell & Kane with one option changed, which is how a white-label product serves every customer from one design.
Read about themes in the docs.
A vector PDF, rendered in the browser.
Selectable text, vector charts, the fonts you supply embedded, repeated table headers. The WebAssembly engine draws it in the user's own browser; the same engine runs in Node, or behind the render service. Nothing leaves your infrastructure unless you send it.
Download the four-page example PDF the demo produces.
§ 03The idea underneath
What you see is what breaks.
Browsers paginate for printing inconsistently and invisibly. PDF libraries paginate their own way. Either way, the page break your user sees on screen is a guess about the one in the file.
BroadPaper refuses to let either of them decide. A section is measured once as a continuous galley, a pure paginator assigns clip windows to pages, and both the canvas and the PDF engine are handed pages that are already decided. Point preview at the same measurer as the PDF, with the theme's fonts embedded, and a break on screen is a break in the file.
One galley, measured once
cut 1
cut 2
3 pages, already decided
§ 04Specification
Everything a commercial report designer needs. Nothing it doesn't.
Twelve things it does, and the reason each one is hard. The documentation is where the detail lives.
- 01
Structured document model
Page, section, row, column, block. A tree your users cannot break, not a canvas they can.
- 02
Pagination we own
Keep-together, orphans and widows, repeated table headers, running headers with page numbers.
- 03
What you see is what breaks
Point preview at the engine that draws the file, with the theme's fonts embedded, and a break on screen is a break in the PDF.
- 04
One template, any brand
Templates can refer to theme tokens instead of fixed colours, so a design built on tokens re-brands with one option.
- 05
Browserless vector PDF
A WebAssembly engine draws selectable text and vector charts in Node or in the browser.
- 06
Bindings with a type system
A hand-written expression language. No eval, checked against your schemas, with autocomplete.
- 07
Tables, repeaters, charts
Sorting, limits, conditional formatting, headers that repeat. Charts interactive on screen, identical in print.
- 08
Custom blocks, first class
A declarative inspector and a pure render function. Yours drag, bind, theme and print like ours.
- 09
Data stays yours
Schemas in, JSON out. Nothing is uploaded and the SDK makes no network calls of its own.
- 10
React, Angular, .NET
A framework-free core, thin wrappers, a render service behind HTTP and a .NET client for it, on .NET 8 and .NET 10.
- 11
Versioned and migratable
Saved templates carry a schema version and migrate forward. Today's report opens next year.
- 12
Safe by design
Structured rich text instead of HTML, URL validation, SSRF-guarded fetching, feature flags for tiering.
§ 05Integration
Thirty lines to a designer. One call to a PDF.
Declare a schema, hand over sample data, mount. The designer gives you back a template as JSON; the renderer turns a template and live data into a file.
- @broadpaper/react and @broadpaper/angular, thin wrappers over one mount API.
- @broadpaper/forme, the browserless PDF engine, in the browser or in Node.
- @broadpaper/server, either PDF backend behind HTTP with a queue, a token and a Dockerfile.
- BroadPaper.Client for .NET 8 and .NET 10, when the host is not JavaScript.
import { ReportDesigner } from "@broadpaper/react";
import { renderPdfPaginated } from "@broadpaper/forme";
const client = {
id: "client", label: "Client",
schema: {
fullName: { type: "string", label: "Full name" },
value: { type: "currency", label: "Portfolio value", currency: "GBP" },
holdings: { type: "array", label: "Holdings", itemSchema: holding }
}
};
export function Designer() {
return (
<ReportDesigner
dataSources={[client]}
sampleData={samples}
theme={meridian}
themes={[meridian, hartwell]}
onSave={(template) => api.save(template)}
/>
);
}
// Later, anywhere: the saved template plus live data → a vector PDF.
const { pdf } = await renderPdfPaginated({ template, data, theme: meridian, registry, dataSources });§ 06Client and server
Designed in a browser. Rendered wherever you like.
The designer hands you a template as JSON. That file is the whole contract: nothing in it depends on a browser, so the report a user designed on Monday is a nightly batch on Tuesday and an API endpoint on Wednesday. Same template, same paginator, same engine — the page breaks do not move.
import { renderPdfPaginated } from "@broadpaper/forme";
import { createRegistry } from "@broadpaper/blocks";
// The JSON the designer saved, straight out of your database.
const template = await db.loadTemplate(id);
const data = await db.loadClient(clientId);
const { pdf, pages } = await renderPdfPaginated({
template, data, theme, dataSources,
registry: createRegistry(),
now: asAt, // byte-identical output
locale: "en-GB", currency: "GBP"
});var result = await broadpaper.RenderAsync(new RenderRequest
{
// The same JSON, from the same table.
Template = JsonNode.Parse(review.TemplateJson),
Data = RenderRequest.ToNode(review.Data),
Now = review.AsAt,
Locale = "en-GB",
Currency = "GBP"
}, ct);
return File(result.Pdf, "application/pdf");- No browser on the server. The engine is Rust compiled to WebAssembly — about 7 MB, no Chromium to install, patch or keep alive. It runs in Node and in the tab.
- .NET talks to the same engine. BroadPaper.Client targets .NET 8 and .NET 10 and calls the render service over its HTTP API — behind your own TLS — so a C# application produces these files with no JavaScript runtime and no native PDF library on the box.
- Or no file at all. The same saved template renders as a read-only web page with charts a reader can point at — the half of the product a PDF cannot do.
Rendering on a server → The .NET client → The read-only viewer →
§ 07Examples
Three places to see it working.
The demo runs in this browser with no account. The sample application is a real host outside this repository, installing the packages the way you would. The documentation is where the detail lives. And if you are weighing it against react-pdf, pdfmake, Puppeteer or another report designer, here is how it compares — including when it is the wrong choice.
The sample application
One .NET back end with an Angular front end and a React front end beside it, both mounting the designer and the read-only viewer. It consumes the published packages from a real host build, which is the part a monorepo cannot prove.
The guides
Quick start, the document model, custom blocks, theming, server rendering, the render service, the .NET client and the read-only viewer. The worked examples in the quick start and the React, Angular, server and viewer guides are compiled and type-checked against the packages.
Try it. No account, no upload.
A finished report, a blank page, three brands, a custom block, and a PDF rendered in your own browser.
Not building software?
There is a hosted version of this.
BroadPaper Cloud is the same engine as a finished product: bring in a spreadsheet, pick a design, download the document. For the operations team who wants the reports rather than the report designer.