Components

Try the Svelte components on their own. Each preview runs the source shown below it.

WordDocumentView

Paginated Word documents with text selection, scrolling, and pinch zoom.

Preview

Select text or pinch to zoom. For editing and drawing controls, open the Word playground.Open playground →

Loading sample…

Usage

Pass the original DOCX file as bytes: Uint8Array. Changes in this example stay in memory; Reset restores the sample.

Svelte

<script lang="ts">
  import { untrack } from 'svelte';
  import { openWordArtifact } from '@tumblerjs/word';
  import { WordDocumentView } from '@tumblerjs/svelte';

  let { bytes }: { bytes: Uint8Array } = $props();
  const artifact = untrack(() => openWordArtifact(bytes));
  let scale = $state(0.75);
</script>

<label>Zoom
  <select bind:value={scale}>
    <option value={0.5}>50%</option>
    <option value={0.75}>75%</option>
    <option value={1}>100%</option>
    <option value={1.5}>150%</option>
    {#if ![0.5, 0.75, 1, 1.5].includes(scale)}<option value={scale}>{Math.round(scale * 100)}%</option>{/if}
  </select>
</label>
<div class="document"><WordDocumentView wordDocument={artifact.document} bind:scale /></div>

<style>
  label { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
  .document { height: 420px; min-width: 0; }
</style>

Key props

Prop	Purpose
`wordDocument`	Parsed Word document from openWordArtifact(bytes).
`scale`	Bindable zoom factor. Pinch gestures update this value.
`editable`	Enables editing interactions when connected to edit callbacks.
`onedit / ondrawingchange`	Report edits for the host to apply to its artifact or editing session.

Integration guide