Editable Design Editor

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 editable-design-editor
# or
yarn add editable-design-editor
# or
pnpm add editable-design-editor

Usage in React

Basic Implementation

For standard React applications, you can use the DesignEditorPlugin component directly:

import React, { useState } from 'react';
import { DesignEditorPlugin } from 'editable-design-editor';
import 'editable-design-editor/dist/editable-design-editor.css'; // Don't forget to import the styles

function MyDesignApp() {
  const [savedDesign, setSavedDesign] = useState(null);
  
  const handleSave = (jsonData) => {
    console.log('Design saved:', jsonData);
    setSavedDesign(jsonData);
    // Save to database or localStorage as needed
  };

  return (
    <div className="app">
      <h1>My Design App</h1>
      
      <div className="editor-container" style={{ height: '800px', border: '1px solid #ccc' }}>
        <DesignEditorPlugin 
          width={1200}
          height={800}
          onSave={handleSave}
          showLeftSidebar={true}
          showRightSidebar={true}
        />
      </div>
      
      {savedDesign && (
        <div className="saved-data">
          <h3>Saved Design Data:</h3>
          <code>{savedDesign.substring(0, 100)}...</code>
        </div>
      )}
    </div>
  );
}

export default MyDesignApp;

Important: Required Peer Dependencies

This library requires the following peer dependencies:

npm install react react-dom fabric

Usage in Next.js

Important: Client-Side Rendering

Because the design editor uses canvas APIs that require a browser environment, you must use client-side rendering in Next.js:

'use client';

import React from 'react';
import dynamic from 'next/dynamic';
import 'editable-design-editor/dist/editable-design-editor.css'; // Import styles

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

export default function DesignEditorPage() {
  const handleSaveDesign = (jsonData) => {
    console.log('Design saved:', jsonData);
    // Save to database or localStorage
  };
  
  return (
    <div className="design-editor-container" style={{ height: '800px' }}>
      <NextJsDesignEditor 
        width={1200}
        height={700}
        onSave={handleSaveDesign}
      />
    </div>
  );
}

Available Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | width | number | 800 | Canvas width in pixels | | height | number | 600 | Canvas height in pixels | | initialTemplate | string | undefined | JSON string of a saved template | | onSave | function | undefined | Callback when design is saved | | showLeftSidebar | boolean | true | Show/hide left sidebar with elements | | showRightSidebar | boolean | true | Show/hide right property panel | | wrapperClassName | string | '' | Additional CSS class for the wrapper div |

Troubleshooting

Common Issues

1. "Cannot find module 'editable-design-editor'" - Make sure you have installed the package correctly. Try reinstalling with npm install editable-design-editor --save.

2. Styles not loading - Don't forget to import the CSS file:

   import 'editable-design-editor/dist/editable-design-editor.css';

3. Canvas not rendering in Next.js - Ensure you're using dynamic import with { ssr: false } option.

4. Missing peer dependencies - Make sure you have installed all required peer dependencies:

   npm install react react-dom fabric

Publishing to NPM

When publishing this package to NPM, only the built files should be included, not the source code. Follow these steps:

1. Make sure .npmignore file is configured to exclude source files.
2. Update your package.json with proper fields (see npm-package-info.md).
3. Build the package:

npm run build

4. Publish to NPM:

npm publish

License

MIT