Events

Every event the image editor emits.

Every callback and DOM event of the image editor, with its payload. See Events for examples.

Callbacks

CallbackArgumentsWhen
onExportfile: File, extras?: EditorExtrasThe user presses Save & Exit or Share.
callbackfile: File, extras?: EditorExtrasThe same moment as onExport. An older name.
onClosenoneThe user closes the editor, and after Save & Exit and Share.
onSaveTemplateprops: { ...metadata, template: Template }The user saves a template or a draft. Returns a promise.
onGetTemplatesfilter?The Templates panel opens, or the user presses Refresh. Returns a promise of Template[].
onUploadAssetfile: File, ctx: UploadAssetContextThe editor stores a picture. Returns a promise of { url }.
resolveAssetUrlstored: string, ctx: { type }The editor loads a stored picture. Returns a promise of an address.
onCustomActionevent: ImageCustomActionEventA custom action starts or ends.
onBrandChangebrandId: stringThe editor opens with a brand kit, and the user switches the kit. See Brand kits.
onLicenseStatereport: LicenseStateReportThe license state changes.
renderLicenseBlockedstate: BlockedStateThe license check stops the editor. Returns your screen.

DOM events

<media-editor-image> sends these events. They bubble, and they cross shadow DOM boundaries.

Eventevent.detailWhen
exportThe exported FileThe user presses Save & Exit or Share.
closenoneThe user closes the editor, and after Save & Exit and Share.
templatesave{ template, saved }After each save of a template or a draft.
customactionImageCustomActionEventA custom action starts or ends.
brandchangeThe kit id, a stringThe editor opens with a brand kit, and the user switches the kit.

Callbacks that return a value, such as onSaveTemplate and onGetTemplates, have no DOM event. Pass them through the props property.

EditorExtras

The second argument of onExport.

FieldTypeDescription
email{ to: string; name: string }Present after Share: the address and the name that the user typed.
templateIDstringThe id of the defaultTemplate the editor was opened with. Absent when the editor was opened without one.

Every field is optional, and so is the whole object. Read each field with a check, such as extras?.email?.to.

templatesave detail

FieldTypeDescription
templateTemplate | nullThe template that was saved. null when the editor could not prepare the design.
savedbooleantrue when your onSaveTemplate promise resolved within 30 seconds.

Template

FieldTypeDescription
idstringA new UUID for each save.
scenestringThe design, as JSON text.
thumbUristringA preview picture: a data: URL, or the address from onUploadAsset.
sceneModestring'image'.
globalbooleanfalse.
schemaVersionnumberThe version of the scene format, 1.
canvasWidth, canvasHeightnumberThe page size in pixels.
draftbooleantrue for a draft.
brandKitIdstringThe id of the brand kit that was active when the design was saved. Left out when there was none.

UploadAssetContext

The second argument of onUploadAsset.

FieldTypeDescription
type'image' | 'thumbnail'A picture of the design, or the preview picture of a template.
itemIdstringThe id of the picture in the design.
mimeTypestringThe type of the file.
templateIdstringThe id of the template being saved.
sceneMode'image'The editor that asks.
suggestedPathstringA path you can use as the storage key.
source'template' | 'generated'A save, or a picture made or changed with AI.
capabilitystringFor source: 'generated': the AI feature.
producedBy{ capability, catalogId?, modelId?, providerId? }For source: 'generated': the feature and the model.
your fieldsstringEvery key of assetMetadata.

LicenseStateReport

The argument of onLicenseState. It never contains the license key.

FieldTypeDescription
stateLicenseGateState{ status: 'running', expiringAt?, insecureContext? } or { status: 'blocked', reason, message }. The type also names pending-online, which is no longer produced.
referencestringA line for your support team, for example running · 3f9a12cd · lm-prod-2026-09 · sdk 1.0.0 · 2026-09-21T09:41Z.
keyHashPrefixstringThe first 8 characters of a hash of the key. Empty when the key was refused in the browser.
kidstringThe id of the Layermetry key that signed your license key.
sdkVersionstringThe version of the package, for example 1.0.0.
hostnamestringThe host name of the page.
insecureContextbooleantrue on a plain http:// page that is not your own computer.
atnumberThe time of the report, in milliseconds since 1 January 1970.
stopIatnumberPresent only when a signed stop from Layermetry stopped the editor.

BlockedState, the argument of renderLicenseBlocked, is the blocked state: { status: 'blocked', reason, message }. See Error codes for every reason.

AI generation

Pass generation observers inside ai, rather than as editor event props.

import type { EditorAIConfig } from '@layermetry/media-editor';

export const ai: EditorAIConfig = {
  endpointUrl: '/api/ai', image: true,
  onGenerationError: (error, context) => {
    console.warn(error.code, error.providerError?.requestId, context.attemptId);
  },
  onGenerationEvent: (event) => {
    if (event.type === 'progress') console.info(event.percent, event.stage);
  },
};
HookArgumentsContract
onGenerationErrorSDK error, AIGenerationErrorContextObserves each failed attempt once.
onGenerationEventAIGenerationEventObserves start, progress and one terminal event.

Hooks observe only. Returning a value does not recover a generation. Throwing does not change its outcome.

Error context

The error context identifies the attempt without copying request content.

FieldTypeDescription
operationAIInputOperationThe requested operation.
attemptIdstringThe identifier for one logical attempt.
catalogId, modelId, revisionOptional stringThe submitted model identity and schema revision.
phaseconfigure, validate, submit, poll, download, read or applyThe stage reported for the failure.
outcomenot-accepted, accepted or unknownWhether work acceptance is known.
requestIdOptional stringThe server request identifier.
fieldPathOptional stringThe outgoing field key that caused refusal.

The context contains no prompt, source, body, header values or license key. The accompanying error can contain providerError; see Provider errors.

Lifecycle events

Every event contains type, attemptId and operation.

TypeOther fieldsWhen
startOptional catalogId, modelId, revisionA logical attempt starts.
progresspercent, stageA long-running job reports progress.
successOptional catalogId, modelId, requestIdGeneration returns a usable result.
failurecode, phase, optional requestIdGeneration fails.
cancelphaseGeneration is cancelled.

One attempt emits one start and one terminal success, failure or cancel. A success event confirms generation, not a later user choice to place a candidate.

Generated file receipt

The context of onUploadAsset includes producedBy for generated media.

FieldTypeDescription
capabilitystringThe operation that created the file.
catalogIdOptional stringYour model entry’s id on the models route.
modelIdOptional stringThe reported model name, or the requested model when no name was reported.
providerIdOptional stringThe classic provider object’s identifier.

An omitted identity field stays absent. These fields record identity; they do not prove that a provider applied each requested setting.

CustomActionEvent

FieldTypeDescription
actionIdstringThe action id.
statusstarted, done, failed, abortedThe run state.
errorOptional stringThe message for a failed run.
durationMsOptional numberThe elapsed time on every final event.

On this page