Image Editor Canva

A powerful and customizable image editor built with React and Fabric.js.

Latest Release

Version 1.3.0 is now available on npm! You can install it using:

npm install [email protected]

Or simply:

npm install image-editor-canva

Features

• 🎨 Rich set of editing tools
• 📝 Text editing with multiple fonts and styles
• 🖼️ Image manipulation and filters
• 🎯 Shape drawing and manipulation
• 🎨 Color management
• 📏 Size and position controls
• 🔄 Undo/Redo functionality
• 💾 Multiple export formats (PNG, JPG, SVG, JSON)
• ⌨️ Keyboard shortcuts
• 🎯 Selection tools
• 🖌️ Drawing tools
• 🎨 Background customization
• 📦 Template support
• 🛡️ Enhanced error handling for corrupted data
• 📦 Optimized bundle size (~200KB)

What's New in v1.3.0

• 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

Links

• NPM Package
• GitHub Repository

Including Styles

To ensure styles load properly and avoid styling delays:

1. 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.

2. 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