Skip to main content

Interface: IHeadlessEditor

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:62

Public API of the headless editor.

IHeadlessEditor

Example​

const editor = document.querySelector('au-headless-editor') as IHeadlessEditor;

// Initialization
await editor.init(config);

// Changing the active product
const product = await editor.openProduct({ productId: 12345 });

// Selecting a variant
const variant = await editor.setVariantById(67890);

// Triggering the add-to-cart event
const lineItem = await editor.addToCart();

Extends​

  • IWorkflowElement

Properties​

injector?​

optional injector?: Injector

Defined in: workflow-elements-types/workflow-element-base/workflow-element.d.ts:7

Inherited from​

IWorkflowElement.injector

Methods​

addToCart()​

addToCart(): Promise<LineItem>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:306

Saves the design and triggers the add-to-cart event

Returns​

Promise<LineItem>

A cart line item containing product information

Throws​

If saving the design fails

Example​

const lineItem = await editor.addToCart();
console.log(lineItem.productId, lineItem.quantity);

applyToggleToCurrentDesign()​

applyToggleToCurrentDesign(toggleId, toggleParamLabel, toggleParamValue?): Promise<ToggleSet>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:707

Applies a specific toggle value to the current design.

Parameters​

toggleId​

string

The ID of the Toggle to apply. Obtain it from getCurrentDesignToggleSet().

toggleParamLabel​

string

The label of the parameter value to apply (e.g., "Red", "Roboto Bold"). Must match one of the label values in the Toggle's params array.

toggleParamValue?​

string

Optional custom value for TEXT toggles. If provided, overrides the predefined text content of the selected parameter.

Returns​

Promise<ToggleSet>

A promise resolving to the updated Toggle Set after applying the toggle.

Throws​

If the toggle or parameter is not found, or applying fails.

Examples​

// Apply a color toggle
const toggleSet = await editor.getCurrentDesignToggleSet();
const colorToggle = toggleSet.toggles.find(t => t.name === "Primary Color");

await editor.applyToggleToCurrentDesign(colorToggle.id, "Red");
// Apply a font toggle
const fontToggle = toggleSet.toggles.find(t => t.name === "Heading Font");
await editor.applyToggleToCurrentDesign(fontToggle.id, "Roboto Bold");
// Apply a TEXT toggle with custom user input
const textToggle = toggleSet.toggles.find(t => t.name === "Custom Message");
await editor.applyToggleToCurrentDesign(
  textToggle.id,
  "Default Message",
  "Happy Birthday, John!" // custom text overrides the default
);

getChoices()​

getChoices(): Choice<string | string[]>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:102

Returns the currently selected product options

Returns​

Choice<string | string[]>

Current selections or undefined if no product is loaded

Example​

const choices = editor.getChoices();
console.log(choices); // { "1": "red", "2": ["small", "medium"] }

Overrides​

IWorkflowElement.getChoices

getChoicesValues()​

getChoicesValues(): ChoiceValue

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:114

Returns the values of the selected options (option names and values)

Returns​

ChoiceValue

An object with option names and their values

Example​

const values = editor.getChoicesValues();
console.log(values); // { "Color": "Red", "Size": ["Small", "Medium"] }

Overrides​

IWorkflowElement.getChoicesValues

getCurrentDesignPermanentPreview()​

getCurrentDesignPermanentPreview(surface?): Promise<string>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:405

Returns a single permanent preview URL for the specified surface of the current design.

Parameters​

surface?​

ISurfaceOptions

Surface selection options (surfaceIndex, surfaceId, or surfaceName). If not specified, the current active surface is used.

Returns​

Promise<string>

A promise resolving to the permanent preview URL, or null if generation fails.

Throws​

If saving the design or generating the preview fails.

Example​

// Get permanent preview for the current surface
const previewUrl = await editor.getCurrentDesignPermanentPreview();

// Get permanent preview for a specific surface by index
const previewUrl = await editor.getCurrentDesignPermanentPreview({ surfaceIndex: 0 });

// Get permanent preview for a specific surface by id
const previewUrl = await editor.getCurrentDesignPermanentPreview({ surfaceId: "a6ab7678-a673-4a1d-95dc-d44e22aaf86e" });

