Open and edit Word files

Open and render

import { openWordEditingSession } from '@tumblerjs/word';

const session = openWordEditingSession(bytes);
const document = session.artifact.document;

WordDocumentView renders a window of pages around the visible area. Its scale prop controls zoom. Use bind:scale to keep your zoom controls in sync with trackpad pinch, Ctrl+wheel, and two-finger touch gestures.

Gestures zoom between 25% and 300% around the pointer or touch midpoint. Each page centres within the viewer when it fits; wider pages remain horizontally scrollable.

Connect text edits

The view reports an edit containing the selection, replacement text, and resulting caret. Apply it to the session and pass its next document back to the view.

This minimal example uses single-paragraph edits; when inserting paragraph breaks, resolve the caret against the new paragraph list.

<script lang="ts">
  import { openWordEditingSession, type WordTextSelection } from '@tumblerjs/word';
  import { WordDocumentView } from '@tumblerjs/svelte';

  let { bytes }: { bytes: Uint8Array } = $props();
  const session = openWordEditingSession(bytes);
  let artifact = $state(session.artifact);
  let selection = $state<WordTextSelection>();
</script>

<div style="height: 640px; min-width: 0">
  <WordDocumentView
    wordDocument={artifact.document}
    editable
    ondrawingchange={(change) => artifact = session.updateDrawing(change)}
    {selection}
    onselectionchange={(next) => selection = next}
    onedit={(edit) => {
      artifact = session.replaceText(edit.selection, edit.value);
      selection = { anchor: edit.caret, focus: edit.caret };
    }}
  />
</div>

Browser input

Unsupported browser formatting and drag mutations are cancelled. Apply formatting through the host model controls. Replacement text and soft-line deletion use browser target ranges; browser undo and redo call oncommand. Non-cancellable input is reconciled against the model. Composition commits one replacement at composition end, while cancellation restores the original text. Native OS IME behavior still needs platform testing.

Export the document

const output = session.artifact.bytes();
// Persist or download output before marking the revision saved.
session.markSaved();

Internal bookmark links are handled by the viewer. External links are passed to onhyperlink; validate the target protocol before opening it.