Canvas Editor SDK

A powerful and flexible TypeScript-based Canvas Editor SDK for building sophisticated design tools and image editing applications in React.

🎯 Features

• 🎨 Rich Canvas Editing

  • Drag and drop functionality
  • Rotation and resizing of elements
  • Layer management (bring forward/send backward)
  • Background customization
  • Undo/Redo support

• 📝 Text Elements

  • Add and edit text elements
  • Customize font properties
  • Real-time text editing
  • Text element rotation and resizing

• 🖼️ Image Elements

  • Upload images from files
  • Add images from URLs
  • Image transformation capabilities
  • Image element rotation and resizing
  • Custom clipping paths support

• 🔷 Shape Elements

  • Add various shape elements
  • Customize shape properties
  • Shape transformation support

• 💾 Persistence

  • Automatic state saving
  • Import/Export design functionality
  • Local storage support

🚀 Getting Started

Installation (To be deployed on npm)

npm install canvas-editor-sdk
# or
yarn add canvas-editor-sdk

Basic Usage

import { ReactCanvasEditor } from 'canvas-editor-sdk';

function App() {
  const handleDesignChange = (design) => {
    console.log('Design updated:', design);
  };

  return (
    <ReactCanvasEditor
      onDesignChange={handleDesignChange}
    />
  );
}

With Initial Design

import { ReactCanvasEditor } from 'canvas-editor-sdk';

function App() {
  const initialDesign = {
    width: 800,
    height: 600,
    backgroundColor: '#ffffff',
    elements: []
  };

  return (
    <ReactCanvasEditor
      initialDesign={initialDesign}
      onDesignChange={(design) => {
        // Handle design changes
      }}
    />
  );
}

📚 API Reference

ReactCanvasEditor Props

Prop	Type	Description
initialDesign	CanvasDesign	Optional initial design configuration
onDesignChange	(design: CanvasDesign) => void	Callback fired when design changes

CanvasDesign Interface

interface CanvasDesign {
  width: number;
  height: number;
  backgroundColor: string;
  elements: CanvasElement[];
}

Element Types

The SDK supports multiple element types:

• TextElement: For text content
• ImageElement: For images and photos
• ShapeElement: For geometric shapes

🛠️ Features in Detail

Text Editing

• Double-click to edit text elements
• Customize font properties
• Rotate and resize text elements

Image Handling

• Support for file uploads
• URL-based image imports
• Image transformations
• Custom clipping paths

Canvas Controls

• Zoom and pan
• Element selection
• Multi-element manipulation
• History management (undo/redo)

💾 Persistence

The editor automatically saves the current state to localStorage and supports:

• Importing designs from JSON
• Exporting designs to JSON
• Automatic state recovery on page reload

🎨 Customization

The editor supports extensive customization through:

• Custom color schemes
• Template support
• Element style customization
• Tool configurations

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📝 License

MIT License

🙏 Acknowledgments

• Built with React and TypeScript
• Uses modern web technologies for optimal performance
• Designed with flexibility and extensibility in mind

📧 Contact

Created by @Anas-Dew