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

Don't scroll away just yet. This isn't a concept drawing or a stitched screenshot.

Open https://quirekit.com/demo/classic-editor. The first screen is a real editor: page after page of paper, typing, line breaks, tables spanning pages, toggling Canvas / SVG rendering. All live.

The DOCX export, headers/footers, and so on in the demo are commercial Word components; the editor framework, layout engine, and the editors themselves are open source.

This is QuireKit, the result of the last four months of work. It isn't one editor; it's a complete editor ecosystem:

• At the bottom are two editor frameworks, both written in Tiptap style: one based on ProseMirror with an API compatible with Tiptap; the other based on CodeMirror, built for Markdown.
• In the middle is a self-developed layout engine, Canvas / SVG / HTML views, and a unified UI component library.
• At the top are ready-to-use editors: paginated documents, block editor, Markdown editor, and peripheral editors for formulas, mind maps, whiteboards, and flow diagrams.

Each layer can be used independently or combined as a whole. In one sentence: with it, you can embed a document editor like WPS or Google Docs into your own web application.

What was built

1. A truly paginated document editor in the browser

Anyone who has built online documents knows the browser only lays out one infinitely long page. To get "one page at a time," the common approach is to measure heights after layout and manually split pages—but any content change breaks the layout.

QuireKit's paginated editor doesn't rely on DOM layout: line breaks, page breaks, caret, and selection are all computed internally, then drawn on Canvas or SVG. The pagination on screen is the same as what prints.

• Tables can span pages, and headers repeat automatically
• Formulas, flow diagrams, mind maps, and whiteboards can be placed directly inside the page and laid out with it
• Dark mode, Chinese/English interface toggle
• Long documents only draw the visible pages; scrolling stays smooth

The toolbar isn't for show. I went through Word's ribbon one by one: Home, Insert, Page, References, Review, View, plus right-click menus, formatting panels, and context tools for tables and images. Over 350 features are directly clickable in the UI, and more keep being added.

DOCX round-trip is also working: documents written in Word or WPS can be imported, edited, and exported as DOCX to keep using in Word.

PDF and OFD export are also self-developed: they don't go through browser printing; they reuse the same drawing instructions produced by the paginated layout. Whatever a page looks like on screen, the exported PDF / OFD matches. OFD is a Chinese fixed-layout format used heavily in government and official documents.

DOCX round-trip and PDF/OFD export belong to the commercial Word component; development and evaluation are free.

2. Block editor

For scenarios that don't need pagination—notes, knowledge bases—use the block editor: drag-and-drop, slash menu, tables, and table of contents are all there.

It solves a pitfall everyone who has used contenteditable has hit: you select some text, go to the toolbar to type a link, and the selection is gone. In QuireKit, the caret and selection are drawn by the framework itself, so even when focus moves to an input, the selection stays.

3. Markdown editor: the source text is never altered

The MD Editor has four views: document, live preview, source, and reading. The first three are directly editable, all editing the same Markdown source—no conversion to JSON and back, so lines you didn't touch remain character-for-character unchanged when saved.

Big documents are fine too. I added a "reuse proof" to the Markdown parser, which skips unchanged parts during editing. On a 1 MiB document typed continuously 20 times, measured:

Workload	Before optimization	After optimization
Syntax tree visits	107,760	1,380 (98.7% fewer)
Syntax tree comparisons	153,940	660 (99.6% fewer)

4. A whole set of peripheral editors, usable standalone

Formulas, mind maps, whiteboards, text diagrams (Mermaid / PlantUML / Graphviz), flow diagrams, charts, and multidimensional tables are each independent packages; you don't need the whole editor to install them.

5. A UI component library designed in-house

An editor's interface is far more complex than a typical admin panel: font menus, color pickers, table right-click menus, formatting dialogs, zoom, keyboard shortcuts... To make the paginated document, block editor, Markdown editor, and peripherals all feel consistent, I designed a separate UI component library (Vue + UnoCSS). Colors, spacing, and font sizes are all managed by the same design tokens, with light and dark themes toggled in one click.

All the buttons, menus, and panels in the screenshots above come from this library. It's also MIT-licensed and can be used standalone in your own projects: https://design.quirekit.com

The hardest part: Chinese IME

Since Canvas has no input field, the Chinese input method is the hardest bone to chew. Before pinyin is confirmed, the characters must render and push following content along, but they must not enter the undo history or sync to collaborators.

My approach: during IME composition, a "temporary document state" is used for layout and drawing; only when you confirm does it get written into the actual document.

The browser has many pitfalls around IME: empty event data, composition end events not firing, duplicate insertions after confirm... I made this handling into a separate @quirekit/ime package, so other Canvas editors can use it directly.

Under the hood: two Tiptap-style editor frameworks

• ProseMirror line: @quirekit/core. It keeps ProseMirror's document model, commands, plugins, and collaboration, with a Tiptap-compatible API. The goal is that migrating a Tiptap extension mainly means swapping @tiptap/core imports for @quirekit/core. The difference is the view layer: besides the native DOM view, you can mount its own Canvas / SVG view (used by the paginated editor) and an HTML view that manages caret and selection internally (used by the block editor).
• CodeMirror line: MSFE. Based on CodeMirror and Lezer, the Markdown source itself is the document; extensions and commands are also written in Tiptap style. The MD Editor is built on this.

Both frameworks' output share one UI component library, so the paginated document, block editor, and Markdown editor look like one family. If you already know Tiptap, you can get up to speed on both lines quickly.

Is it usable? How?

A few lines of code drop the Markdown editor into a Vue project:

npm install @quirekit/md-editor@alpha

<script setup lang="ts">
import { MdEditor } from '@quirekit/md-editor/vue'
import '@quirekit/md-editor/styles.css'
</script>

<template>
  <MdEditor markdown="# Hello" label="Document" />
</template>

The block editor and paginated editor are @quirekit/block-editor and @quirekit/classic-editor respectively.

What's open source in the whole ecosystem is MIT-licensed, and closed-source commercial use is allowed: two editor frameworks, the Canvas / SVG layout engine and its views, the UI component library, the paginated / block / Markdown editors, and the peripheral editors (formulas, mind maps, whiteboards, etc.). Word compatibility (DOCX round-trip, PDF/OFD export, review, etc.) is a separate commercial component; development and evaluation are free, and the editors work fully without it.

It's currently alpha; APIs will change. Come try it and pick at it:

• Online demo: https://quirekit.com
• Docs: https://docs.quirekit.com
• GitHub: https://github.com/quirekit/quirekit

If it looks interesting, a Star would be the biggest support.