> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://contentful.com/developers/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://contentful.com/developers/docs/_mcp/server.

# Experience Canvas Toolbar

> Experience Canvas Toolbar | Experience Canvas Toolbar location | Fragment canvas | Experience context | Content vs design properties | Data Assembly

The Experience Canvas Toolbar is an app location that lets your app render inside the experience canvas and fragment canvas toolbar in Experience Orchestration. This page explains the concepts you need before writing code against it — for method signatures, see [`sdk.experiences` in the App SDK reference](/extensibility/app-framework/experience-canvas-toolbar-sdk-reference#experiences).

## One location, two editing contexts

Apps installed to `locations.LOCATION_EXPERIENCE_TOOLBAR` render in the toolbar for **both** the experience canvas and the fragment canvas — there is a single location constant.

To identify which editor your app is running inside, read `sdk.experiences.context.type`, which is `'experience'` or `'fragment'`:

```javascript
if (sdk.experiences.context.type === 'experience') {
  // Editing a full Experience
} else {
  // Editing a Fragment
}
```

> **Info**
>
> The type also accepts `'experienceFragment'`, reserved for an upcoming rename of the Fragment entity. The host does not emit it yet — treat any non-`'experience'` value as a fragment, as in the example above.

Your app can also react to context changes without a page reload — for example, when an editor navigates from a fragment into the experience that contains it. See [Getting the experience context](/extensibility/app-framework/experience-canvas-toolbar-sdk-reference#experiences) in the App SDK reference for the full context and change-notification API.

## Content vs. design properties

Every node in an experience or fragment separates **content** from **design**, and each has a different update path:

* **Content** is written through the node-scoped [Data Assembly](/extensibility/app-framework/experience-canvas-toolbar-sdk-reference#data-assembly) parameter API — `dataAssembly.setParameterValue()` and `dataAssembly.setParameterValues()`. There is no content-property setter on a node.
* **Design** properties (layout, spacing, and similar visual settings) are written with `node.setDesignProperty()`.
* `node.getProperties()` is **read-only** — it returns descriptors for inspection, not a channel for writing content or design values.

> **Info**
>
> The distinction between content and design can be confusing. Use Data Assembly to change a node's content, and property setters to configure its design.

## Selecting and highlighting nodes

The toolbar can read and drive the editor's canvas selection through the [Selection API](/extensibility/app-framework/experience-canvas-toolbar-sdk-reference#selection-api) (`sdk.experiences.experience.selection`) — for example, to highlight a node your app is referencing.

## Next steps

* [`sdk.experiences` reference](/extensibility/app-framework/experience-canvas-toolbar-sdk-reference#experiences) — full method signatures for the Experience API, Selection API, and Data Assembly.