EditorEngine API Reference

import { EditorEngine } from '@design-on-web/core';

const canvasEl = document.createElement('canvas');
const engine = new EditorEngine({
  canvasElement: canvasEl,
  width: 1080,
  height: 1080,
  backgroundColor: '#ffffff',
});

// Add a rectangle
const rectId = engine.addShape('rect', {
  left: 100, top: 100,
  width: 200, height: 150,
  fill: '#4f46e5',
  stroke: '#312e81',
  strokeWidth: 2,
  rx: 8, ry: 8, // rounded corners
});

// Add a circle
const circleId = engine.addShape('circle', {
  left: 300, top: 200,
  radius: 75,
  fill: '#ef4444',
});

// Add text
const textId = engine.addText('Hello World', {
  left: 100, top: 400,
  fontSize: 48,
  fill: '#1f2937',
  fontFamily: 'Inter',
  fontWeight: 'bold',
});

// Add image (async — waits for image to load)
const imageId = await engine.addImage('https://example.com/photo.jpg', {
  left: 50, top: 50,
  scaleX: 0.5,
  scaleY: 0.5,
});

// Get currently selected objects
const selected = engine.getSelectedObjects();
// => [{ id: 'abc123', type: 'rect', left: 100, top: 100, ... }]

// Select a specific object by ID
engine.selectObject('abc123');

// Deselect everything
engine.deselectAll();

// Remove an object
engine.removeObject('abc123');

// Zoom
const currentZoom = engine.getZoom(); // => 1
engine.setZoom(1.5); // 150%

// Canvas size
const size = engine.getCanvasSize(); // => { width: 1080, height: 1080 }
engine.setCanvasSize({ width: 1920, height: 1080 });

// Undo the last operation
engine.undo();

// Redo the last undone operation
engine.redo();

// Check availability
if (engine.canUndo()) engine.undo();
if (engine.canRedo()) engine.redo();

// Save canvas state to JSON string
const json = engine.toJSON();
localStorage.setItem('myDesign', json);

// Load canvas state from JSON string
const saved = localStorage.getItem('myDesign');
if (saved) {
  await engine.loadJSON(saved);
}

// Basic export
const pngBlob = await engine.exportAs('png');

// With options
const hiResBlob = await engine.exportAs('png', { multiplier: 2 });
const jpegBlob = await engine.exportAs('jpeg', { quality: 0.85 });
const pdfBlob = await engine.exportAs('pdf');

// Enable freehand drawing mode
engine.setDrawingMode(true);

// Configure the brush
engine.updateBrush({
  color: '#ff0000',
  width: 5,
  opacity: 0.8,
});

// Disable drawing mode
engine.setDrawingMode(false);

// Apply text shadow
engine.applyTextShadow(textId, {
  color: 'rgba(0,0,0,0.5)',
  blur: 4,
  offsetX: 2,
  offsetY: 2,
});

// Remove text shadow
engine.applyTextShadow(textId, null);

// Apply text outline (stroke)
engine.applyTextOutline(textId, {
  color: '#000000',
  width: 2,
});

// Remove text outline
engine.applyTextOutline(textId, null);

// Apply text decoration
engine.applyTextDecoration(textId, {
  underline: true,
  linethrough: false,
});

// Apply gradient fill
engine.applyGradientFill(rectId, {
  type: 'linear', // 'linear' | 'radial'
  angle: 90,
  colorStops: [
    { offset: 0, color: '#4f46e5' },
    { offset: 1, color: '#7c3aed' },
  ],
});

// Update any object property
engine.applyProperties(rectId, {
  fill: '#10b981',
  opacity: 0.8,
  angle: 45,
  scaleX: 1.5,
  scaleY: 1.5,
});

// Move forward/backward in the layer stack
engine.bringForward(rectId);
engine.sendBackward(rectId);
engine.bringToFront(rectId);
engine.sendToBack(rectId);

// Canvas instance (Fabric.js Canvas)
const canvas = engine.getCanvas();

// EventBus for pub/sub events
const eventBus = engine.getEventBus();

// Zustand store for state management
const store = engine.getStore();

// Plugin registry
const plugins = engine.getPluginRegistry();

// Manager instances
const exportManager = engine.getExportManager();
const canvasManager = engine.getCanvasManager();
const templateManager = engine.getTemplateManager();
const pageManager = engine.getPageManager();
const versionManager = engine.getVersionManager();

import { PsdExportPlugin } from '@design-on-web/export-psd';

await engine.registerPlugin(PsdExportPlugin);

// Release all resources
engine.destroy();