Svelte

The viewer and the editor each fill an element you give them. In Svelte, that's an element in your component, bound with bind:this, and the viewer is created in it once the component has mounted.

Install

Viewer

npm install @docmentis/udoc-viewer

Editor

npm install @docmentis/udoc-editor

The component

Viewer

<script lang="ts">
    import { onMount } from "svelte";
    import { UDocViewer } from "@docmentis/udoc-viewer";

    /** A viewer filling its element, opening `src`. */
    let { src }: { src: string } = $props();
    let container: HTMLDivElement;

    onMount(() => {
        let viewer: UDocViewer | undefined;
        // Unmounted before `create` resolves, the component destroys the viewer it made.
        let gone = false;
        UDocViewer.create(container)
            .then(async (created) => {
                if (gone) return created.destroy();
                viewer = created;
                await viewer.open(src);
            })
            .catch((error: unknown) => console.error("The viewer didn't open the document:", error));
        return () => {
            gone = true;
            viewer?.destroy();
        };
    });
</script>

<div bind:this={container} class="pane"></div>

Editor

<script lang="ts">
    import { onMount } from "svelte";
    import { UDocEditor } from "@docmentis/udoc-editor";

    /** An editor filling its element, opening `src`. */
    let { src }: { src: string } = $props();
    let container: HTMLDivElement;

    onMount(() => {
        let editor: UDocEditor | undefined;
        // Unmounted before `create` resolves, the component destroys the editor it made.
        let gone = false;
        UDocEditor.create(container)
            .then(async (created) => {
                if (gone) return created.destroy();
                editor = created;
                await editor.open(src);
            })
            .catch((error: unknown) => console.error("The editor didn't open the document:", error));
        return () => {
            gone = true;
            editor?.destroy();
        };
    });
</script>

<div bind:this={container} class="pane"></div>

• onMount creates the viewer once its element is on the page. The function it returns runs when the component is removed, and destroys the viewer.
• create is asynchronous, so the component can be removed before it resolves. gone records that, and the viewer created after it is destroyed at once.
• The viewer opens the src the component mounted with. To open each new src in it, keep the viewer where an $effect can reach it, and call its open there.

Use it

The viewer fills its element, so give the element a height, here through its pane class:

<DocumentViewer src="/report.pdf" />

.pane {
    height: 100vh;
}

The engine's files

Vite puts the engine's binary and fonts beside your app as it builds it, so there's nothing to set up. Quick start says where else they can come from.

The example

examples/svelte-vite shows the viewer and the editor side by side in a Svelte 5 app built with Vite.