Installation

Add Tumbler to a Svelte 5 application. Parsing and editing run in the browser; your application owns loading and saving files.

Install the packages

Install the Svelte components and the format packages you need. All public Tumbler packages share one version. Keep them on the same release.

Terminal

bun add @tumblerjs/svelte @tumblerjs/word @tumblerjs/sheets @tumblerjs/core

Tumbler is early alpha. The latest distribution tag points to the current alpha release. APIs and format coverage are still changing.

Render a Word document

Open a file as a Uint8Array, then pass the parsed document to WordDocumentView. Give the viewer a constrained height so its pages can scroll.

Svelte

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

  let artifact = $state<WordArtifact>();
  let error = $state('');

  async function open(event: Event) {
    const input = event.currentTarget as HTMLInputElement;
    const file = input.files?.[0];
    if (!file) return;
    try {
      artifact = openWordArtifact(new Uint8Array(await file.arrayBuffer()));
      error = '';
    } catch {
      error = 'Could not open this document.';
    }
  }
</script>

<input type="file" accept=".docx" onchange={open} aria-label="Open Word document" />
{#if error}<p role="alert">{error}</p>{/if}
{#if artifact}
  <div style="height: 640px; min-width: 0">
    <WordDocumentView wordDocument={artifact.document} />
  </div>
{/if}

Use the model without Svelte

The document models do not depend on a UI framework. Use the Word or Sheets package directly when building another renderer, inspecting documents, or applying edits.

TypeScript

import { openSpreadsheetArtifact } from '@tumblerjs/sheets';

const artifact = openSpreadsheetArtifact(bytes);
const edited = artifact.editCell('B2', 42);
const output = edited.bytes();

Next Word documents