# canvas-editor: a Word-like document engine drawn on canvas

> canvas-editor is an MIT-licensed rich text editor that renders documents on the HTML canvas instead of contenteditable, taking full control of typography, pagination and export. It targets document-centric applications such as electronic medical records, legal contracts and reports, with native page layout, watermarks, TOC generation and a plugin ecosystem.

**Hufe921/canvas-editor** — Hufe921/canvas-editor is an open-source project for practical engineering and operations.

- Repository: https://github.com/Hufe921/canvas-editor
- Website: https://hufe.club/canvas-editor-docs
- Stars: 5,210 · Forks: 865
- Language: TypeScript
- License: MIT
- Published: 2026-08-08 · Updated: 2026-08-18 · Language: en
- Canonical page: https://hysenlabs.com/projects/hufe921-canvas-editor

## Owning the rendering pipeline instead of borrowing it

canvas-editor is a feature-rich WYSIWYG document editor built on top of the HTML canvas API, and its architectural bet is stated as a rejection: unlike traditional contenteditable-based editors, it takes full control of the rendering pipeline. What that buys is the table in its own README, cross-browser rendering that is pixel-perfect and identical rather than varying by browser, native document-style pagination instead of manual or unsupported approaches, print fidelity that matches on-screen output, typography control unbound from browser defaults, and document features like tables of contents, headers, footers and watermarks that contenteditable editors only achieve with heavy custom logic. The target audience is equally specific, applications that need Word-like document experiences in the browser, with electronic medical records, legal contracts and reports named as the canonical use cases.

## One npm install, one container, one data array

The library installs like any npm package:

```bash
# npm
npm install @hufe921/canvas-editor
```

And a working editor is a container element plus a constructor call with initial content:

```javascript
import Editor from '@hufe921/canvas-editor'

const container = document.querySelector('.canvas-editor')

const editor = new Editor(container, {
  main: [
    {
      value: 'Hello, Canvas Editor!'
    }
  ]
})
```

The data-driven shape is worth noticing at the outset: the document is an array of element objects, not HTML strings, which is the natural consequence of owning rendering, and it is also what makes programmatic document construction, the bread and butter of EMR templating, straightforward. A live demo and the complete API documentation are hosted at hufe.club, with a Chinese translation of the docs alongside the English version.

## Pagination, watermarks and the rest of the Word checklist

The document feature set reads like a requirements list from records and legal software. Pagination is native, with headers, footers and page numbers, and page layout covers configurable margins, watermarks and backgrounds. Document structure includes catalog generation for tables of contents, plus comments and group annotations for review workflows. Rich text covers the expected formatting range, undo and redo through superscript, alignment, headings and lists, while insertable elements include tables, images, hyperlinks, code blocks, page breaks, LaTeX math formulas, date pickers and block elements. Form controls, select, text, date, radio and checkbox, are first-class, which is precisely what turns a document into a fillable medical or legal form. Print and export run through canvas-to-image and PDF rendering, keeping the promise that printed output matches what the user saw.

## The draw/ tree and a command-pattern core

The source layout under src/editor/core explains the architecture at a glance. A draw directory holds the rendering engine, subdivided into particle renderers per element type, text, image, table, LaTeX among them, a control renderer for form controls, frame rendering for margins, backgrounds and borders, richtext decorations like underline and highlight, and an interactive layer for search and graffiti. Alongside it, a command directory implements the command pattern, with operations like executeBold named in the listing, which is how undo and redo are structured rather than bolted on. Extensibility is a plugin system through instance.use, with the command layer giving plugins a uniform way to mutate documents, and interaction features, custom context menus, configurable shortcuts and drag-and-drop for text, elements and controls, complete the editor surface.

## Official plugins and four experimental futures

The ecosystem table splits cleanly into the present and the speculative. The present is canvas-editor-plugin, a repository of official plugins covering Word and Excel import-export, formulas, comments, spell checking and more than twenty others, which is where document interchange with the office world lives. The speculative arrives as feature branches in the main repository: feature/svg is an SVG render layer in development, the second half of the project's Canvas/SVG self-description; feature/pdf is a PDF export feature; feature/ai is a demonstration of AI-powered text processing; and feature/CRDT is experimental conflict-free replicated data type collaboration, the standard foundation for multiplayer editing. Publishing maturity alongside experiments this openly lets an adopter see exactly which parts of the roadmap are shippable and which are signals of direction.

## Web Workers, and a surprisingly strict toolchain

Performance work targets the operations that block interaction: word counting, catalog generation and asynchronous value retrieval all run in Web Workers, keeping the main thread free for rendering and input. The development toolchain is stricter than most, requiring Node 24.13.1 or newer, with pnpm recommended, and the build scripts encode quality gates directly, the lib script that produces the publishable package runs eslint, the TypeScript compiler and the full Vitest suite before Vite builds, so a failing test cannot ship. End-to-end coverage runs through Cypress in both interactive and headless modes, unit testing through Vitest with coverage available, and the documentation site is VitePress, developed and built through npm scripts. Git hooks install automatically via simple-git-hooks, and a pre-release script guards publishing.

## Version 1.0, announced in the README itself

Milestone communication here is unusually direct: the README carries a banner announcing that Canvas Editor 1.0.0 is released, pointing at a release notes document for highlights and upgrade notes, and the package on npm has already moved to 1.0.4. There are no GitHub releases to speak of, npm is the release channel, with CHANGELOG.md tracking history in the repository. The repository shows current attention, last pushed on 2026-09-21, and both an AGENTS.md and CLAUDE.md for coding assistants. The distinction that decides adoption remains the one the project leads with: mainstream editors like ProseMirror and Quill ride the browser's contenteditable and inherit its behavior everywhere, while canvas-editor draws every glyph itself and inherits nothing, which is simultaneously its cost and its entire value.

## Conclusion

Choose canvas-editor when the deliverable is a document, pixel-consistent across browsers, paginated, printable and exportable, rather than a web page with editable text, the EMR and contract use cases being the canonical fits. Choose a contenteditable editor such as ProseMirror or Quill when you want native browser text behavior, input methods and accessibility for free. Verify first that your team can live with a Node 24 toolchain for development, that the official plugin set covers your import and export formats, and read the 1.0 release notes before committing, since the project documents its upgrade path there.

## FAQ

### What is canvas-editor, the JavaScript library?

canvas-editor is an MIT-licensed rich text editor for the browser, published as @hufe921/canvas-editor, that renders documents on canvas instead of using contenteditable. It targets pixel-perfect, Word-like experiences for document-centric applications such as EMR systems, legal contracts and reports.

### How do you install canvas-editor?

Run npm install @hufe921/canvas-editor, or the pnpm or yarn equivalent, then construct a new Editor on a container element with an initial data array. The complete API documentation is hosted at hufe.club/canvas-editor-docs.

### Does canvas-editor support pagination and printing?

Yes. Pagination is native, with headers, footers and page numbers, and page layout supports configurable margins, watermarks and backgrounds. Print and export are provided through canvas-to-image and PDF rendering, so printed output matches the on-screen document.

## Sources

- [Official documentation](https://hufe.club/canvas-editor-docs)
- [Official README](https://github.com/Hufe921/canvas-editor#readme)
- [Project repository](https://github.com/Hufe921/canvas-editor)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/hufe921-canvas-editor