Embeddable SDK · React, Angular, or neither
BroadPaper is an embeddable visual report designer for web applications. Your users lay out their own branded documents against the data fields you declare; your product keeps ownership of the data, the rendering and the release schedule.
It starts well. One document, written in code, by the person who owns the data. It works, it ships, it is fine for a year.
Then a customer asks for their logo in the other corner. Another wants an extra column. A third wants the summary before the table rather than after it, and the fourth has a legal department with opinions about a footer. Each one is twenty minutes. Each one is also a branch, a review, a release and a regression test on a document you cannot easily test.
A year later there is a folder of near-identical templates with customer names in them, a conditional that nobody can safely delete, and a standing item in every sprint called “report changes”. The layout has quietly become application state, and it is the only state in your product you cannot change without a deployment.
These are three different answers to “who is allowed to change this document”, and most teams try them in this order. Knowing which one you actually need is worth more than any feature comparison.
A
jsPDF, react-pdf, pdfmake, HTML and Puppeteer. The document is source code: components, coordinates or a definition object, compiled and deployed with everything else.
B
Handlebars, Liquid or a hand-rolled HTML template per customer, stored in the database and filled at render time. Technically data, practically still code.
C
The layout becomes a document your users edit visually, bound to fields you declared. It is stored as JSON, validated on the way in, and rendered by an engine that owns pagination.
The three are not exclusive and most products end up with two of them. A statutory document whose layout is prescribed by law belongs in code, where a reviewer can see it change; the fifteen customer-facing documents beside it do not.
A designer your customers can reach is a surface on your application. Five things have to be true before that is a good idea, and they are the five things that took the longest to build.
The designer's palette is your schema — typed fields with the labels you gave them. There is no query builder, no table names, no joins and no way to address anything you did not describe. A template references fields by path and is inert until your code hands it data.
Users can write expressions; those expressions are parsed by a hand-written tokeniser and Pratt parser and
evaluated by a tree-walking interpreter. No eval, no Function, no compilation to
JavaScript. Property access reads own data properties only, so __proto__ and
constructor resolve to nothing.
Rich text is a structured model — paragraphs, marks, tokens — never markup. Rendering builds DOM from that
model with text nodes and attribute setters; pasting accepts plain text. A customer cannot smuggle a
<script> into a document another customer opens.
validateTemplate answers, without any data at all, whether every binding still matches your
schema — so a design saved against last quarter's fields is a 422 at your API rather than a blank space on
somebody's invoice. migrateTemplate brings older saves forward on load.
No SaaS component, no vendor telemetry, no licence check that phones home. Licences are signed certificates verified offline. The SDK makes no network request of its own; the ones you can configure are a font URL, an asset URL and your own render service, and the security guide lists all three.
Feature flags narrow the editor to the audience. An operations manager does not need the expression editor, the raw JSON or page-margin controls; a power user at an enterprise customer might want all three. Same component, different flags.
Once it is licensed there is nothing of BroadPaper in the documents your customers send, and nothing of BroadPaper on screen unless you want it there. The editor takes your appearance; the documents take the tenant's.
// The same designer, narrowed for an audience who did not ask to meet a
// document object model. Everything here is a flag, not a build.
<ReportDesigner
dataSources={dataSources} // the only fields that exist, as far as they know
theme={tenant.theme} // their colours, their fonts, their logo
themes={[tenant.theme]} // one brand in the switcher: theirs
features={{
whiteLabel: true, // no BroadPaper mark in the toolbar
expressions: false, // no free-form expression editor
jsonView: false, // no raw template
pageSettings: false, // page size and margins are yours to decide
customBlocks: true // but your own blocks stay in the palette
}}
appearance="system"
onSave={(template) => api.saveTemplate(tenant.id, template)}
/>
The Angular component takes the same options as inputs. Both wrap one framework-free
createReportDesigner(element, options), which is also what you would call from Vue, Svelte or
nothing at all.
<ReportDesigner /> with props mirroring the options object, and a ref carrying the whole imperative API.
Standalone components that run outside the zone, with outputs for every event and an imperative handle from (ready).
createReportDesigner(element, options) returns an instance with a destroy(). That is the whole integration surface.
If you are not already maintaining layouts on other people's behalf, an embedded designer is a dependency you do not need yet. Come back when the third customer asks.
features: { whiteLabel: true } removes the BroadPaper mark from the toolbar, the editor takes your own accent colour and appearance, and the documents it produces carry nothing of ours once the SDK is licensed. Nothing in the product phones home or announces itself to your users.@broadpaper/server as a container with a queue and a bearer token — and a .NET client calls that service when the back end is C#. The page breaks are decided before any of them draws a page, so the choice is about deployment rather than fidelity.Everything works without a licence — every block, both PDF backends, unlimited documents. The only difference is an evaluation mark on the output, and there is no trial clock.