@stll/folio-react

A Word-document editor for the browser. It opens a real .docx, lets you edit it, and writes a real .docx back — preserving pagination, tables, headers and footers, tracked changes, and footnotes.

The React editor is one layer on top of @stll/folio-core, the headless OOXML parser, document model, and page-layout engine.

Part of stella, an open-source legal workspace.

Install

bun add @stll/folio-react react@^19.2.0 react-dom@^19.2.0 use-intl@^4.0.0 \
  prosemirror-commands@^1.7.1 prosemirror-dropcursor@^1.8.2 prosemirror-gapcursor@^1.4.1 prosemirror-history@^1.5.0 \
  prosemirror-inputrules@^1.5.0 prosemirror-keymap@^1.2.3 prosemirror-model@^1.25.9 prosemirror-state@^1.4.4 \
  prosemirror-tables@^1.8.5 prosemirror-transform@^1.12.0 prosemirror-view@^1.42.6 y-prosemirror@^1.3.7 \
  y-protocols@^1.0.6 yjs@^13.6.31

ProseMirror and Yjs packages are required peers, including the collaboration packages y-prosemirror and y-protocols. Install one compatible copy of each in the host application so schemas, plugins, editor states, and collaborative documents share the same runtime. The command above includes the complete editor peer closure.

@stll/folio-core is installed automatically as a dependency.

Usage

import { DocxEditor } from "@stll/folio-react";
import "@stll/folio-react/editor.css";

export function Editor({ docx }: { docx: ArrayBuffer }) {
  return <DocxEditor documentBuffer={docx} onSave={(out) => download(out)} />;
}

The editor renders to the DOM; under SSR, load it from a client-only/dynamic import.

Read-only review views

<DocxEditor
  documentBuffer={docx}
  readOnly
  reviewDisplayMode="final"
  showCommentHighlights={false}
/>

reviewDisplayMode accepts all-markup (the default), final (all pending changes accepted for display), or original (all pending changes rejected for display). It controls the displayed text, formatting, numbering, table rows, pagination and search. The controlled prop updates the view without reparsing. Omit it to let the editor's review selector control the view.

Projected views (final, original, and Simple Markup in the review selector) are read-only: typing and replacement are refused. Switch to all-markup to edit. ref.current.getReadOnlyReason() returns review-display-mode, host-read-only, viewing-mode, or null when editing is allowed. onReadonlyEditAttempt(reason) receives the exported EditorReadOnlyReason when a user attempts an edit.

showCommentHighlights defaults to true and independently hides comment highlights in all-markup. Highlights are always hidden in final and original. Neither prop changes the document, revisions or comments: saving or exporting DOCX preserves the same authored document in every view. The Vue DocxEditor exposes the same props. ReviewDisplayMode is exported by both adapters and folio-core; core's reviewDisplayModeToDisplayMode selects the existing markupView layout configuration (final uses no-markup).

Exports

| Import | What it is | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | @stll/folio-react | the React editor and its components | | @stll/folio-react/editor.css | the single bundled stylesheet — import once; it @imports the document fonts from @fontsource/* (installed as deps), so no external network requests |

For headless, framework-neutral use (OOXML parsing, the document model, the layout engine, DOCX ↔ Markdown), depend on @stll/folio-core directly.

Peer dependencies

react ^19.2 · react-dom ^19.2 · use-intl >=4, plus the ProseMirror and Yjs peers listed in the installation command above.

Keyboard shortcuts default to the editor root. Set keyboardShortcuts="document" only when this editor should own shortcuts across the host page.

Acknowledgements

folio began as a private fork of Eigenpal's docx-editor by Jedr Blaszyk. The code has since been extended (mostly to match the needs of stella). After the upstream repository was taken down, we're publishing folio in case the fork is useful to others as well. The original license and copyright are preserved in NOTICE.md.

License

Apache-2.0

See document search for highlighting, navigation, and result callbacks.