canvas-editor

---

Overview

Canvas Editor is a feature-rich, WYSIWYG document editor rendered with HTML <canvas> (with an optional SVG backend). It is designed for use cases that demand pixel-perfect rendering, advanced typography, complex layouts, and Word-like document experiences in the browser — including EMR (Electronic Medical Records), legal contracts, reports, and other document-centric applications.

Unlike traditional contenteditable-based editors, Canvas Editor takes full control of the rendering pipeline, providing consistent typography across browsers, precise pagination, and a uniform export experience.

Features

• Rich Text — Undo / Redo, Font, Size, Bold, Italic, Underline, Strikeout, Superscript, Alignment, Headings, Lists, and more
• Insertable Elements — Tables, Images, Hyperlinks, Code Blocks, Page Breaks, Math Formulas (LaTeX), Date Pickers, Block elements
• Form Controls — Select, Text, Date, Radio, Checkbox controls
• Pagination — Native pagination with headers, footers, and page numbers
• Page Layout — Configurable page margins, watermarks, backgrounds
• Document Structure — Catalog (TOC) generation, comments, group annotations
• Print & Export — Print-ready output via canvas-to-image / PDF rendering
• Interaction — Custom context menus, customizable shortcut keys, drag-and-drop for text, elements, and controls
• Extensibility — Plugin system (instance.use); official plugins cover Word/Excel import-export, formulas, code blocks, comments, spell checking, and more
• Large Documents — Responsive rendering and editing of very large documents through incremental layout, position and history reuse, visible-page rendering, and optimized zooming
• Performance — Web Workers for word counting, catalog generation, and async value retrieval

Why Canvas Editor?

	Canvas Editor	contenteditable Editors
Cross-browser rendering	Pixel-perfect, identical	Varies by browser
Pagination	Native, document-style	Manual / unsupported
Print fidelity	Matches on-screen output	Often diverges
Typography control	Full control	Limited by the browser
Document features	TOC, headers/footers, watermarks	Requires heavy custom logic

Installation

# npm
npm install @hufe921/canvas-editor

# pnpm
pnpm add @hufe921/canvas-editor

# yarn
yarn add @hufe921/canvas-editor

Quick Start

<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!'
    }
  ]
})

For complete API documentation, see the official docs.

Ecosystem

Project	Description
canvas-editor-plugin	Official plugins: Word/Excel import-export, formula, comment, spellcheck & 20+ more
SVG render layer	Built-in SVG rendering backend — enable via the backend: 'svg' editor option (supersedes the old feature/svg branch)
feature/pdf	PDF export — live demo
feature/ai	AI-powered text processing demo
feature/collaboration	Real-time collaborative editing example

Development

Prerequisites

• Node.js >= 24.13.1
• pnpm (recommended)

Setup

# Install dependencies
pnpm install

# Start the development server
npm run dev

Build

# Build the application (demo)
npm run build

# Build the library (publishable package)
npm run lib

Quality Checks

# Lint
npm run lint

# Type check
npm run type:check

# Unit tests (Vitest)
npm run test:unit

# E2E tests (Cypress)
npm run cypress:open    # interactive
npm run cypress:run     # headless

Documentation

npm run docs:dev        # Start VitePress docs locally
npm run docs:build      # Build the documentation site

This is the beginning of the README. Read the rest at the original. Read the full README ↗