Embedding
Quick start
Copy report-designer.js, report-designer.css and the fonts/ folder into your static assets, keeping fonts/ beside the stylesheet, then mount the designer into an element that has a height. The designer fills its root with a toolbar, a palette, the canvas, an inspector and a status bar.
<link rel="stylesheet" href="/assets/report-designer.css">
<div id="designer" style="display: flex; height: 80vh;"></div>
<script src="/assets/report-designer.js"></script>
<script>
const designer = ErdReportDesigner.mountReportDesigner({
root: document.getElementById('designer'),
});
// Later, when the user saves:
const templateJson = designer.documentJson();
</script>Mount options
| Option | Meaning |
|---|---|
| root | Required. The element whose content is replaced by the designer. |
| template | The parsed template object to open. A starter report opens when absent. |
| prefersDark | Start in dark mode. Afterwards the designer follows data-theme on the html element. |
| theme | Colour overrides for the canvas, separate for light and dark. |
| composition | Which tools to show, for example report mode or label mode. |
| pickAsset | Called when the user adds an image asset; returns the file as a data URI. |
| fonts | The font families your renderer can resolve, offered in the inspector. |
What your application keeps
The designer owns the template: reading it, writing it, migrating it and reporting what is wrong with it. Your application owns everything the template touches: who may open it, where it is stored, which fonts and assets exist, what the sample data looks like and how the surrounding page is laid out and themed.
Hiding a tool hides a tool. It does not remove an element kind from the template contract, and a template that already contains one still renders.
Browser support
Evergreen Chromium, Firefox and Safari. The script targets ES2020 and needs Canvas 2D, ResizeObserver and MutationObserver. It defines one global, ErdReportDesigner, and touches nothing else on the page.
Serve the script from your own origin. It has no CORS or cookie requirements. Load it with a version query string and a long cache lifetime, and update the script and the stylesheet together.
Frequently asked questions
Does the designer render PDFs in the browser?
No. The browser script designs templates. Rendering happens on your server through the ERD Report Cloud render API.
What does the designer cost?
The designer is for embedding in your website and is not charged for separately. Rendering uses ERD Report Cloud, which needs an API key: contact ERDesigns for a plan and a key.
Do I get the renderer?
For trials and small-scale use, the renderer is hosted by ERDesigns and is not distributed. Your server sends templates and data to ERD-Report Cloud and receives the finished document. On-premise and private cloud deployments may be available for selected use cases. Contact ERDesigns to discuss your requirements.
Can i get a free trial for ERD-Report Cloud?
Yes! Contact ERDesigns to request a free trial and explore what ERD-Report Cloud can do for your application.
Do I need a framework or a bundler?
No. The designer is one classic script and one stylesheet with no dependencies. Applications with a bundler or written in TypeScript can use the package build instead.
Can I restyle the designer?
Yes. The chrome is restyled through CSS variables, the canvas through colour tokens for light and dark mode, and the composition option hides the tools you do not want to offer.
Where are templates stored?
In your application. The designer returns the template as JSON and imposes no storage backend.
Which browsers are supported?
Evergreen Chromium, Firefox and Safari.
Can the designer design labels?
Yes. A template carries a target of paper or label. A label targets ZPL, TSPL, EPL2 or DYMO with the label stock and print head density, and the same embedding mounts as a label designer.