Skip to main content

​
Package Installation

Canvas Editor is distributed as an npm package and can be installed using your preferred package manager. 
npm install @hufe921/canvas-editor
Canvas Editor requires Node.js 16.9.1 or higher. Make sure your development environment meets this requirement.

​
TypeScript Setup

Canvas Editor is built with TypeScript and provides comprehensive type definitions out of the box. No additional @types packages are needed.

​
Type Definitions

When you install Canvas Editor, TypeScript definitions are automatically available: 
import Editor, { 
  IElement, 
  IEditorData, 
  IEditorOption,
  ElementType,
  EditorMode 
} from '@hufe921/canvas-editor'

// Full type safety and autocomplete support
const data: IEditorData = {
  main: [
    { value: 'Hello World' }
  ]
}

const options: IEditorOption = {
  mode: EditorMode.EDIT,
  defaultFont: 'Arial',
  defaultSize: 16
}

​
TypeScript Configuration

For optimal compatibility, ensure your tsconfig.json includes:
tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true
  }
}

​
Module System

Canvas Editor is distributed as an ES module with UMD fallback. 
import Editor from '@hufe921/canvas-editor'

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

​
UMD (Browser Script Tag)

If you’re not using a module bundler, you can include Canvas Editor via a script tag: 
<script src="node_modules/@hufe921/canvas-editor/dist/canvas-editor.umd.js"></script>
<script>
  const editor = new Editor(
    document.querySelector('.editor'),
    { main: [{ value: 'Hello World' }] }
  )
</script>

​
Build Tools

Canvas Editor works seamlessly with modern build tools.
Canvas Editor works out of the box with Vite:
vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  // No special configuration needed
})

​
Verify Installation

To verify that Canvas Editor is installed correctly, create a simple test:
1

Create an HTML container

Add a container element to your HTML:
<div class="canvas-editor" style="width: 800px; height: 600px;"></div>
2

Initialize the editor

Import and create an editor instance:
import Editor from '@hufe921/canvas-editor'

const container = document.querySelector('.canvas-editor')
const editor = new Editor(container, {
  main: [{ value: 'Installation successful!' }]
})
3

Check the output

You should see the editor rendered with your text. If you can type and edit, the installation is working correctly.

​
Troubleshooting

If you see a module resolution error:
  1. Verify the package is in your package.json dependencies
  2. Delete node_modules and reinstall: rm -rf node_modules && npm install
  3. Clear your build tool’s cache (e.g., .cache for Vite)
If TypeScript can’t find type definitions:
  1. Ensure @hufe921/canvas-editor is in your dependencies (not devDependencies)
  2. Check that your tsconfig.json includes "moduleResolution": "node"
  3. Restart your TypeScript server in your IDE
Canvas Editor includes built-in styles. If styles aren’t applying:
  1. Ensure your bundler is configured to handle CSS imports
  2. Check that no global CSS is overriding editor styles
  3. Verify the container element has explicit dimensions
If you see Node version errors:
  1. Check your Node version: node --version
  2. Upgrade to Node 16.9.1 or higher using nvm or your preferred method
  3. Clear your package manager’s cache after upgrading

​
Next Steps

Quick Start

Build your first editor in minutes

Configuration

Explore editor configuration options

API Reference

Learn about the Editor class API

Examples

See live examples and demos

Build docs developers (and LLMs) love

Get started for freeTalk to us