---
title: "Settings | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/headless-editor/settings/"
---

# 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.

```typescript
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](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/headless-editor/viewer-settings.md).

## Update settings after initialization

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

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

## Reference

- IHeadlessEditorSettings — the settings type.
- IHeadlessEditorInitArgs — the initialization configuration.
- [CSS variables](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/headless-editor/css-variables.md) — style the viewer states.
- IHeadlessEditor — the component method reference.