Svelte

Svelte 5 (SvelteKit or Vite). Install the packages, copy the fonts into static/ or public/, and bind the element.

npm install ./vendor/rd-designer-1.0.0.tgz ./vendor/rd-core-1.0.0.tgz ./vendor/rd-fonts-1.0.0.tgz
npm install ./vendor/rd-fonts-cjk-1.0.0.tgz   # optional: Chinese, Japanese, Korean

A wrapper component#

Svelte works with custom elements directly. Set the objects in an $effect and listen with addEventListener:

<script lang="ts">
    import '@rd/designer';
    import type { ReportDesigner, Template, TemplateChangeDetail } from '@rd/designer';

    let { template = $bindable(null), schema = null, onsave }: {
        template?: Template | null;
        schema?: object | null;
        onsave?: (t: Template) => void;
    } = $props();

    let el: ReportDesigner;

    $effect(() => { el.template = template; });
    $effect(() => { el.schema = schema; });
    $effect(() => {
        const change = (e: Event) => (template = (e as CustomEvent<TemplateChangeDetail>).detail.template);
        const save = (e: Event) => onsave?.((e as CustomEvent<TemplateChangeDetail>).detail.template);
        el.addEventListener('template-change', change);
        el.addEventListener('save', save);
        return () => {
            el.removeEventListener('template-change', change);
            el.removeEventListener('save', save);
        };
    });
</script>

<report-designer bind:this={el} font-base-url="/rd-fonts/" style="display: block; height: 100%"></report-designer>

Copy the fonts#

Copy the contents of node_modules/@rd/fonts/fonts/ and, if installed, node_modules/@rd/fonts-cjk/fonts/ into one folder: static/rd-fonts/ (SvelteKit) or public/rd-fonts/ (Vite).