// Get permanent preview for a specific surface by name
const previewUrl = await editor.getCurrentDesignPermanentPreview({ surfaceName: "Front" });

console.log(previewUrl); // "https://api.customerscanvashub.com/..."

getCurrentDesignPermanentPreviews()​

getCurrentDesignPermanentPreviews(surface?): Promise<string[]>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:430

Returns an array of permanent preview URLs for the specified surface of the current design.

Parameters​

surface?​

ISurfaceOptions

Surface selection options (surfaceIndex, surfaceId, or surfaceName). If not specified, previews are generated for all surfaces.

Returns​

Promise<string[]>

A promise resolving to an array of permanent preview URLs.

Throws​

If saving the design or generating the previews fails.

Example​

// Get all permanent previews for the current surface
const previewUrls = await editor.getCurrentDesignPermanentPreviews();
previewUrls.forEach(url => console.log(url));

// Get permanent previews for a specific surface
const previewUrls = await editor.getCurrentDesignPermanentPreviews({ surfaceIndex: 0 });

// Use case: Generate thumbnails for all mockups on a surface
const thumbnails = await editor.getCurrentDesignPermanentPreviews({ surfaceName: "Front" });
thumbnails.forEach((url, index) => {
  console.log(`Mockup ${index + 1}: ${url}`);
});

getCurrentDesignPrintProductModel()​

getCurrentDesignPrintProductModel(): PrintProduct

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:782

Obtain full print product model.

Returns​

PrintProduct

Print product model.

Throws​

Example​

const printProduct = editor.getCurrentDesignPrintProductModel();
console.log(printProduct);

getCurrentDesignTempPreview()​

getCurrentDesignTempPreview(surface?): Promise<string>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:455

Returns a temporary preview base64 URL for the specified surface of the current design.

Parameters​

surface?​

ISurfaceOptions

Surface selection options (surfaceIndex, surfaceId, or surfaceName). If not specified, the current active surface is used.

Returns​

Promise<string>

A promise resolving to the temporary preview URL as a data URL (base64).

Throws​

If generating the preview fails.

Example​

// Get temporary preview for the current surface
const tempPreviewUrl = await editor.getCurrentDesignTempPreview();
document.getElementById('preview').src = tempPreviewUrl; // data:image/png;base64,...

// Get temporary preview for a specific surface
const tempPreviewUrl = await editor.getCurrentDesignTempPreview({ surfaceIndex: 0 });

// Use case: Real-time preview update without saving
async function updatePreview() {
  const preview = await editor.getCurrentDesignTempPreview({ surfaceName: "Back" });
  displayPreview(preview);
}

getCurrentDesignTempPreviews()​

getCurrentDesignTempPreviews(): Promise<string[]>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:480

Returns an array of temporary preview base64 URLs for all surfaces of the current design.

Returns​

Promise<string[]>

A promise resolving to an array of temporary preview URLs (one per surface).

Throws​

If generating the previews fails.

Example​

// Get temporary previews for all surfaces
const allPreviews = await editor.getCurrentDesignTempPreviews();
allPreviews.forEach((url, index) => {
  console.log(`Surface ${index}: ${url}`);
});

// Use case: Generate a thumbnail gallery for all surfaces
const gallery = document.getElementById('gallery');
const previews = await editor.getCurrentDesignTempPreviews();
previews.forEach(previewUrl => {
  const img = document.createElement('img');
  img.src = previewUrl;
  gallery.appendChild(img);
});

getCurrentDesignToggleSet()​

getCurrentDesignToggleSet(): Promise<ToggleSet>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:668

Returns the Toggle Set for the current design.

Returns​

Promise<ToggleSet>

A promise resolving to the Toggle Set of the current design.

Throws​

If the design has no Toggle Set or loading fails.

Examples​

// Get the Toggle Set and inspect available toggles
const toggleSet = await editor.getCurrentDesignToggleSet();

toggleSet.toggles.forEach(toggle => {
  console.log(`Toggle: ${toggle.name} (${toggle.type})`);
  toggle.params.forEach(param => {
    console.log(`Label - ${param.label}`);
  });
});
// Build a color palette UI from a COLOR toggle
const toggleSet = await editor.getCurrentDesignToggleSet();
const colorToggle = toggleSet.toggles.find(t => t.type === 'color');

