Canvas Editor is an MIT-licensed, Canvas/SVG-based rich text editor written in TypeScript and published to npm as @hufe921/canvas-editor, built for developers who need pixel-perfect, Word-like documents — EMR records, legal contracts, and reports — inside a browser instead of a contenteditable field.

What it is

Canvas Editor is a WYSIWYG document editor built on top of the HTML Canvas API, distributed as an npm library and developed in the open under the MIT license. It lives in the browser and front-end JavaScript ecosystem and sits in this registry's Productivity & Utilities / Browsers & Extensions category. The project takes full control of the rendering pipeline, which is the deliberate difference: text, tables, images, and page layout are drawn to a canvas rather than handed to the browser's native editing implementation.

The concrete problem it solves is the inconsistency of contenteditable. Editors built on it render differently across browsers, offer no native pagination, and diverge between the screen and the printed page. Canvas Editor replaces that approach with one controlled renderer, so the same document looks identical everywhere, pagination is native and document-style with headers, footers, and page numbers, and the print and PDF output matches what the user saw on screen. It provides a uniform export experience and full control over typography, which matters in documents where a shifted line or a moved signature block is a real problem.

Key capabilities

• Rich text editing with undo/redo, font and size selection, bold, italic, underline, strikeout, superscript, alignment, headings, and lists.
• Insertable elements including tables, images, hyperlinks, code blocks, page breaks, math formulas written in LaTeX, date pickers, and block elements.
• Form controls for Select, Text, Date, Radio, and Checkbox fields, the basis for structured EMR-style data entry.
• Native pagination with configurable page margins, watermarks, backgrounds, headers, footers, and page numbers.
• Document structure tools: catalog (TOC) generation, comments, and group annotations.
• Print and export through canvas-to-image and PDF rendering, with output intended to match the on-screen layout.
• Plugin system through instance.use, with the official canvas-editor-plugin package covering Word and Excel import-export, formulas, code blocks, comments, and spell checking; Web Workers handle word counting, catalog generation, and async value retrieval.

Who uses it and how

• Electronic medical records: form controls plus paginated layout for structured clinical documents.
• Legal contracts and reports: stable typography, page breaks, and print fidelity for signed, page-numbered output.
• Document-centric web applications that need Word and Excel import-export, delivered through the official plugin package.
• Teams exploring collaboration: the feature/CRDT branch holds an experimental CRDT-based collaboration implementation.
• Teams trialing AI assistance: the feature/ai branch provides an AI-powered text processing demo.

Getting started

Install the published library with npm install @hufe921/canvas-editor (or pnpm add / yarn add), then construct an editor instance against a container element and pass an initial main value array. The live demo and complete API documentation are linked from the project homepage at https://hufe.club/canvas-editor-docs.

How it compares

The facts supplied here contain no list of named paid products that this project replaces, and no named rival editors either. Canvas Editor positions itself against contenteditable editors as a category, claiming pixel-perfect cross-browser rendering, native document pagination, print output that matches the screen, and full typography control where contenteditable implementations depend on the browser and require heavy custom logic for TOC, headers, footers, and watermarks. On that basis it stands alone in this registry.

When to use it — and when not to

Canvas Editor is a client-side library, so there is no database, storage layer, or SMTP service for a self-hoster to operate; the cost is front-end integration work and, for contributors, a development environment that requires Node.js >= 24.13.1 and pnpm. Teams that only need a simple text input, or that depend on native browser text selection, DOM accessibility, and system spell-check behaviour, should weigh that against the control the canvas renderer provides. Some advertised capabilities still live on separate branches — the SVG render layer, PDF export, and CRDT collaboration — so those should be treated as in development rather than shipped.

# npm
npm install @hufe921/canvas-editor

# pnpm
pnpm add @hufe921/canvas-editor

# yarn
yarn add @hufe921/canvas-editor

<div class="canvas-editor"></div>

import Editor from '@hufe921/canvas-editor'

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

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