Plain HTML

No build step, no framework: load the standalone bundle with a <script type="module">. You can also load it straight from your render service at /sdk/latest/report-designer.js, which is what the Playground does.

Host the bundle#

Copy the SDK download's standalone/ folder (or node_modules/@rd/designer/dist/) to your web server as /rd/. The standalone bundle needs report-designer.js plus its siblings report-designer.worker.js (preview), report-designer.help.js (the built-in user guide) and report-designer.pdf.js / report-designer.pdf-worker.js (pdf.js, for Import PDF), and a fonts/ folder holding the contents of both font packages (@rd/fonts, and @rd/fonts-cjk for Chinese, Japanese and Korean). They are found next to the script, so no extra attributes are needed.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Template designer</title>
    <style>
        html, body { margin: 0; height: 100%; }
        report-designer { display: block; height: 100vh; }
    </style>
</head>
<body>
    <report-designer id="designer"></report-designer>
    <script type="module">
        import '/rd/report-designer.js';

        const designer = document.getElementById('designer');
        designer.template = await (await fetch('/api/templates/bol')).json();
        designer.addEventListener('save', async (event) => {
            await fetch('/api/templates/bol', {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(event.detail.template),
            });
        });
    </script>
</body>
</html>

Load it from your render service#

The render service serves the same standalone bundle, with its sibling files and fonts, at /sdk/<version>/ and /sdk/latest/. Your app can load the designer straight from there, with nothing to copy:

<script type="module"
        src="https://reports.internal.example.com/sdk/1.0.0/report-designer.js"
        integrity="sha384-…"
        crossorigin="anonymous"></script>

<report-designer font-base-url="https://reports.internal.example.com/sdk/1.0.0/fonts/"></report-designer>

• Pin a version (/sdk/1.0.0/) in production. Versioned files never change and are cached for a year. /sdk/latest/ always serves the installed version and is revalidated on every request. It suits development and the Playground.
• Subresource Integrity. GET /sdk/<version>/manifest.json lists every script file with its sha384-… integrity value (fonts under fonts/ are fetched, not run, and aren't listed). Put the value for report-designer.js in integrity, and keep crossorigin="anonymous".
• Cross-origin is allowed. SDK files are sent with Access-Control-Allow-Origin: * and Cross-Origin-Resource-Policy: cross-origin, so a page on another origin can load them (and the fonts). Allow the service's origin in your CSP script-src and connect-src.
• Set font-base-url to the service's /sdk/<version>/fonts/ when the page is on another origin.
• Preview on the main thread. Browsers only start Web Workers from the page's own origin, so a bundle loaded from another origin renders previews on the main thread (designer.renderInWorker is false). Everything else is the same. Serve the bundle from your own origin, or put the service behind the same origin (a reverse-proxy path such as /reportdesigner/), if previews of long documents must not block the page.
• GET /health reports the SDK the service provides: "sdk": { "version": "1.0.0", "url": "/sdk/1.0.0/", "latest": "/sdk/latest/" }.