Skip to main content
Version: Latest

API Reference

Loader API

The embed script (https://cdn.unlayer.com/image-editor/embed.js) is a lightweight loader. It exposes window.ImageEditor and only downloads the full editor when first used.

MemberDescription
load(options?)Optionally preload the editor ahead of time. Accepts an optional version and returns a Promise.
createEditor(options)Create and mount an editor. Loads the editor on first use. Returns Promise<ImageEditorInstance>.

Once the full editor bundle has loaded — after the first load() or createEditor() call — the loader dispatches an image-editor-ready event on window. Listen for it if you preload and want to know when the editor is ready (for example, to enable an "Edit" button).

To preload a specific published editor build, pass its version to load. An unavailable version falls forward to the current release:

await window.ImageEditor.load({ version: '1.500.0' });

Mount Options

createEditor(options) accepts:

OptionTypeDescription
containerstring | HTMLElementCSS selector or element to mount the editor into. Required.
imagestringImage URL or base64 data URL to edit. Required.
projectIdnumberYour Unlayer project ID. Required for AI features.
userobjectWho is editing (id, name, avatar, email, signature). Pass id to attribute AI usage to them.
featuresobjectFeature flags for the AI Assistant, tools, and tool-rail dock.
creditsobjectHost-managed ai allowance. Low state warns; exhausted, disabled, or invalid state blocks AI prompts only.
theme'light' | 'dark'Editor color theme. Default: 'light'.
localestringLanguage code (e.g. 'en', 'es', 'fr'). See Localization.
translationsobjectCustom translations by locale. Editor keys use image_editor.*; shared credit notices use labels.credits.*.
offlinebooleanPrevent external requests. Use with an offline license and locally bundled assets. Default: false.
licenseUrlstringURL of the encrypted license file used in offline mode.
envobjectAdvanced runtime overrides for API and image-editor asset base URLs.
defaultPromptstringPre-fill the AI chat input with this prompt.
autoSubmitPromptbooleanWith an open panel and defaultPrompt, submit the prompt automatically instead of only pre-filling it. Default: false.
aiAssistantOpenState'open' | 'closed'Whether the available AI Assistant panel is open when the editor is ready. Default: 'open'.
onCreditsPurchase(request) => result | Promise<result>Purchase action used instead of credits.ai.purchaseUrl. A successful result refreshes the resource snapshot.
onSave(result) => voidCalled when the user saves. result has dataUrl (base64 string) and blob (Blob).
onCancel() => voidCalled when the user cancels.
onLoadError() => voidCalled when the image fails to load into the canvas because of CORS, a missing resource, or a decode error.

createEditor rejects if the container element cannot be found, or if an editor is already mounted in that container — call destroy() on the existing instance first.

Host credits are a client-side preflight only. Keep the authoritative end-user ledger and enforcement in your backend. Refresh one resource in an open editor with setCredits:

Image Editor AI Assistant showing an exhausted edits notice and a disabled prompt areaImage Editor AI Assistant showing an exhausted edits notice and a disabled prompt area
editor.setCredits('ai', {
limit: 100,
used: 80,
unitLabel: 'edits',
purchaseUrl: 'https://app.example.com/billing/ai',
});

For an in-app checkout, return a settled result from onCreditsPurchase. The editor creates request.requestId for idempotency, disables duplicate purchase attempts while the handler is pending, and applies valid success snapshots:

const editor = await window.ImageEditor.createEditor({
/* ... */
onCreditsPurchase: async (request) => {
const credits = await purchaseCredits(request.requestId);
return { status: 'success', credits };
},
});

Return { status: 'cancelled' } when checkout is dismissed, or { status: 'error', message? } when it fails. updateOptions({}) preserves the current credits. Passing updateOptions({ credits: undefined }) clears the complete host-managed snapshot.

Instance Methods

createEditor resolves with an editor instance:

MethodDescription
destroy()Unmount the editor and clean up.
getImage()Return the current canvas as a data URL, or null.
hasChanges()Return true if the canvas has unsaved edits relative to the input image. Useful for showing a confirmation prompt before closing.
updateOptions(opts)Update options at runtime (e.g. theme, locale, translations). Re-renders with the new options.
setCredits(resource, credits)Replace one host-managed credit resource while preserving the rest of the current snapshot.
reset(imageUrl?)Reset the editor state (chat, undo/redo history) and optionally load a new image.
const editor = await window.ImageEditor.createEditor({
/* ... */
});

editor.updateOptions({ theme: 'dark', locale: 'es' });
editor.reset('https://example.com/another-photo.jpg');

if (!editor.hasChanges()) {
editor.destroy();
}