if (colorToggle) {
  colorToggle.params.forEach(colorParam => {
    renderColorButton(colorParam.label, colorParam.previewColor, () => {
      editor.applyToggleToCurrentDesign(colorToggle.id, colorParam.label);
    });
  });
}

getCurrentDesignVariant()​

getCurrentDesignVariant(): DesignVariant

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:252

Returns the current design variant

Returns​

DesignVariant

The current design variant

Example​

const designVariant = editor.getCurrentDesignVariant();

getCurrentProduct()​

getCurrentProduct(): Product

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:155

Returns the currently loaded product

Returns​

Product

The current product

Throws​

If no product is loaded

Example​

const product = editor.getCurrentProduct();
console.log(product.name);

getCurrentSurface()​

getCurrentSurface(): Surface

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:293

Returns the currently active surface

Returns​

Surface

The current surface

Example​

const surface = editor.getCurrentSurface();
console.log(surface.name);

getCurrentSurfaceBarcodeItems()​

getCurrentSurfaceBarcodeItems(options?): IBarcodeItem<BarcodeSubType, BarcodeFormat>[]

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:590

Returns a list of QR code and barcode items on the current surface of the active design.

Parameters​

options?​

IBarcodeOptions

Optional filtering options. Use containerId to filter items within a specific container.

Returns​

IBarcodeItem<BarcodeSubType, BarcodeFormat>[]

An array of QR code/barcode items enriched with schema data.

Example​

// Get all QR codes and barcodes on the current surface
const qrCodes = editor.getCurrentSurfaceBarcodeItems();

// Get QR codes filtered by a specific container
const containerQrCodes = editor.getCurrentSurfaceBarcodeItems({ containerId: "container-123" });

// Example: Find a specific VCard QR code and read its structured data
const vCardQr = qrCodes.find(qr => qr.subType === BarcodeSubType.V_CARD && qr.name === "ContactQR");
if (vCardQr && vCardQr.data.firstName) {
  console.log(`Found contact: ${vCardQr.data.firstName} ${vCardQr.data.lastName}`);
}

getCurrentSurfaceContainerSettings()​

getCurrentSurfaceContainerSettings(): Container

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:719

Returns the container settings of the current surface.

Returns​

Container

Current surface container settings

Example​

const container = editor.getCurrentSurfaceContainerSettings();
console.log(container);

getCurrentSurfaceImagePlaceholderItems()​

getCurrentSurfaceImagePlaceholderItems(options?): PlaceholderItem[]

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:354

Returns a list of image placeholders for the current surface of the active design.

Parameters​

options?​

IPlaceholderOptions

Optional filtering options. Use containerId to filter placeholders within a specific container (similar to text item filtering).

Returns​

PlaceholderItem[]

An array of image placeholder items enriched with schema data.

Example​

// Get all image placeholders on the current surface
const placeholders = editor.getCurrentSurfaceImagePlaceholderItems();

// Get placeholders filtered by a specific container
const containerPlaceholders = editor.getCurrentSurfaceImagePlaceholderItems({ containerId: "container-123" });

console.log(placeholders[0].schemaDefinition); // { title: "...", prompt: "...", required: true, ... }

getCurrentSurfaces()​

getCurrentSurfaces(): Surface[]

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:281

Returns all surfaces of the current product

Returns​

Surface[]

An array of all surfaces

Example​

const surfaces = editor.getCurrentSurfaces();
surfaces.forEach(s => console.log(s.name));

getCurrentSurfaceTextItems()​

getCurrentSurfaceTextItems(options?): TextItem[]

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:335

Returns the text items of the current surface along with their schemas

Parameters​

options?​

ITextItemOptions

Text item filtering options (optional)

Returns​

TextItem[]

An array of text items

Example​

const textItems = editor.getCurrentSurfaceTextItems();
textItems.forEach(item => console.log(item.text));

// With filtering
const filtered = editor.getCurrentSurfaceTextItems({ schemaName: "Title" });

getCurrentVariant()​

getCurrentVariant(): ProductVariant

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:207

Returns the currently selected product variant

Returns​

ProductVariant

The current product variant

Throws​

If no variant is selected

Example​

const variant = editor.getCurrentVariant();
console.log(variant.sku);

getImagePlaceholderAllowedImages()​

