npm package: @marketifyall/design-editor-kit
Description: A powerful Canva-like design editor for React and Next.js applications. Built on top of @nkyo/scenify-sdk with autosave, templates, and rich editing features.
Author: Marketifyall Team
Latest version: 0.1.0

# @marketifyall/design-editor-kit

A powerful, Canva-like design editor for React and Next.js applications. Built on top of `@nkyo/scenify-sdk` with autosave, templates, and rich editing features.

## Features

- 🎨 **Rich Visual Editor** - Canva-like editing experience with drag-and-drop
- 🖼️ **Image Support** - Load images from URLs, upload custom images
- 📝 **Text Editing** - Add and customize text with multiple fonts
- 💾 **Auto-save** - Automatic saving with configurable intervals
- 📱 **Responsive** - Works seamlessly in iframe and standalone modes
- 🎯 **Template Support** - Load pre-built templates or start from scratch
- ⚡ **Next.js Ready** - Full support for Next.js 13+ with App Router
- 🔧 **Customizable** - Extensive configuration options

## Installation

```bash
npm install @marketifyall/design-editor-kit @nkyo/scenify-sdk baseui styletron-react styletron-engine-atomic
# or
yarn add @marketifyall/design-editor-kit @nkyo/scenify-sdk baseui styletron-react styletron-engine-atomic
```

## Quick Start

### React App

```tsx
import { DesignEditor, useEditor } from '@marketifyall/design-editor-kit';
import { EditorProvider } from '@nkyo/scenify-sdk';

function App() {
  return (
    <EditorProvider>
      <MyEditor />
    </EditorProvider>
  );
}

function MyEditor() {
  const editor = useEditor();

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <DesignEditor
        config={{ clipToFrame: true, scrollLimit: 0 }}
        enableAutosave={true}
        autosaveKey="my-design"
        onChange={(template) => console.log('Changed:', template)}
        onSave={(template) => console.log('Saved:', template)}
      />
    </div>
  );
}
```

### Next.js 13+ (App Router)

```tsx
'use client';

import dynamic from 'next/dynamic';
import { EditorProvider } from '@nkyo/scenify-sdk';

const DesignEditor = dynamic(
  () => import('@marketifyall/design-editor-kit').then(mod => mod.DesignEditor),
  { ssr: false }
);

export default function DesignPage() {
  return (
    <EditorProvider>
      <div style={{ width: '100vw', height: '100vh' }}>
        <DesignEditor
          config={{ clipToFrame: true, scrollLimit: 0 }}
          enableAutosave={true}
          autosaveKey="my-design"
        />
      </div>
    </EditorProvider>
  );
}
```

### Next.js Pages Router

```tsx
import dynamic from 'next/dynamic';
import { EditorProvider } from '@nkyo/scenify-sdk';

const DesignEditor = dynamic(
  () => import('@marketifyall/design-editor-kit').then(mod => mod.DesignEditor),
  { ssr: false }
);

export default function DesignPage() {
  return (
    <EditorProvider>
      <div style={{ width: '100vw', height: '100vh' }}>
        <DesignEditor config={{ clipToFrame: true, scrollLimit: 0 }} />
      </div>
    </EditorProvider>
  );
}
```

## API Reference

### DesignEditor Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `config` | `EditorConfig` | `{ clipToFrame: true, scrollLimit: 0 }` | Editor configuration |
| `initialTemplate` | `any` | `undefined` | Initial template to load |
| `enableAutosave` | `boolean` | `true` | Enable automatic saving |
| `autosaveKey` | `string` | `'design_editor_autosave'` | LocalStorage key for autosave |
| `onChange` | `(template: any) => void` | `undefined` | Called when design changes (debounced ~300ms) |
| `onSave` | `(template: any) => void` | `undefined` | Called every 30s for autosave |
| `onLoadError` | `(error: unknown) => void` | `undefined` | Called when template load fails |

### Exports

```typescript
export { DesignEditor, useEditor };
```

## Advanced Usage

### Loading Images from URL Parameters

```tsx
function MyEditor() {
  const searchParams = new URLSearchParams(window.location.search);
  const imgUrl = searchParams.get('img_url');
  const userId = searchParams.get('user_id');
  const editor = useEditor();

  useEffect(() => {
    if (editor && imgUrl) {
      editor.add({
        type: 'StaticImage',
        metadata: { src: imgUrl },
      });
    }
  }, [editor, imgUrl]);

  return <DesignEditor autosaveKey={`design_${userId}`} />;
}
```

### Loading Templates

```tsx
function MyEditor() {
  const [template, setTemplate] = useState(null);

  useEffect(() => {
    fetch('/api/templates/1')
      .then(res => res.json())
      .then(setTemplate);
  }, []);

  return (
    <DesignEditor
      initialTemplate={template}
      onSave={(template) => {
        fetch('/api/templates/1', {
          method: 'PUT',
          body: JSON.stringify(template),
        });
      }}
    />
  );
}
```

### Embedding in iframe

```html
<iframe
  src="https://editor.yourdomain.com/design/edit?img_url=https://example.com/image.jpg&user_id=123"
  width="100%"
  height="100vh"
/>
```

## Styling

The editor uses BaseUI. Customize the theme:

```tsx
import { LightTheme, BaseProvider } from 'baseui';
import { Client as Styletron } from 'styletron-engine-atomic';
import { Provider as StyletronProvider } from 'styletron-react';

const engine = new Styletron();

function App() {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={LightTheme}>
        <EditorProvider>
          <DesignEditor />
        </EditorProvider>
      </BaseProvider>
    </StyletronProvider>
  );
}
```

## Peer Dependencies

- `react`: ^17.0.0 || ^18.0.0 || ^19.0.0
- `react-dom`: ^17.0.0 || ^18.0.0 || ^19.0.0
- `@nkyo/scenify-sdk`: >=0.3.4
- `baseui`: >=10.0.0
- `styletron-react`: >=6.0.0
- `styletron-engine-atomic`: >=1.4.0

## Building & Publishing

```bash
# Build the package
cd packages/design-editor-kit
yarn build

# Publish to npm
npm publish --access public
```

## License

MIT © Marketifyall Team