Without a framework

The viewer and the editor work with no framework: create them in an element, and destroy them when you're done. How you load the packages depends on how you build your page.

With Vite

Vite needs no setup: it bundles the packages and puts the engine's binary and fonts beside your app.

import { UDocEditor } from "@docmentis/udoc-editor";
import { UDocViewer } from "@docmentis/udoc-viewer";
import "./style.css";

UDocViewer.create(document.getElementById("viewer")!)
    .then((viewer) => viewer.open("/sample.pdf"))
    .catch((error: unknown) => console.error("The viewer didn't open the document:", error));

UDocEditor.create(document.getElementById("editor")!)
    .then((editor) => editor.open("/sample.docx"))
    .catch((error: unknown) => console.error("The editor didn't open the document:", error));

The viewer fills its element, so give the element a height.

With webpack

webpack 5 puts the engine's binary beside your app too. The binary is far larger than webpack's size hints allow, so turn them off, or webpack warns about it on every build:

import CopyPlugin from "copy-webpack-plugin";
import HtmlWebpackPlugin from "html-webpack-plugin";

export default {
    entry: "./src/main.ts",
    module: {
        rules: [{ test: /\.ts$/, use: "ts-loader", exclude: /node_modules/ }],
    },
    resolve: { extensions: [".ts", ".js"] },
    output: { clean: true },
    plugins: [
        new HtmlWebpackPlugin({ template: "src/index.html" }),
        new CopyPlugin({ patterns: [{ from: "public" }] }),
    ],
    // The engine's binary, which webpack emits from its `new URL(…, import.meta.url)`,
    // is far over webpack's size hints.
    performance: { hints: false },
};

With no build step

The packages are plain ES modules, so a page with no build step can load them from jsDelivr through an import map:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>docMentis udoc without a bundler</title>
        <!-- The packages are plain ES modules, so a page with no build step maps
             them to a CDN. Keep the versions in step: udoc-ui at the viewer's and
             the editor's version, and udoc-wasm at the version udoc-ui depends on. -->
        <script type="importmap">
            {
                "imports": {
                    "@docmentis/udoc-viewer": "https://cdn.jsdelivr.net/npm/@docmentis/udoc-viewer@0.8.12/dist/index.js",
                    "@docmentis/udoc-editor": "https://cdn.jsdelivr.net/npm/@docmentis/udoc-editor@0.8.12/dist/index.js",
                    "@docmentis/udoc-ui": "https://cdn.jsdelivr.net/npm/@docmentis/udoc-ui@0.8.12/dist/index.js",
                    "@docmentis/udoc-ui/internal": "https://cdn.jsdelivr.net/npm/@docmentis/udoc-ui@0.8.12/dist/internal.js",
                    "@docmentis/udoc-wasm/error": "https://cdn.jsdelivr.net/npm/@docmentis/udoc-wasm@0.8.15/dist/error.js",
                    "@docmentis/udoc-wasm/font-fulfill": "https://cdn.jsdelivr.net/npm/@docmentis/udoc-wasm@0.8.15/dist/font-fulfill.js",
                    "@docmentis/udoc-wasm/meta-url": "https://cdn.jsdelivr.net/npm/@docmentis/udoc-wasm@0.8.15/dist/meta-url.js"
                }
            }
        </script>
        <style>
            html,
            body {
                margin: 0;
                height: 100%;
            }

            /* The viewer and the editor side by side, each filling its half. A
               viewer fills the element it is given, so the element needs a height. */
            .panes {
                display: grid;
                grid-template-columns: 1fr 1fr;
                height: 100vh;
            }

            .pane {
                min-width: 0;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <main class="panes">
            <div id="viewer" class="pane"></div>
            <div id="editor" class="pane"></div>
        </main>
        <script type="module">
            import { UDocEditor } from "@docmentis/udoc-editor";
            import { UDocViewer } from "@docmentis/udoc-viewer";

            UDocViewer.create(document.getElementById("viewer"))
                .then((viewer) => viewer.open("sample.pdf"))
                .catch((error) => console.error("The viewer didn't open the document:", error));

            UDocEditor.create(document.getElementById("editor"))
                .then((editor) => editor.open("sample.docx"))
                .catch((error) => console.error("The editor didn't open the document:", error));
        </script>
    </body>
</html>

Keep the versions in the import map in step: @docmentis/udoc-ui at the viewer's and the editor's version, and @docmentis/udoc-wasm at the version that @docmentis/udoc-ui depends on. The engine's binary and fonts load from jsDelivr too.

The examples

examples/vanilla, examples/webpack and examples/no-bundler show the viewer and the editor side by side each of these ways.