Enhanced Error Handling: Added robust error handling for JSON data loading and Fabric.js integration
Optimized Bundle Size: Reduced bundle size from 58MB to ~200KB
Fabric.js TypeError Fix: Includes automatic patching for the Fabric.js "Cannot read properties of undefined" error
Improved Dependency Management: Better organization of dependencies to reduce installation size
Enhanced Initial Load: More reliable canvas initialization with graceful fallbacks

Installation

npm install image-editor-canva
# or
yarn add image-editor-canva

Usage

import { Editor } from 'image-editor-canva';
import 'image-editor-canva/dist/styles.css'; // Import styles

function App() {
  return (
    <Editor 
      initialData={{
        json: "",
        name: "New Project",
        id: '123',
        userId: "anonymous",
        height: 720,
        width: 1280,
        thumbnailUrl: null,
        isTemplate: null,
        isPro: null,
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      }}
      onClose={() => {
        // Handle editor close
        console.log('Editor closed');
      }}
    />
  );
}

Props

Editor Component Props

Prop	Type	Description
`initialData`	`Object`	Initial editor data
`templates`	`Array`	Optional array of templates
`templateImagePath`	`string`	Path to template images
`onClose`	`Function`	Callback when editor is closed

Editor Data Structure

interface EditorData {
  json: string;
  name: string;
  id: string;
  userId: string;
  height: number;
  width: number;
  thumbnailUrl: string | null;
  isTemplate: boolean | null;
  isPro: boolean | null;
  createdAt: string;
  updatedAt: string;
}

Available Tools

Select
Shapes
Text
Images
Elements
Draw
Fill
Stroke Color
Stroke Width
Font
Opacity
Filter
Settings
AI
Remove Background
Background
Templates

Export Formats

PNG
JPG
SVG
JSON

Keyboard Shortcuts

Ctrl + Z / Cmd + Z: Undo
Ctrl + Y / Cmd + Y: Redo
Ctrl + C / Cmd + C: Copy
Ctrl + V / Cmd + V: Paste
Delete: Delete selected object
Ctrl + S / Cmd + S: Save

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Build optimized version
npm run build:slim

Bundle Size Optimization

The package is now significantly smaller:

ESM bundle: ~92KB
CommonJS bundle: ~96KB
Styles: ~28KB

This is achieved through:

Better tree-shaking
External dependencies
Smaller core package with peer dependencies

Error Handling

The editor now gracefully handles:

Invalid or corrupted JSON data
Fabric.js TypeErrors related to object properties
Missing or incomplete canvas elements
Invalid dimensions and coordinates

License

MIT

Including Styles

To ensure styles load properly and avoid styling delays:

Method 1: Import CSS in your HTML head (Recommended)

Add this to your HTML head tag:
```
<link rel="stylesheet" href="node_modules/image-editor-canva/dist/styles.css">
```
For bundlers that support it (webpack, Vite, etc.), you can also:
```
import 'image-editor-canva/dist/styles.css';
```
This is the preferred method to ensure styles load before components render.

Method 2: Import with plugin

You can still use the old method (not recommended for production):

import 'image-editor-canva/dist/index.js'; // This will include styles but may lead to style delay

Keywords

FAQs

What is image-editor-canva?

Is image-editor-canva popular?

Is image-editor-canva well maintained?

Package last updated on 31 May 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

image-editor-canva