Viewer quickstart

Install the public Viewer, host its assets, and open a local document.

Install

npm install @docviewkit/viewer

The package is designed for customer-hosted static assets. Do not load production Worker or Wasm files from an unpinned public CDN.

Mount the Web Component

html

<script type="module">
  import '@docviewkit/viewer';
</script>

<docviewkit-viewer id="document-viewer"></docviewkit-viewer>

const viewer = document.querySelector('#document-viewer');
const file = document.querySelector('input[type=file]').files[0];

try {
  await viewer.open(file);
} catch (error) {
  if (error.code !== 'PDF_PASSWORD_REQUIRED') throw error;
  await viewer.open(file, { password: await requestPassword() });
}

How do I preview an authenticated OA attachment?

Fetch it through your own authorized attachment endpoint, then pass a File or document bytes to open(). The example endpoint belongs to your application, not DocViewKit. Preserve the actual filename, especially for WPS formats; replace report.docx with the attachment metadata from your server. Cross-origin requests still require a deliberate credentials and CORS policy.

// Your server must verify that the current user may read this attachment.
const response = await fetch('/api/attachments/42/content', {
  credentials: 'same-origin',
});
if (!response.ok) throw new Error(`Attachment request failed: ${response.status}`);
const attachment = new File([await response.blob()], 'report.docx');
await viewer.open(attachment);

Mount the component first and host the version-matched Worker, Wasm, font, and codec assets with your application. Configure optional format packs before opening those formats. A small integration snippet is not a substitute for deployment and authorization.

Open source usage

Viewer and Engine use Apache-2.0. No runtime license is required for production use, UI customization, minimal mode or watermarks. Preserve the included license, notices and third-party licenses. Optional paid service scope and response times are agreed separately.