Word documents

Render paginated DOCX files, track text selection, and apply edits through a Word editing session.

Open and render

TypeScript

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. The scrollable surface fits the widest page, including pages that are not currently mounted.

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.

Svelte

<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
    {selection}
    onselectionchange={(next) => selection = next}
    onedit={(edit) => {
      artifact = session.replaceText(edit.selection, edit.value);
      selection = { anchor: edit.caret, focus: edit.caret };
    }}
  />
</div>

Format a selection

Read the selection formatting state from the artifact and use WORD_FORMATTING_CAPABILITIES with FormattingToolbar. Applying a patch records an undoable session revision.

TypeScript

session.applyFormatting(selection, {
  text: { bold: { set: true }, fontSize: { set: 16 } }
});

session.undo();
session.redo();

Export the document

TypeScript

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.

Next Try the Word playground