getImagePlaceholderAllowedImages(placeholder, includeSubfolders?, skip?, take?): Promise<Image[]>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:379

Retrieves a paginated list of allowed images that can be applied to a specific image placeholder.

Parameters​

placeholder​

PlaceholderItem

The PlaceholderItem.

includeSubfolders?​

boolean

If true, the search will include images from nested subfolders. Defaults to false.

skip?​

number

The number of items to skip for pagination (offset).

take?​

number

The maximum number of items to return (limit).

Returns​

Promise<Image[]>

A promise resolving to an array of Image objects containing metadata and preview URLs.

Example​

const placeholders = editor.getCurrentSurfaceImagePlaceholderItems();
const targetPlaceholder = placeholders.find(p => p.name === "MainImagePlaceholder");

if (targetPlaceholder) {
  // Fetch the first 10 allowed images, including subfolders
  const images = await editor.getImagePlaceholderAllowedImages(targetPlaceholder, true, 0, 10);

  images.forEach(img => {
    console.log(img.name, img.previews["headless-editor-400-400"]);
  });
}

getLineItem()​

getLineItem(): Promise<LineItem>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:319

Saves the design and returns a cart line item without adding it to the cart

Returns​

Promise<LineItem>

A cart line item containing product information

Throws​

If saving the design fails

Example​

const lineItem = await editor.getLineItem();
console.log(lineItem.properties);

init()​

init(configuration, forceReset?): Promise<boolean>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:79

Initializes the editor with the specified configuration

Parameters​

configuration​

IHeadlessEditorInitArgs

Configuration for initializing the editor

forceReset?​

boolean

Forces a state reset (optional)

Returns​

Promise<boolean>

true if initialization is successful, false if it fails

Throws​

If the configuration is invalid

Example​

const success = await editor.init({
  input: { productId: 12345 },
  integration: { tenantId: 'tenant', token: 'token', user: { id: 'user' } }
});

Overrides​

IWorkflowElement.init

openProduct()​

openProduct(input): Promise<Product>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:142

Opens a product in the editor by productId or productReferenceId

Parameters​

input​

OpenProductInput

Input data for opening the product

Returns​

Promise<Product>

The loaded product

Throws​

If the product is not found or a loading error occurs

Example​

const product = await editor.openProduct({ productId: 12345 });
// or
const product = await editor.openProduct({ productReferenceId: "external-ref" });

resetImagePlaceholderContent()​

resetImagePlaceholderContent(targetItemId): Promise<void>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:769

Clears the image content for a specific image placeholder.

Parameters​

targetItemId​

string

The ID of the image placeholder to update.

Returns​

Promise<void>

A promise that resolves when the image has been successfully applied.

Throws​

If the placeholder is not found, the asset is invalid, or an error occurs during the update.

Example​

// Get image placeholders
const placeholders = editor.getCurrentSurfaceImagePlaceholderItems();
const mainImagePlaceholder = placeholders.find(p => p.name === "MainImage");

if (mainImagePlaceholder) {
  // Reset image content
  await editor.resetImagePlaceholderContent(mainImagePlaceholder.id);
}

setBarcodeItemContent()​

setBarcodeItemContent<SubType, Format>(targetItemId, subType, format, content): void

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:633

Updates the content and configuration of a specific QR code or barcode item on the current surface.

Type Parameters​

SubType​

SubType extends BarcodeSubType

Format​

Format extends BarcodeFormat

Parameters​

targetItemId​

string

The ID of the QR code/barcode item to update.

subType​

SubType

The specific content subtype of the code (e.g., BarcodeSubType.V_CARD, BarcodeSubType.URL).

format​

Format

The barcode/QR code format (e.g., BarcodeFormat.QR_CODE, BarcodeFormat.EAN_13).

content​

BarcodeData<SubType, Format>

The data payload. Its structure is strictly inferred from the subType and format generics.

Returns​

void

Throws​

If the target item is not found or the provided data is invalid.

Example​

// Example 1: Update a simple URL QR code
const urlQr = editor.getCurrentSurfaceBarcodeItems().find(qr => qr.name === "WebsiteQR");
if (urlQr) {
  editor.setBarcodeItemContent(
    urlQr.id,
    BarcodeSubType.URL,
    BarcodeFormat.QR_CODE,
    { value: "https://example.com" }
  );
}

