Web SDKv1.0.0

Recipes

Complete, working patterns taken from production integrations. Each one is a few files you can copy, with the reasoning beside the code.
Own the download: export, upload to S3, hand back a linkHide or take over the SDK's own Download, export the edited document through viewer.createExporter(), upload it to your bucket through a presigned URL, then give the person a link from your backend.Most requested · 3 steps →Bring your own chromeRender no toolbar and no navigation bar, keep the SDK's pages, panels and per-tool option bars, and drive the tools from buttons of your own through the viewer API.Common · 3 steps →Serve the engine from your own originUnder a license that includes self-hosting, fetch the engine, the shaping and subsetting binaries and the bundled fonts once by their digests, serve them from your own servers, and point Kernstra.init() and the viewer at them. The browser then makes no request outside your origin.Deployment · 4 steps →Next.js, Nuxt, SvelteKit and Astro: mount on the client, tear down cleanlyThe package imports cleanly on the server, but a viewer is browser-only. Render the component on the client alone, keep init() in one module, and release both the viewer and the document on unmount.Frameworks · 6 steps →Hand a large file between pages without a serverStore the picked file's bytes in IndexedDB on the upload page, navigate, and open them with PDFDocument.fromBytes() on the editor page. Nothing is uploaded until the person saves.Loading · 4 steps →Unsaved changes done rightLet the viewer track whether the document differs from what it was opened from or last saved, warn before the tab closes only when it matters, and tell the viewer when a save of your own succeeded.Common · 3 steps →Match your brand with tokensSet the accent once through config for the common case, follow the OS or switch themes live from your own toggle, or override the semantic tokens when your design system wants control of every surface.Appearance · 6 steps →Phones and touch, without fighting the browserMeet the two host-side requirements the SDK cannot do for you, pick a phone and tablet composition, open at the right zoom, and keep pinch, the form stepper and the touch sizes the SDK provides.Mobile · 4 steps →React to the viewer with events, not timersEverything your interface needs to mirror is announced. Subscribe once, keep the unsubscribe or an AbortSignal, and drop the polling loop.Basics · 3 steps →