Extend UI Svelte

Docs / Editors / DOCX Editor

DOCX Editor

Svelte 5 port of the Extend UI docx-editor: a native contenteditable surface with a word-style toolbar. The source document loads through the docx engine wrapper (docx-preview) and exports back to .docx bytes with jszip.

Upload a DOCX to edit

Pass a DOCX URL with the src prop or upload a file.

Differences from upstream

  • Upstream exports only DocxEditorPreview; every upstream export is available here.
  • Exported as both DocxEditor and the upstream name DocxEditorPreview; className and class are both accepted.
  • Editing is a native contenteditable surface instead of the @extend-ai/react-docx editor (React-only). The toolbar is reduced to bold, italic, headings, bulleted and numbered lists, zoom, upload, export, and the theme switch. Undo/redo buttons, fonts, color, highlight, links, alignment, borders, images, tables, tracked changes, comments, the read-only toggle, and the page thumbnail rail are not ported.
  • The whole document is one editable surface: pages are not split out or virtualized, and there is no "Page N of M" indicator. Uploads accept .docx only, like upstream.
  • Export is lossy: it rebuilds a minimal .docx from paragraphs, headings, lists, and bold/italic runs. Tables, images, styles, headers, and footers from the source are dropped.
  • Port additions: showToolbar, readOnly, and onExport (called with the exported bytes).

Back to all components