Settings

Pass settings to init() through the settings property of the configuration. The Headless Editor settings control the built-in design viewer and its states. All settings are optional.

import type { IHeadlessEditorSettings } from "@aurigma/workflow-elements/headless-editor";

const settings: IHeadlessEditorSettings = {
  viewer: {
    enabled: true,
    itemManipulationEnabled: true,
  },
  viewerStates: {
    preInitEnabled: true,
    loadingEnabled: true,
    failedEnabled: true,
  },
};

viewer

Controls the built-in design viewer.

viewer.enabled

• Type: boolean
• Default: not set

Turns the design viewer on or off. Set it to true to show the design viewer, or leave it unset to keep the editor fully headless. All other editor functionality is exposed through JavaScript regardless of this setting.

viewer.itemManipulationEnabled

• Type: boolean

Allows the viewer to expose design item manipulation, such as selecting items on the canvas.

viewerStates

Controls the built-in state overlays: the placeholder shown before initialization, the loading shimmer, and the failure message. Each state appears only when its flag is true.

viewerStates.preInitEnabled

• Type: boolean

Shows or hides the placeholder displayed before the editor finishes initialization.

viewerStates.loadingEnabled

• Type: boolean

Shows or hides the loading shimmer.

viewerStates.failedEnabled

• Type: boolean

Shows or hides the built-in failure message.

Disabling a state only hides the visual representation of that state. Subscribe to load and error and render your own replacement UI when you disable a built-in state. See Viewer settings and appearance.

Update settings after initialization

Call update() to change settings without reinitializing the editor.

editor.update({
  settings: {
    viewer: {
      itemManipulationEnabled: false,
    },
  },
});

Reference

• IHeadlessEditorSettings — the settings type.
• IHeadlessEditorInitArgs — the initialization configuration.
• CSS variables — style the viewer states.
• IHeadlessEditor — the component method reference.