folio
Folio is an embeddable Word-document editor for web applications. Pass it a
.docx as a File, Blob, ArrayBuffer, or Uint8Array; it renders editable,
paginated content in the browser and returns a .docx when the user saves.
Use the React, Vue, or Nuxt editor in an application, or use folio-core
directly for parsing, editing, layout, and document review without a UI.
Install
bun add @stll/folio-react react react-dom use-intl
@stll/folio-core is installed with the React editor.
React quick start
import { useState } from "react";
import { IntlProvider } from "use-intl";
import { DocxEditor } from "@stll/folio-react";
import { getFolioMessages } from "@stll/folio-react/messages";
import "@stll/folio-react/standalone.css";
const DOCX_MIME =
"application/vnd.openxmlformats-officedocument.wordprocessingml.document";
const downloadDocx = (buffer: ArrayBuffer) => {
const url = URL.createObjectURL(new Blob([buffer], { type: DOCX_MIME }));
const link = document.createElement("a");
link.href = url;
link.download = "edited.docx";
document.body.append(link);
link.click();
link.remove();
URL.revokeObjectURL(url);
};
export function Editor() {
const [file, setFile] = useState<File | null>(null);
return (
<IntlProvider locale="en" messages={getFolioMessages("en")}>
<input
type="file"
accept=".docx"
onChange={(event) => setFile(event.currentTarget.files?.[0] ?? null)}
/>
{file && (
<DocxEditor
documentBuffer={file}
author="Editor"
onSave={downloadDocx}
/>
)}
</IntlProvider>
);
}
The editor toolbar calls onSave with the updated DOCX bytes. You can also hold
a DocxEditorRef and call await editorRef.current?.save() yourself.
What it handles
- Paginated text, formatting, lists, tables, images, sections, headers, and footers
- Comments, footnotes, and tracked changes that Microsoft Word can review, accept, or reject
- DOCX round trips that preserve untouched package parts and unsupported OOXML
- Editing modes, find, page setup, document outline, and save hooks
- Bundled messages for 17 locales, including right-to-left editor chrome
Choose a package
Install the Vue editor with bun add @stll/folio-vue vue, the Nuxt module with
bun add @stll/folio-nuxt, or the framework-neutral engine with
bun add @stll/folio-core.
Create a Word redline without an editor
Compare two DOCX files and write their differences as native tracked changes:
import { generateRedlineDocx } from "@stll/folio-core/redline";
const result = await generateRedlineDocx(originalDocx, revisedDocx, {
author: "Reviewer",
});
await store(result.buffer);
For deterministic changes to one document, use FolioDocxReviewer. See the
folio-core review APIs.
Integration notes
- Use
standalone.cssby itself. Applications that already use Tailwind can instead follow theeditor.csssetup. - The editor requires the DOM. In an SSR application, load it from a client-only
component or dynamic import; Nuxt users can use
@stll/folio-nuxt. - Architecture and test methodology live in the DOCX platform boundary and interoperability guide. How folio keeps the reading of an OOXML sentinel in one place is in reserved values.
Development
bun install
bun run build
bun run typecheck
bun run test
bun run lint
bun run validate-dist
Published-package source changes require a Changeset.
Cloud setup
On Ubuntu 24.04 cloud environments, bash .agents/cloud-setup.sh install provisions the pinned Bun, Node, Rust, wasm-bindgen and dependencies (networked); bash .agents/cloud-setup.sh start refreshes the shell environment at each session start (offline). Regenerate the script with bunx --no-install stll-cloud-setup after changing stll-toolchain.json.
Acknowledgements
Folio originated as a fork of Eigenpal's
docx-editor by
Jedr Blaszyk and is independently maintained as
part of stella. The original license and
copyright are preserved in NOTICE.md.
