@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

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

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)

'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

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

export { DesignEditor, useEditor };

Advanced Usage

Loading Images from URL Parameters

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

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

<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:

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

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

# Publish to npm
npm publish --access public

License

MIT © Marketifyall Team