---
title: "Read and apply toggle sets | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/headless-editor/toggle-sets/"
---

# Read and apply toggle sets

> Read a toggle set that is configured in the current design, and apply its toggles to switch style, visibility, text, or font values from your own controls.

## Prerequisites

- A toggle set configured in the design. See [Creating toggle sets](https://customerscanvas.com/docs/hub/admin-guide/manage-assets/documents/creating-toggle-sets.md).
- A running Headless Editor with a design loaded. See [Build a Headless Editor customization page](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/headless-editor/quick-start.md).

## Get the toggle set

Call `getCurrentDesignToggleSet()` to retrieve the toggle set of the current design.

```typescript
import type { ToggleSet } from "@aurigma/workflow-elements/headless-editor";

const toggleSet: ToggleSet = await editor.getCurrentDesignToggleSet();

for (const toggle of toggleSet.toggles) {
  console.log(`Toggle: ${toggle.name} (${toggle.type})`);

  for (const param of toggle.params) {
    console.log(`  - ${param.label}`);
  }
}
```

Each returned `toggle` has a `type` — `"text"`, `"color"`, `"font"`, or `"visibility"` — and a `params` array with the available values.

## Apply a toggle

Apply a toggle by its ID and the label of the value to use. `applyToggleToCurrentDesign()` returns the updated `ToggleSet`.

```typescript
const colorToggle = toggleSet.toggles.find(toggle => toggle.type === "color");

if (colorToggle) {
  await editor.applyToggleToCurrentDesign(
    colorToggle.id,
    colorToggle.params[0].label,
  );
}
```

For `"color"`, `"font"`, and `"visibility"` toggles, pass only the toggle ID and the value label.

## Apply custom text to a text toggle

When a `text` toggle accepts an arbitrary value, pass the text as the third argument.

```typescript
const textToggle = toggleSet.toggles.find(toggle => toggle.name === "Custom Greeting");

if (textToggle) {
  await editor.applyToggleToCurrentDesign(
    textToggle.id,
    textToggle.params[0].label,
    "Happy Birthday, Alex!",
  );
}
```

The third argument overrides the predefined text of the matched parameter.

## Next steps

- ToggleSet — the toggle set model.
- Toggle — the toggle model.
- ToggleType — the toggle type values.
- ToggleParamsMap — the parameter shapes per toggle type.