@imagecanvaskit/embed

Embed the ImageCanvasKit image editor in your application with ease.

Installation

# npm
npm install @imagecanvaskit/embed

# yarn
yarn add @imagecanvaskit/embed

# pnpm
pnpm add @imagecanvaskit/embed

CDN Usage

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

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

React Usage

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

'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

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

<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

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

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

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

License

MIT