editable-creative-canvas v1.0.0

Design Editor Plugin

A customizable and extensible design editor built with React, Fabric.js, and TypeScript that can be easily integrated into both React and Next.js applications.

Features

• Canvas-based design editing with Fabric.js
• Text editing with rich formatting options
• Image uploading and manipulation
• Shape creation and customization
• Template management (save, load, export)
• Undo/redo functionality
• Export to PNG/JPG/SVG
• PSD file import support
• Responsive design
• Keyboard shortcuts
• Customizable via props

Installation

npm install design-editor-plugin
# or
yarn add design-editor-plugin

Usage in React

import { DesignEditorPlugin } from 'design-editor-plugin';

function App() {
  const handleSave = (jsonData) => {
    console.log('Design saved:', jsonData);
    // Save to database or localStorage
  };

  return (
    <div className="app">
      <h1>My Design App</h1>
      
      <DesignEditorPlugin 
        width={1200}
        height={800}
        onSave={handleSave}
        showLeftSidebar={true}
        showRightSidebar={true}
      />
    </div>
  );
}

Usage in Next.js

In Next.js, you need to use dynamic imports with SSR disabled to prevent hydration errors with Fabric.js:

import dynamic from 'next/dynamic';

// Import with SSR disabled
const DesignEditorPlugin = dynamic(
  () => import('design-editor-plugin').then(mod => mod.DesignEditorPlugin),
  { ssr: false }
);

function DesignPage() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Design Editor</h1>
      
      <DesignEditorPlugin 
        width={1200}
        height={800}
        initialTemplate={templateJson} // Optional
      />
    </div>
  );
}

export default DesignPage;

Props

Building from Source

git clone https://github.com/yourusername/design-editor-plugin.git
cd design-editor-plugin
npm install
npm run build

Contributing

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

License

MIT