Experience Canvas Toolbar

Experience Canvas Toolbar

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.

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':

if (sdk.experiences.context.type === 'experience') {
  // Editing a full Experience
} else {
  // Editing a Fragment
}
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 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 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.
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 (sdk.experiences.experience.selection) — for example, to highlight a node your app is referencing.

Next steps