Canvas Editor

A Canvas/SVG-based rich text editor.

Live Demo · Documentation · Report Bug · Request Feature · Discussions

English · 中文文档

Overview

Canvas Editor is a feature-rich, WYSIWYG document editor built on top of the HTML <canvas> API. 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 for adding custom functionality
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 plugin collection | | feature/svg | SVG render layer (in development) | | feature/pdf | PDF export feature | | feature/ai | AI-powered text processing demo | | poc/table-paging | Table pagination POC (demo) | | feature/CRDT | CRDT-based collaboration (experimental) |

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

Project Structure

src/editor/
├── core/
│   ├── draw/           # Rendering engine (canvas drawing)
│   │   ├── particle/   # Element renderers (text, image, table, latex, ...)
│   │   ├── control/    # Form control rendering
│   │   ├── frame/      # Frame elements (margin, background, borders)
│   │   ├── richtext/   # Decorations (underline, highlight)
│   │   └── interactive/# Interactive features (search, graffiti)
│   ├── command/        # Command pattern (executeBold, executeUndo, ...)
│   ├── event/          # Canvas and global event handling
│   ├── observer/       # Mouse, selection, image observers
│   ├── worker/         # Web Workers for async operations
│   └── plugin/         # Plugin system
├── interface/          # TypeScript interfaces
├── dataset/            # Enums and constants
└── utils/              # Utility helpers

Contributing

Contributions are what make the open-source community such an amazing place. Any contributions you make are greatly appreciated — bug reports, feature requests, documentation improvements, or pull requests.

Fork the repository
Create your feature branch (git checkout -b feat/amazing-feature)
Commit your changes following Conventional Commits (git commit -m 'feat: add amazing feature')
Push to the branch (git push origin feat/amazing-feature)
Open a Pull Request

Pre-commit hooks automatically run lint and type:check. Commit messages must follow Conventional Commits format (feat:, fix:, docs:, refactor:, ...).