// Example 2: Update a complex VCard QR code with structured data
const contactQr = editor.getCurrentSurfaceBarcodeItems().find(qr => qr.name === "ContactQR");
if (contactQr) {
  editor.setBarcodeItemContent(
    contactQr.id,
    BarcodeSubType.V_CARD,
    BarcodeFormat.QR_CODE,
    {
      firstName: "Test first name",
      lastName: "Test last name",
      organization: "Aurigma",
      email: "test@aurigma.com",
      mobilePhone: "04805718146",
      url: "https://customerscanvashub.com"
    }
  );
}

setChoices()​

setChoices(choices): Promise<ProductVariant>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:127

Sets the selected product options and returns the corresponding variant

Parameters​

choices​

Choice<string | string[]>

An object with option selections (key is option ID, value is value ID)

Returns​

Promise<ProductVariant>

The product variant matching the selected options

Throws​

If the variant is not found or an error occurs

Example​

const variant = await editor.setChoices({ "1": 101, "2": [201, 202] });

Overrides​

IWorkflowElement.setChoices

setCurrentDesignPrintProductModel()​

setCurrentDesignPrintProductModel(product): void

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:799

Update full print product model.

Parameters​

product​

PrintProduct

Print product model.

Returns​

void

Throws​

Example​

const printProduct = editor.getCurrentDesignPrintProductModel();

product.surfaces.get(0).containers.get(1).items.get(6).text = '<p><span>HI!</span></p>';

editor.setCurrentDesignPrintProductModel();

setCurrentDesignVariant()​

setCurrentDesignVariant(id): Promise<DesignVariant>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:241

Sets the design variant by its ID

Parameters​

id​

string

The design variant ID

Returns​

Promise<DesignVariant>

The selected design variant

Throws​

If the design variant is not found

Example​

const designVariant = await editor.setCurrentDesignVariant("design-id-123");

setCurrentSurface()​

setCurrentSurface(options): Promise<Surface>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:269

Sets the current surface by index, ID, or name

Parameters​

options​

ISurfaceOptions

Surface selection options (surfaceIndex, surfaceId, or surfaceName)

Returns​

Promise<Surface>

The selected surface

Throws​

If the surface is not found

Example​

const surface = await editor.setCurrentSurface({ surfaceIndex: 0 });
// or
const surface = await editor.setCurrentSurface({ surfaceId: "surface-1" });
// or
const surface = await editor.setCurrentSurface({ surfaceName: "Front" });

setImagePlaceholderContentByAssetId()​

setImagePlaceholderContentByAssetId(targetItemId, assetId): Promise<void>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:530

Sets the image content for a specific image placeholder using an asset ID from the asset storage.

Parameters​

targetItemId​

string

The ID of the image placeholder to update.

assetId​

string

The ID of the image asset from the asset storage.

Returns​

Promise<void>

A promise that resolves when the image has been successfully applied.

Throws​

If the placeholder is not found, the asset is invalid, or an error occurs during the update.

Example​

// Get image placeholders
const placeholders = editor.getCurrentSurfaceImagePlaceholderItems();
const mainImagePlaceholder = placeholders.find(p => p.name === "MainImage");

if (mainImagePlaceholder) {
  // Get allowed images for this placeholder
  const allowedImages = await editor.getImagePlaceholderAllowedImages(mainImagePlaceholder, true, 0, 10);

  if (allowedImages.length > 0) {
    // Apply the first allowed image to the placeholder
    await editor.setImagePlaceholderContentByAssetId(mainImagePlaceholder.id, allowedImages[0].id);
  }
}

setLoadingState()​

setLoadingState(params): void

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:228

Manually sets the loading status

Parameters​

params​

ISetLoadingStateParams

Returns​

void

Example​

editor.setLoadingState({ state: LoadingState.LOADING, errorText: null });
editor.setLoadingState({ state: LoadingState.FAILED, errorText: "Loading error" });

setTextItemContent()​

setTextItemContent(targetItemId, content): Promise<void>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:504

Sets the text content for a specific text item on the current surface.

Parameters​

targetItemId​

string

The ID of the text item to update.

content​

string

The plain text content to set.

Returns​

Promise<void>

A promise that resolves when the content has been successfully applied.

Throws​

