Hufe921/canvas-editor

Canvas Editor

A Canvas/SVG-based rich text editor.

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

English · 中文文档

🎉 Canvas Editor 1.0.0 is released! See the 1.0 Release Notes for highlights and upgrade notes.

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?

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)
│   │   ├── 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.

1. Fork the repository
2. Create your feature branch (git checkout -b feat/amazing-feature)
3. Commit your changes following Conventional Commits (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feat/amazing-feature)
5. 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

• Documentation — hufe.club/canvas-editor-docs
• Discussions — GitHub Discussions
• Bug Reports — GitHub Issues
• AI-Assisted Q&A — Zread · DeepWiki

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.