canvas-editor

canvas-editor

rich text editor by canvas/svg

Stars: 3959

Visit
 screenshot

Canvas Editor is a web-based tool that allows users to create and edit images and graphics directly in the browser. It provides a user-friendly interface with features such as drawing tools, shapes, text editing, and image manipulation. Users can easily customize their designs and export them in various formats. The tool is suitable for graphic designers, web developers, artists, educators, and hobbyists who need a simple yet powerful tool for creating visual content.

README:

canvas-editor

Version Cypress Passing GitHub Contributors License PRs

a rich text editor by canvas/svg

View Demo · View Docs · Report Bug · Request Feature · FAQ

Love the project? Please consider donating to help it improve!

Tips

  1. Official plugin: canvas-editor-plugin
  2. The render layer by svg is under development, see feature/svg
  3. The export pdf feature is available now, see feature/pdf
  4. The AI-powered text processing demo, see feature/ai

Basic usage

npm i @hufe921/canvas-editor --save
<div class="canvas-editor"></div>
import Editor from '@hufe921/canvas-editor'

new Editor(document.querySelector('.canvas-editor'), {
  main: [
    {
      value: 'Hello World'
    }
  ]
})

Features

  • Rich text operations (Undo, Redo, Font, Size, Bold, Italic, Underline, Strikeout, Superscript, Alignment, Title, List, ...)
  • Insert elements (Table, Image, Link, Code Block, Page Break, Math Formula, Date Picker, Block, ...)
  • Print (Based on canvas to picture, pdf drawing)
  • Controls (Select, Text, Date, Radio, Checkbox)
  • Contextmenu (Internal, Custom)
  • Shortcut keys (Internal, Custom)
  • Drag and Drop(Text, Element, Control)
  • Header, Footer, Page Number
  • Page Margin
  • Watermark
  • Pagination
  • Comment
  • Catalog

Roadmap

  1. Table paging
  2. Control rules
  3. Improve performance
  4. CRDT

Snapshot

image

Install

yarn

Dev

npm run dev

Build

app

npm run build

lib

npm run lib

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for canvas-editor

Similar Open Source Tools

For similar tasks

For similar jobs