Editable Creative Board

A powerful ReactJS plugin for creating interactive canvas boards with Fabric.js. Built with TypeScript and styled with TailwindCSS.

Features

• 🖌️ Advanced drawing tools with customizable brush sizes and colors
• 🔶 Shape creation tools (rectangle, circle, triangle, line, polygon)
• 📝 Text tools with font customization
• 🖼️ Image uploading and manipulation
• 🔙 Undo/Redo support
• 🔍 Zoom and pan functionality
• 🎨 Customizable UI with TailwindCSS
• 📱 Responsive design
• 🌓 Light and dark mode support
• 🧩 Layer management (bring forward, send backward, delete)

Installation

npm install editable-creative-board
# or
yarn add editable-creative-board

Basic Usage

import React from 'react';
import { EditableCreativeBoard } from 'editable-creative-board';
import 'editable-creative-board/dist/index.css';

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <EditableCreativeBoard 
        width={800} 
        height={600} 
        background="#f8f8f8"
      />
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | width | number | 800 | Canvas width in pixels | | height | number | 600 | Canvas height in pixels | | background | string | "#ffffff" | Canvas background color | | className | string | undefined | Additional CSS classes for the container | | onSave | function | undefined | Callback function when canvas state changes. Receives the current canvas state. | | onLoad | function | undefined | Callback function when canvas is loaded. Can be used to initialize with a specific state. | | initialState | object | undefined | Initial canvas state to load | | tools | object | see below | Configure which tools to show |

Tools Configuration

You can customize which tools are displayed:

<EditableCreativeBoard 
  tools={{
    draw: true,     // Free drawing tool
    shape: true,    // Shapes (rect, circle, triangle)
    text: true,     // Text tool
    image: true,    // Image upload
    undo: true,     // Undo button
    redo: true,     // Redo button
    clear: true,    // Clear canvas button
    download: true, // Download canvas as image
    save: true,     // Save state button
    load: true,     // Load state button
    zoomIn: true,   // Zoom in button
    zoomOut: true,  // Zoom out button
    pan: true,      // Pan tool
  }}
/>

Advanced Usage

Saving & Loading Canvas State

import React, { useState } from 'react';
import { EditableCreativeBoard, CanvasState } from 'editable-creative-board';

function App() {
  const [savedState, setSavedState] = useState<CanvasState | null>(null);
  
  const handleSave = (state: CanvasState) => {
    setSavedState(state);
    localStorage.setItem('canvas-state', JSON.stringify(state));
  };
  
  // Load initial state from localStorage if available
  const initialState = localStorage.getItem('canvas-state') 
    ? JSON.parse(localStorage.getItem('canvas-state')!) 
    : undefined;
  
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <EditableCreativeBoard 
        onSave={handleSave}
        initialState={initialState}
      />
    </div>
  );
}

export default App;

Custom Image Uploading

import React from 'react';
import { EditableCreativeBoard, useCanvasStore } from 'editable-creative-board';

function App() {
  const addImageToCanvas = (url: string) => {
    const { addImage } = useCanvasStore.getState();
    addImage(url);
  };
  
  return (
    <div>
      <button onClick={() => addImageToCanvas('https://example.com/image.jpg')}>
        Add Image from URL
      </button>
      
      <EditableCreativeBoard />
    </div>
  );
}

export default App;

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT