npm package: @imagecanvaskit/embed
Description: Embed the ImageCanvasKit image editor in your application
Author: ImageCanvasKit
Latest version: 1.0.0

# @imagecanvaskit/embed

Embed the ImageCanvasKit image editor in your application with ease.

## Installation

```bash
# npm
npm install @imagecanvaskit/embed

# yarn
yarn add @imagecanvaskit/embed

# pnpm
pnpm add @imagecanvaskit/embed
```

## CDN Usage

```html
<script type="module">
  import { createEditor } from 'https://unpkg.com/@imagecanvaskit/embed@latest';

  const editor = createEditor({
    container: '#editor',
    apiKey: 'your-api-key',
  });
</script>
```

## React Usage

```tsx
import { useRef } from 'react';
import { ImageCanvasKit, ImageCanvasKitInstance } from '@imagecanvaskit/embed';

function App() {
  const editorRef = useRef<ImageCanvasKitInstance>(null);

  const handleExport = () => {
    editorRef.current?.export({ format: 'png' });
  };

  return (
    <div>
      <button onClick={handleExport}>Export</button>
      <ImageCanvasKit
        ref={editorRef}
        apiKey="your-api-key"
        width={1200}
        height={800}
        theme="dark"
        onExport={(e) => {
          console.log('Exported image:', e.data);
          // e.data.imageData contains base64 image
        }}
        onReady={() => console.log('Editor is ready!')}
      />
    </div>
  );
}
```

### Next.js App Router

```tsx
'use client';

import dynamic from 'next/dynamic';

const ImageCanvasKit = dynamic(
  () => import('@imagecanvaskit/embed').then((mod) => mod.ImageCanvasKit),
  { ssr: false }
);

export default function EditorPage() {
  return (
    <ImageCanvasKit
      apiKey="your-api-key"
      onExport={(e) => console.log(e.data)}
    />
  );
}
```

## Vanilla JavaScript

```js
import { createEditor, downloadImage } from '@imagecanvaskit/embed';

const editor = createEditor({
  container: '#editor-container',
  apiKey: 'your-api-key',
  width: '100%',
  height: '600px',
  theme: 'light',
  onExport: (e) => {
    // Download the image
    downloadImage(e.data.imageData, 'design.png', 'image/png');
  },
  onReady: () => {
    console.log('Editor ready!');
  },
});

// Programmatic control
document.getElementById('export-btn').addEventListener('click', () => {
  editor.export({ format: 'png', quality: 0.9 });
});

// Add text programmatically
editor.addText({
  text: 'Hello World',
  fontSize: 48,
  color: '#000000',
});

// Cleanup when done
editor.destroy();
```

## Vue.js

```vue
<template>
  <div ref="editorContainer"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { createEditor } from '@imagecanvaskit/embed';

const editorContainer = ref(null);
let editor = null;

onMounted(() => {
  editor = createEditor({
    container: editorContainer.value,
    apiKey: 'your-api-key',
    onExport: (e) => console.log(e.data),
  });
});

onUnmounted(() => {
  editor?.destroy();
});
</script>
```

## Configuration Options

| Option           | Type                          | Description                              |
| ---------------- | ----------------------------- | ---------------------------------------- |
| `apiKey`         | `string`                      | Your API key from the dashboard          |
| `baseUrl`        | `string`                      | Custom editor URL (for self-hosted)      |
| `width`          | `number`                      | Canvas width in pixels                   |
| `height`         | `number`                      | Canvas height in pixels                  |
| `backgroundColor`| `string`                      | Background color (hex) or 'transparent'  |
| `theme`          | `'light' \| 'dark' \| 'system'` | Editor theme                           |
| `hideToolbar`    | `boolean`                     | Hide the toolbar                         |
| `hideSidebar`    | `boolean`                     | Hide the sidebar                         |
| `hideExport`     | `boolean`                     | Hide export button                       |
| `templateId`     | `string`                      | Template ID to load                      |
| `projectData`    | `string`                      | Project JSON to load                     |
| `endUserId`      | `string`                      | End user ID for multi-tenant tracking    |
| `exportFormats`  | `string[]`                    | Allowed export formats                   |
| `whiteLabel`     | `object`                      | White-label configuration                |

## Event Callbacks

| Callback           | Data                          | Description                              |
| ------------------ | ----------------------------- | ---------------------------------------- |
| `onReady`          | `{ version, canvasWidth, canvasHeight }` | Editor is loaded and ready     |
| `onExport`         | `{ imageData, format, width, height }` | Image export completed          |
| `onSave`           | `{ projectData, projectId }` | Project saved                             |
| `onLoad`           | `{ success, projectId }`     | Project/template loaded                   |
| `onError`          | `{ code, message }`          | Error occurred                            |
| `onObjectSelected` | `{ objectId, objectType }`   | Object selected on canvas                 |
| `onCanvasModified` | `{ action, objectId }`       | Canvas was modified                       |

## Instance Methods

```ts
interface ImageCanvasKitInstance {
  export(options?: { format?: string; quality?: number }): void;
  save(): void;
  load(options: { projectData?: string; templateId?: string }): void;
  clear(): void;
  undo(): void;
  redo(): void;
  addText(options: { text: string; fontSize?: number; color?: string }): void;
  addImage(options: { url: string; width?: number; height?: number }): void;
  addShape(options: { shape: string; fill?: string }): void;
  setBackground(options: { color?: string; imageUrl?: string }): void;
  resize(width: number, height: number): void;
  destroy(): void;
}
```

## White-Label Configuration

```tsx
<ImageCanvasKit
  apiKey="your-api-key"
  whiteLabel={{
    logo: 'https://yoursite.com/logo.png',
    primaryColor: '#FF5733',
    companyName: 'Your Company',
    hideBranding: true,
  }}
/>
```

## TypeScript Support

Full TypeScript support with exported types:

```ts
import type {
  ImageCanvasKitConfig,
  ImageCanvasKitInstance,
  ExportEventData,
  SaveEventData,
} from '@imagecanvaskit/embed';
```

## License

MIT