If the text item is not found or an error occurs during the update.

Example​

// Get all text items on the current surface
const textItems = editor.getCurrentSurfaceTextItems();
const titleItem = textItems.find(item => item.name === "Title");

if (titleItem) {
  // Set new text content
  await editor.setTextItemContent(titleItem.id, "New Title Text");
}

// Or update by ID directly
await editor.setTextItemContent("text-item-123", "Updated content");

setVariantById()​

setVariantById(id): Promise<ProductVariant>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:168

Sets the product variant by its ID

Parameters​

id​

number

The product variant ID

Returns​

Promise<ProductVariant>

The selected product variant

Throws​

If the variant is not found

Example​

const variant = await editor.setVariantById(67890);

setVariantBySku()​

setVariantBySku(sku): Promise<ProductVariant>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:194

Sets the product variant by its SKU

Parameters​

sku​

string

The product variant SKU

Returns​

Promise<ProductVariant>

The selected product variant

Throws​

If the variant is not found

Example​

const variant = await editor.setVariantBySku("SKU-12345");

setVariantByUid()​

setVariantByUid(uid): Promise<ProductVariant>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:181

Sets the product variant by its UID

Parameters​

uid​

string

The product variant UID

Returns​

Promise<ProductVariant>

The selected product variant

Throws​

If the variant is not found

Example​

const variant = await editor.setVariantByUid("variant-uid-123");

toggleLoadingState()​

toggleLoadingState(): void

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:216

Toggles the loading state (loading/loaded)

Returns​

void

Example​

editor.toggleLoadingState(); // Toggles between LOADING and LOADED

update()​

update(configuration): void

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:90

Updates editor resources or settings without full reinitialization

Parameters​

configuration​

IHeadlessEditorInitArgs

Updated configuration (only resources or settings)

Returns​

void

Example​

editor.update({ resources: { fonts: [...] } });

Overrides​

IWorkflowElement.update

updateCurrentSurfaceContainerSettings()​

updateCurrentSurfaceContainerSettings(updatedContainer): Promise<Container>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:749

Applies a specific container settings value to the current surface.

Parameters​

updatedContainer​

Partial<Container>

Updated container. Obtain it from getCurrentSurfaceContainerSettings().

Returns​

Promise<Container>

A promise resolving to the updated container.

Throws​

If the container or parameter is not found, or applying fails.

Example​

const container = editor.getCurrentSurfaceContainerSettings();
container.type = 'Colorless';
container.visible = true;
container.visualization = {
   type: "TextureVisualization",
   opacity: 0,
   enableGlareEffect: false,
   textureName: "texture_2x2",
   textureSource: {
       id: "66def9be3e121d0c93632bbf",
       width: 2480,
       height: 3508,
       pageIndex: 0
   },
   color: null
};

await editor.updateCurrentSurfaceContainerSettings(container);

uploadImagePlaceholderContent()​

uploadImagePlaceholderContent(targetItemId, file): Promise<void>

Defined in: workflow-elements/headless-editor/app/interfaces/configuration.interface.d.ts:568

Uploads a file and sets it as the content for a specific image placeholder.

Parameters​

targetItemId​

string

The ID of the image placeholder to update.

file​

File

The file to upload and apply.

Returns​

Promise<void>

A promise that resolves when the file has been uploaded and applied successfully.

Throws​

If the placeholder is not found, the file is invalid, or an error occurs during upload or application.

Example​

// Example 1: Upload from file input
const fileInput = document.getElementById('imageUpload') as HTMLInputElement;
const file = fileInput.files[0];

if (file) {
  const placeholders = editor.getCurrentSurfaceImagePlaceholderItems();
  const placeholder = placeholders.find(p => p.name === "UserPhoto");

  if (placeholder) {
    await editor.uploadImagePlaceholderContent(placeholder.id, file);
  }
}

// Example 2: Upload from drag-and-drop
document.addEventListener('drop', async (event) => {
  event.preventDefault();
  const file = event.dataTransfer.files[0];

  const placeholders = editor.getCurrentSurfaceImagePlaceholderItems();
  const placeholder = placeholders[0]; // Get first placeholder

  if (placeholder && file) {
    await editor.uploadImagePlaceholderContent(placeholder.id, file);
  }
});
Was this page helpful?