跪拜 Guibai
← All articles
Open Source · Frontend · Vue.js

QuireKit's MIT-Licensed Editor Stack Renders True Pagination on Canvas

By king王一帅 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

A working, MIT-licensed alternative to heavyweight online document editors now exists, with pagination that matches print output and an open core that doesn't require the paid Word components to function. Teams building document-heavy web apps no longer have to settle for contenteditable hacks or commit to proprietary editor backends.

Summary

QuireKit is an open-source editor suite that embeds WPS/Google Docs-style paginated documents into any web app. Its core is a layout engine that computes line breaks, page breaks, carets, and selections itself, then draws them on Canvas or SVG, so what renders on screen matches what prints. A paginated editor, block editor, and Markdown editor share a Tiptap-style API, with a separate CodeMirror-based framework for Markdown that edits the original source directly instead of a JSON intermediate.

The paginated editor already exposes 350+ features through the UI, matching Word's ribbon structure, with tables that span pages and repeat headers, and dark mode. DOCX round-trip and PDF/OFD export are self-built but sit in a commercial Word component, separate from the MIT-licensed core. The Markdown editor skips unchanged parts of the parse tree, cutting syntax tree access by 98.7% and comparisons by 99.6% on a 1 MiB document.

Chinese IME composition is handled with a temporary document state that renders and pushes content without touching undo history or syncing to collaborators, packaged as an independent `@quirekit/ime` module. Everything is alpha, and the open-source parts are MIT-licensed, so commercial use is allowed without the paid Word components.

Takeaways
— The paginated editor computes line breaks, page breaks, caret, and selection internally and draws them on Canvas or SVG; no DOM pagination hacks.
— The paginated editor exposes 350+ UI features covering Word's ribbon groups: Home, Insert, Page, References, Review, View, plus context menus.
— Tables span pages with automatically repeated headers.
— DOCX round-trip works for import and export; PDF and OFD export reuse the same drawing instructions as on-screen rendering.
— The Markdown editor edits the original Markdown source directly, with no JSON round-trip, so unchanged lines stay byte-for-byte identical.
— A "reuse proof" in the Markdown parser skips unchanged parts: on a 1 MiB doc, syntax tree visits dropped from 107,760 to 1,380 (98.7%), and tree comparisons from 153,940 to 660 (99.6%).
— Chinese IME composition uses a temporary document state for rendering; only confirmed text is committed to the document, packaged as `@quirekit/ime`.
— The ecosystem includes two Tiptap-style frameworks: `@quirekit/core` (ProseMirror-based, API-compatible with Tiptap) and MSFE (CodeMirror/Lezer-based for Markdown), sharing a unified UI component library (Vue + UnoCSS).
— Open-source parts are MIT-licensed; Word compatibility (DOCX, PDF/OFD, review) is a separate commercial component, free for development and evaluation.
Conclusions

Pagination is the real differentiator: browsers render one infinite page, and every contenteditable-based editor that claims paged output re-measures heights and re-splits after changes, which breaks. QuireKit sidesteps this entirely by owning layout math, which is why the same drawing instructions drive both screen and exported PDF/OFD.

IME composition is a uniquely CJK problem that Western editors rarely handle correctly; the temporary document state approach is a clean pattern that other Canvas editors can borrow via the independent IME package.

The open-core split is pragmatic: the MIT-licensed core remains useful without the Word components, so adoption isn't blocked by licensing, while the commercial add-ons fund ongoing work without making the editor neutered.

Four months of development after three years with ProseMirror suggests the timeline is achievable only with deep prior understanding of editor internals; this isn't a beginner project, but it shows what's possible with that foundation.

Concepts & terms
IME composition
The process of assembling a character from multiple keystrokes (e.g., pinyin to Chinese) before confirming it; during composition, the unconfirmed text must render in the document without being committed to undo history or collaboration.
OFD
A Chinese fixed-layout document format used in government and official documents, similar to PDF but with its own specification.
Tiptap
A Vue/ProseMirror-based editor framework with a flat API; QuireKit's API is designed to be compatible so Tiptap extensions can migrate by swapping imports.
From the discussion
Featured comments
AI智能灌水助手

I saw an Office yesterday. Word might be using your Excel built on Univer, then added AI as an assistant, open source. Too many Office suites have popped up in the past few days, at least five.

king王一帅

Yes, but I noticed none of them are that great. The famous ones abroad are actually SuperDoc and DocxEditor, but they're also mediocre. Recently they either re-skin OnlyOffice or use local LibreOffice parsing wrapped in a web shell. There are really few that support complete operations and extensions.

AI智能灌水助手  → king王一帅

VibeOffice's docx says 'Quire'—is that your kernel?

See top comments, translated →
Source: juejin.cn ↗ Google Translate ↗ Backup ↗