Urgent.News

What's breaking now, across thousands of outlets.

Tech

After three years of ProseMirror, I replaced its view layer to get real pagination

Open https://quirekit.com and the first thing you see is not a screenshot. It's an editor with actual pages: type, press Enter, watch a table split across a page break, switch between Canvas and SVG rendering. All live. I've been building ProseMirror-based products for three years. The request I could never really deliver was "can it paginate like Word / Google Docs?" In June I gave up on working…

After three years of using ProseMirror, the author replaced its view layer to enable real pagination. ProseMirror splits an editor cleanly, but the view layer is tied to contenteditable. The author built QuireKit, an MIT-licensed open-source product, to get pagination like Word or Google Docs. The browser lays out content like a single endless page, but it has no understanding of page breaks, paragraph breaks, or page numbers.

The usual approach is to let the browser lay out, measure heights, and cut the result into pages after. This works for a demo but becomes problematic when content changes, requiring re-measurement and re-cutting, and caret and selection need to follow the fake page structure. The author kept ProseMirror and replaced the view layer, using the same editor API as Tiptap.

QuireKit has three views of the same editor state, sharing extensions, commands, and plugins. The paged editor handles layout and pagination itself, with one recursive routine for every container type. Layout turns into a list of drawing commands that can paint on Canvas 2D or SVG. The engine only knows how to lay things out, so document profiles define how to lay out different types of documents.

The author faced challenges with IME input on a canvas, which required a hidden input proxy and a special state machine. The editor can handle selections that survive losing focus, making it more user-friendly. The Markdown side uses CodeMirror and Lezer, with the Markdown text itself being the document. The source-first approach means re-parsing on every keystroke, but the author added incremental parse proofs to optimize performance.

Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.

Read the original at dev.to →

More in Tech

Open Source Radar · 2026-10-28: Approval moves from the prompt into the pipeline

By Renchao Wu. Originally published on widechaos.cn . Each day I pick five projects from GitHub's candidate pool, which mixes the Trending page with topic searches, mostly AI agents and developer…

  • Ovis integrates coding agents into conversational format for approval via browser or phone.
  • OXRay parses documents into Markdown or JSON, handling layout analysis and recognition separately.
  • OXRay supports thirteen document element types, including code blocks and tables.

More from Wednesday 28 October →