Browser editor and framework-neutral engine for OOXML .docx documents.
English · 简体中文 · Português (Brasil)
stella · npm · Issues · Discord
Browser editor and framework-neutral engine for .docx files. It opens, edits,
and writes OOXML documents while preserving pagination, tables, headers and
footers, tracked changes, and footnotes.
The core package is framework-neutral. React, Vue, Nuxt, and document-review packages build on top of it.
Part of stella, an open-source legal workspace.
See DOCX platform boundary for what belongs in folio and how editors, headless tools, agents, and hosts share one document model and operation contract.
Folio targets interoperable OOXML behavior through published standards, differential parsing, round-trip and interaction tests, and reproducible layout comparisons across independent implementations.
Comparison reports record the reference implementation, version, and relevant rendering environment so results remain explicit and reproducible.
See Interoperability references for the complete testing methodology and reference matrix.
This is a Bun workspace with these published packages:
| Package | Use it for |
|---|---|
@stll/folio-core | OOXML parsing, native Word redlining, document review, ProseMirror, and layout |
@stll/folio-react | A React editor UI built on @stll/folio-core |
@stll/folio-vue | A Vue 3 editor and composables |
@stll/folio-nuxt | Nuxt 3/4 registration for the Vue editor |
@stll/folio-agents | LLM tools for reading .docx files and proposing comments or tracked changes |
# the React editor (pulls in @stll/folio-core)
bun add @stll/folio-react react react-dom use-intl
# the Vue editor
bun add @stll/folio-vue vue
# Nuxt integration
bun add @stll/folio-nuxt
# agent/review tooling
bun add @stll/folio-agents
# or just the headless engine
bun add @stll/folio-coreimport{DocxEditor}from"@stll/folio-react";import"@stll/folio-react/standalone.css";exportfunctionEditor({ docx }: {docx: ArrayBuffer}){return<DocxEditordocumentBuffer={docx}onSave={(out)=>download(out)}/>;}In SSR apps, load the editor with a client-only or dynamic import.
Folio writes OOXML tracked changes that Microsoft Word can review, accept, or
reject. Apply explicit operations for deterministic edits, or compare two saved
versions to produce a redlined .docx:
import{FolioDocxReviewer}from"@stll/folio-core/server";import{generateRedlineDocx}from"@stll/folio-core/redline";constreviewer=awaitFolioDocxReviewer.fromBuffer(sourceDocx,{author: "Reviewer",});constblock=reviewer.snapshot().blocks.at(0);if(!block)thrownewError("The document has no editable blocks");constresult=reviewer.applyOperations([{id: "replace-term",type: "replaceInBlock",blockId: block.id,find: "Supplier",replace: "Provider",},]);if(result.skipped.length>0)thrownewError(JSON.stringify(result.skipped));constreviewedDocx=awaitreviewer.toBuffer();const{buffer: comparisonRedline}=awaitgenerateRedlineDocx(sourceDocx,reviewedDocx,{author: "Reviewer",});applyOperations defaults to native tracked changes. Use getChanges(),
acceptChange(), rejectChange(), acceptAll(), and rejectAll() to manage
pending revisions. The change census includes inline edits, formatting,
paragraph marks, and paragraph, section, table, row, and cell property changes.
For model-facing review tools, see
@stll/folio-agents.
Pick one stylesheet.
Use standalone.css when your app does not run Tailwind or you want folio's
styles isolated:
import"@stll/folio-react/standalone.css";Override tokens on .folio-root:
.folio-root {
--background:#fdfdfc;
--foreground:#1c1c1a;
--primary:#3b5bdb;
/* ...only the tokens you want to change... */
}For dark mode, add .dark to an ancestor such as <html>.
Use editor.css when your app already runs Tailwind. Add folio's distributed JS
to Tailwind's sources, then import the stylesheet:
/* your app's Tailwind entry */@import"tailwindcss";
@source"../node_modules/@stll/folio-react/dist/**/*.js";import"@stll/folio-react/editor.css";Do not import both stylesheets. standalone.css already includes everything in
editor.css.
The editor uses use-intl. Wrap it in an
IntlProvider and pass folio's bundled messages:
import{IntlProvider}from"use-intl";import{DocxEditor}from"@stll/folio-react";import{FOLIO_LOCALES,getFolioMessages}from"@stll/folio-react/messages";import"@stll/folio-react/editor.css";exportfunctionEditor({ docx, locale }: {docx: ArrayBuffer;locale: string}){return(<IntlProviderlocale={locale}messages={getFolioMessages(locale)}><DocxEditordocumentBuffer={docx}/></IntlProvider>);}@stll/folio-react/messages exports:
getFolioMessages(locale: string): FolioMessagesFOLIO_LOCALESFolioLocaleisFolioLocale(locale: string): locale is FolioLocale
Bundled locales: en, de, fr, es, cs, ar, et, he, hi, hu,
lt, lv, pl, pt-BR, sk, tr, zh-CN. Arabic (ar) and Hebrew
(he) are right-to-left: set dir="rtl" on a container around the editor for
those locales.
To merge folio messages with app messages, keep folio under its own folio.*
namespace:
constmessages={ ...getFolioMessages(locale), ...appMessages[locale]};Do not copy folio's folio.* keys into your app catalog.
bun install
bun run build
bun run typecheck
bun run test
bun run lint
bun run validate-distReleases use Changesets. Add a
changeset to every PR that edits published package source under
packages/{core,react,agents,vue,nuxt}/src:
bunx changesetFor source changes that do not need a release:
bunx changeset --emptyCI enforces this through the changeset-policy workflow. Merging the generated
Version Packages PR publishes changed packages through publish.yml.
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 are publishing the folio fork as an independently maintained
continuation. The original license and copyright are preserved in
NOTICE.md.