Skip to main content

Patterns

A common need is to share component layout between multiple compositions. Patterns let you do this by defining a pattern composition that can then be referenced by other compositions anywhere that the pattern's component type is allowed. For example, you could use a pattern to share a legal disclaimer, an author bio, or standard global header across many compositions.

Create pattern

There are two ways to create a pattern:

  • In the Canvas sidebar, click on the Pattern Library and then add a pattern of any type with the red (+) button.
  • When editing a composition, click the ... menu on any component within it and choose Convert to Pattern to turn that component and any of its children into a pattern.

Use pattern

You can use a pattern like a regular component by adding it to a composition in a slot. If patterns are available they will appear when you insert a component into a composition in the add to slot list.

Change a pattern

Once a pattern is referenced on a composition, the pattern's component(s) are shown but can't be edited. This is to prevent editing shared component data inadvertently.

To edit a pattern, which will change it everywhere it's referenced, you can:

  • Click the ... menu on a referenced pattern in a composition and choose Edit Pattern to open the pattern for editing.
  • Find the pattern in the Pattern Library and open it for editing.

Copy patterns

Sometimes you may wish to 'unlink' from a pattern and make a copy of its contents. This lets you make a copy of the pattern that can be changed without affecting the original pattern; the copy will no longer have any relation to the pattern. To do this from the composition editor, click a referenced pattern's ... menu and choose Copy Pattern. The copy will be expanded in place.

Limitations

There are some limitations of where and how you can use patterns that you should be aware of.

  • Creating a pattern from a component type, such as Personalization, Localization, or A/B Test, which inherits its allowed components from a parent slot isn't allowed. This is because you can't determine the components allowed in the pattern with no parent slot.
  • Patterns can't be added as children of an A/B Test or Localization.
  • You can't reference a pattern as the root component of a composition

Draft and published states in patterns

It can get a little confusing when editing patterns and compositions, especially when you're not ready to make changes live right away. Here's a rundown of how compositions are fetched with draft or published compositions and patterns.

Fetch composition (draft)Fetch composition (published)
Draft pattern & draft compositionReturns both in draft stateReturns a 404
Draft pattern & published compositionReturns both in latest draft stateReturns composition but “pattern not found” error for pattern
Published pattern & published compositionReturns both in latest draft stateReturns both in published state
Changed pattern & published compositionReturns both in latest draft stateReturns composition in published state, pattern in last published state