Canvas Editor
A Canvas/SVG-based rich text editor
Last verified:
What is Canvas Editor?
Canvas Editor is a WYSIWYG rich text editor built entirely on canvas/SVG technology instead of traditional contenteditable and DOM-based approaches. It implements its own text layout engine, cursor system, and rendering pipeline from scratch, delivering a Word-like, paginated, pixel-perfect editing experience in the browser. The editor is framework-agnostic and can be embedded anywhere a div container can be placed, making it suitable for React, Vue, Angular, or vanilla JavaScript projects.
Key features include comprehensive rich text operations (undo, redo, font, size, bold, italic, underline, strikeout, superscript, alignment, titles, lists), element insertion (tables, images, links, code blocks, page breaks, math formulas, date pickers), form controls (select, text, date, radio, checkbox), print functionality with PDF export, headers/footers, page numbers, page margins, watermarks, pagination, comments, catalog generation, and a plugin system with official plugins for barcode insertion, DOCX import/export, Excel import, floating toolbar, diagrams, and case conversion.
Canvas Editor is designed for developers building document editing applications, online word processors, form builders, document management systems, or any project requiring precise WYSIWYG fidelity comparable to desktop word processors. Its canvas-based rendering ensures deterministic control over every glyph and pixel, delivering consistent cross-browser rendering and accurate print output. The editor is open-source under the MIT license and available as the npm package @hufe921/canvas-editor.
Canvas Editor pricing
Pricing model: Freemium
Canvas Editor is completely free and open-source under the MIT license. The npm package @hufe921/canvas-editor can be installed without any subscription fees or hidden limitations. The official only provides the editor core layer npm package, while the menu bar or other external tools can be referenced from the official demo implementation or built separately. There are no paid tiers or commercial licensing requirements. The project accepts donations to help improve it but does not mandate payment for any features.
Canvas Editor pros
- Canvas-based rendering delivers pixel-perfect WYSIWYG fidelity
- Framework-agnostic works with React Vue Angular or vanilla JS
- Own text layout engine ensures consistent cross-browser rendering
- Full pagination with Word-like page preview
- PDF export feature is available and functional
- Comprehensive form controls include select text date radio checkbox
- Built-in header footer page number and page margin support
- Watermark and watermark repetition options available
- Comment and catalog/table of contents generation supported
- Rich official plugin ecosystem including DOCX and Excel import
- Custom context menu and customizable shortcut keys supported
- Drag and drop for text elements and controls
- SVG rendering backend under active development as alternative
- AI-powered text processing demo available in feature folder
- MIT open-source license with 4.4k GitHub stars
Canvas Editor cons
- SVG rendering backend still under development not production-ready
- Performance needs improvement listed in roadmap TODO items
- Table paging functionality not yet implemented
- Control rules feature still missing from current version
- No official out-of-the-box wrapper for Vue or React frameworks
- Requires building your own menu bar or external tools separately
- Larger npm package size at 41.1 MB compared to lightweight editors
- reimplemented text measurement and hit testing adds complexity
Frequently asked questions about Canvas Editor
What is Canvas Editor?
Canvas Editor is an open-source TypeScript-first rich text editor that renders content entirely through canvas with an experimental SVG backend under active development. Unlike conventional WYSIWYG editors built on contenteditable and the DOM, it implements its own text layout engine cursor system and rendering pipeline from the ground up delivering a Word-like paginated pixel-perfect editing experience in a single npm package with zero DOM content dependencies.
Why does Canvas Editor use canvas instead of DOM?
DOM-based rich text editors struggle with precise pagination consistent cross-browser rendering and complex document features like watermarks form controls and pixel-accurate print output. By owning the entire rendering pipeline through Canvas 2D canvas-editor gains deterministic control over every glyph pixel and page boundary delivering WYSIWYG fidelity comparable to desktop word processors.
Which frameworks does Canvas Editor support?
Canvas Editor is framework-agnostic and does not depend on any framework like Vue React or Angular for its editing surface. It can be embedded anywhere a div container can be placed. The demo application bundled in the repository uses Vue 3 for the surrounding toolbar UI but the editor core @hufe921/canvas-editor works with any framework or vanilla JavaScript.
How do I install Canvas Editor?
Install the npm package by running npm i @hufe921/canvas-editor --save in your project. Then prepare a container div with class canvas-editor and instantiate the editor by importing Editor from @hufe921/canvas-editor and creating new Editor with the container and your data including main body content and optionally header and footer content.
Does Canvas Editor support PDF export?
Yes the export PDF feature is available now. The print functionality is based on canvas to picture and pdf drawing using pdfjs. The print pixel ratio defaults to 3 which produces clearer output at the cost of larger file sizes. You can configure the printPixelRatio option for different quality levels.
What form controls are available in Canvas Editor?
Canvas Editor includes five form controls: Select dropdown selection Text editable text field Date date picker Radio radio button and Checkbox checkbox. These controls support drag and drop and can be used in Form mode where only controls are editable. The editor provides customizable placeholder colors bracket colors borders and background states for controls.
How do I add plugins to Canvas Editor?
Use the instance.use method to register plugins. The official plugin repository is at github.com/Hufe921/canvas-editor-plugin with a demo at hufe.club/canvas-editor-plugin. Available official plugins include barcode1D barcode2D codeblock DOCX import/export Excel import floating toolbar diagram case conversion for uppercase/lowercase and more. Import the plugin and call instance.use with the plugin before executing plugin commands.
What editor modes does Canvas Editor support?
The editor supports six modes through the mode option: Edit for normal editing Clean where visual aids like page breaks are not displayed ReadOnly for non-editable viewing Form where only controls are editable Print where visual aids are hidden and unwritten content controls are not shown and Design which does not handle non-deletable and read-only configurations. The default mode is Edit.
Can I customize fonts and page settings?
Yes you can configure defaultFont which defaults to Microsoft YaHei defaultSize at 16 minSize at 5 and maxSize at 72. Page settings include width default 794 height default 1123 for A4 portrait paper margins default 100 120 100 120 pageGap default 20 paperDirection for portrait or landscape and renderMode for speed or compatibility rendering. All these options are configurable in the editor options.
What is on the Canvas Editor roadmap?
The roadmap includes four main items: Table paging for proper table pagination across pages Control rules for defining validation and behavior rules for form controls Improve performance as computational performance is a known TODO item and CRDT for collaborative editing support. Additionally the SVG rendering backend is under development and out-of-the-box wrappers for Vue and React are planned but not yet available.