Skip to main content

​
Build Rich Text Experiences

Canvas Editor is a production-ready, TypeScript-based rich text editor that provides complete control over document rendering using Canvas and SVG. Perfect for applications requiring precise layout control, print capabilities, and advanced formatting features.

Quick Start

Get up and running with Canvas Editor in under 5 minutes

Installation

Install via npm, yarn, or pnpm and integrate into your project

API Reference

Explore the complete API documentation and type definitions

View Demo

See Canvas Editor in action with interactive examples

​
Key Features

Canvas Rendering

High-performance rendering engine using HTML5 Canvas and SVG

Rich Formatting

Complete text formatting with bold, italic, underline, colors, and more

Table Support

Advanced table operations including cell merging, splitting, and styling

Image Handling

Insert, crop, resize images with caption support

Form Controls

Interactive controls for forms, checkboxes, radio buttons, and date pickers

Print & Export

Generate PDFs and print documents with pixel-perfect accuracy

​
Why Canvas Editor?

Unlike traditional DOM-based editors, Canvas Editor renders content directly to Canvas, providing consistent rendering across browsers and precise control over layout and positioning.
Built with TypeScript from the ground up, Canvas Editor provides comprehensive type definitions and excellent IDE support for a better developer experience.
Extend functionality with plugins, customize behavior with the override system, and integrate with your application using the event bus and listener APIs.
Powers real-world applications with features like undo/redo, search/replace, internationalization, watermarks, and multiple editor modes.

​
Get Started

1

Install the package

Add Canvas Editor to your project using your preferred package manager
npm install @hufe921/canvas-editor
2

Create an editor instance

Initialize the editor with your container element and content
import Editor from '@hufe921/canvas-editor'

const editor = new Editor(document.querySelector('.editor'), {
  main: [{ value: 'Hello World' }]
})
3

Explore the API

Use commands to manipulate content and listeners to react to changes

​
Community & Support

GitHub Repository

Star the project, report issues, and contribute to development

Discussions

Ask questions and join the community discussion

Build docs developers (and LLMs) love

Get started for freeTalk to us