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
- 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
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)
│ ├── render/ # Pluggable render backends (canvas / SVG)
│ │ ├── 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:, ...).
Contributors
Thanks to all the people who have contributed to Canvas Editor!
Community & Support
Sponsors
If you find this project useful, please consider sponsoring to support its continued development.
License
This project is licensed under the MIT License.
Copyright © 2022–present, Hufe921.
