Web SDK · v1.0.0
Everything the SDK can do, and every switch that changes it.
The configuration reference covers every option with its type, default and an example. The SDK API reference covers every class, method and event, with the low-level document API for building your own interface.
Get startedFrom install to an open document in under a minute, with a line-by-line walkthrough.Quickstart → (opens in a new tab)Configuration171 options across 20 areas. Filter, deep-link, copy.Configuration reference →SDK API18 classes and namespaces, 155 members, with events and errors.API reference →
The whole integration
viewer.tsTypeScript
import { Kernstra, PDFDocument, PDFViewer } from '@kernstra/pdf-web-sdk'; // Once per page load: verifies the license and downloads the engine. await Kernstra.init({ license: import.meta.env.KERNSTRA_LICENSE }); const doc = await PDFDocument.fromUrl('/reports/q3-board-pack.pdf'); const viewer = new PDFViewer(document.getElementById('viewer')!, doc, { toolbar: { layout: 'bar' }, theme: { mode: 'auto', accentColor: '#2F6BFF' }, }); viewer.on('pageChanged', ({ pageIndex }) => console.log(pageIndex));
Configuration areas
InitializationSDKInitOptionsSDKMode and the resting toolToolsconfig.toolsToolbarconfig.toolbarNavigation barconfig.navigationSidebarconfig.sidebarLinksconfig.linksLayoutconfig.layoutThemeconfig.themeLocaleconfig.localeFormsconfig.formsExportconfig.exportPrintconfig.printConfirmationsconfig.confirmationsAnnotationsconfig.annotationsLoaderconfig.loaderAccessibilityconfig.accessibilityCallbacksconfig.callbacksPerformanceconfig.performanceFontsconfig.fonts
SDK API
KernstraKernstraPDFDocumentawait PDFDocument.fromUrl(url, options?) | fromFile(file, options?) | fromBytes(bytes, options?) | fromUrlProgressive(url, options?)PagesApidoc.pagesAnnotationsApidoc.annotationsFormsApidoc.formsTextApidoc.textSecurityApidoc.securityOutlineApidoc.outlineAttachmentsApidoc.attachmentsSignaturesApidoc.signaturesPDFViewernew PDFViewer(container, doc, config?)ToolsApiviewer.toolsEditTextToolApiviewer.tools.editTextPDFExporterviewer.createExporter(config?) (recommended) | new PDFExporter(document, config?)FontRegistrynew FontRegistry(fontsConfig?)SDKErrorcatch (err) { if (err instanceof SDKError) … }EventEmitterviewer.on() / Kernstra.events.on()Helpersimport { createDropZone, createPasswordPrompt, createLoadError, rectFromEdges, rectEdges, quadToRect, rectToQuad } from '@kernstra/pdf-web-sdk'Eventsviewer.on()ErrorsSDKError
Guides
Recipes9 production patterns: your own download and upload, your own chrome, self-hosting, unsaved changes and more.Open →Config builderFlip switches, watch the code and a preview update, copy the result.Open →Installation and supportRequirements, supported browsers and bundlers, loading the SDK lazily and the content security policy it needs.Read →LicensingThe license token, how it is checked on each load, what each feature unlocks and every license state.Read →Engine, binaries and fontsHow the engine, binaries and fonts reach the browser, what leaves it and what is stored, and self-hosting.Read →Quick start and the containerInitialize once, open a document, and mount a viewer in a container that has a height.Read →Document featuresOutline, links, attachments, comments, digital signatures, protected URLs, progressive loading and page boxes.Read →Theme tokensThe --ks-* tokens: semantic and component layers, light and dark values, and the stacking order.Read →What you can replaceWhat you can switch off or replace: the dialogs, saved signatures and stamps, and saving as the user works.Read →Web worker renderingRendering pages off the main thread: setup, when it falls back, and what it costs in memory.Read →Keyboard shortcutsEvery shortcut, by where the focus is, and keyboard access to the viewer.Read →Tool referenceWhat each tool does once it is active, from Add Text to Manage Pages.Read →Framework integrationsReact, Vue, Angular, Svelte, Next.js, Nuxt and SvelteKit, as components that mount and unmount cleanly.Read →