Canvas Editor

A Canvas/SVG-based rich text editor.

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

English · 中文文档

` 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 ```bash # npm npm install @hufe921/canvas-editor # pnpm pnpm add @hufe921/canvas-editor # yarn yarn add @hufe921/canvas-editor ``` ## Quick Start ```html

``` ```javascript 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](https://hufe.club/canvas-editor-docs). ## Ecosystem | Project | Description | | ---------------------------------------------------------------------------------- | --------------------------------------------------------------------- | | [canvas-editor-plugin](https://github.com/Hufe921/canvas-editor-plugin) | Official plugin collection | | [feature/svg](https://github.com/Hufe921/canvas-editor/tree/feature/svg) | SVG render layer (in development) | | [feature/pdf](https://github.com/Hufe921/canvas-editor/tree/feature/pdf) | PDF export feature | | [feature/ai](https://github.com/Hufe921/canvas-editor/tree/feature/ai) | AI-powered text processing demo | | [poc/table-paging](https://github.com/Hufe921/canvas-editor/tree/poc/table-paging) | Table pagination POC ([demo](https://hufe.club/canvas-editor-table/)) | | [feature/CRDT](https://github.com/Hufe921/canvas-editor/tree/feature/CRDT) | CRDT-based collaboration (experimental) | ## Development ### Prerequisites - Node.js `>= 24.13.1` - pnpm (recommended) ### Setup ```bash # Install dependencies pnpm install # Start the development server npm run dev ``` ### Build ```bash # Build the application (demo) npm run build # Build the library (publishable package) npm run lib ``` ### Quality Checks ```bash # 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 ```bash 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](https://www.conventionalcommits.org/) (`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](https://hufe.club/canvas-editor-docs) - **Discussions** — [GitHub Discussions](https://github.com/Hufe921/canvas-editor/discussions) - **Bug Reports** — [GitHub Issues](https://github.com/Hufe921/canvas-editor/issues) - **AI-Assisted Q&A** — [Zread](https://zread.ai/Hufe921/canvas-editor) · [DeepWiki](https://deepwiki.com/Hufe921/canvas-editor) ## Sponsors If you find this project useful, please consider [sponsoring](https://hufe.club/donate.jpg) to support its continued development. ## License This project is licensed under the [MIT License](./LICENSE). Copyright © 2022–present, [Hufe921](https://github.com/Hufe921).