Components in rich text

Add and configure component instances inside rich text elements and CMS rich text fields.

You can add component instances to rich text elements on the canvas and rich text fields in the CMS. This lets you reuse site components, shared Library components, and code components within long-form content while configuring each instance with its own component property values.

For example, you could:

• add a testimonial to a case study
• add a CTA (Call To Action) to a landing page
• add a form to a location page

Roles and permissions

What you can do with components in rich text depends on your site role.

Content editors can still add other supported content where they have permission to edit the rich text. Members with custom roles can perform actions allowed by their existing role permissions. Publishing components in rich text follows each teammate's existing publishing permissions.

Add a component to a rich text element on the canvas

To add a component to a rich text element on the canvas:

1. Double-click the rich text element on the canvas
2. Place your cursor on a new line
3. Press / (forward slash) on your keyboard or click the "plus" icon
4. Choose Component
5. Choose the component you want to add

When you add a component, the Properties panel for that instance opens automatically on the right. If the component has properties set, you can configure them to create a unique instance.

Learn more about component properties.

Add a component to a rich text field in a CMS Collection item

To add a component to a rich text field in a Collection item:

1. Click CMS in the top bar
2. Choose or create a Collection item that contains a rich text field
3. Click the rich text field
4. Place your cursor on a new line
5. Press / (forward slash) on your keyboard or click the "plus" icon
6. Choose Component
7. Choose the component you want to add

When you add a component, a Properties modal for that instance opens automatically. If the component has properties set, you can configure them to create a unique instance.

Learn more about component properties.

Update a component instance's properties

If a component has properties set, you can configure them to create a unique instance.

Configure component properties on the canvas

To update a component's properties on the canvas:

1. Double-click the rich text element
2. Click the component to open the Properties panel
3. Update the properties

Configure component properties in the CMS

To update a component's properties in the CMS:

1. Click CMS in the top bar
2. Open the Collection item
3. Click the component inside the rich text field
4. Click the "wrench" icon to open the Properties modal
5. Update the properties

Move a component instance inside a rich text element or rich text field

You can move a component instance inside a rich text element or CMS rich text field to change where it appears in relation to other content.

Move an instance inside a static rich text element

To move a component instance inside a static rich text element (a rich text element not connected to a CMS Collection):

1. If you're currently editing the rich text element, press Esc on your keyboard
2. Click and drag the component instance on the canvas
3. Drop it to reposition

Move an instance inside a dynamic rich text element

You can't drag and drop elements inside a dynamic rich text element (a rich text element connected to a CMS Collection). Instead, cut and paste the component instance to reposition it:

1. Double-click the rich text element on the canvas
2. Click the component to select it
3. Press Cmd/Ctrl + X on your keyboard
4. Place your cursor on a new line
5. Press Cmd/Ctrl + V on your keyboard

When you cut and paste an instance, the instance retains its property values.

Move an instance inside a CMS rich text field

You can't drag and drop elements inside a CMS rich text field. Instead, cut and paste the component instance to reposition it:

1. Click CMS in the top bar
2. Open the Collection item
3. Click the component inside the rich text field
4. Press Cmd/Ctrl + X on your keyboard
5. Place your cursor on a new line
6. Press Cmd/Ctrl + V on your keyboard

When you cut and paste an instance, the instance retains its property values.

Delete a component instance inside a rich text element or rich text field

If you'd like to remove a component instance from a rich text element, you can delete it.

Delete an instance inside a rich text element on the canvas

To delete a component instance from a rich text element:

1. Double-click the rich text element on the canvas
2. Click the component to select it
3. Press ⌫ or Del on your keyboard

Delete an instance inside a CMS rich text field

To delete a component instance from a rich text field in the CMS:

1. Click CMS in the top bar
2. Open the Collection item
3. Click the component inside the rich text field
4. Press ⌫ or Del on your keyboard

Localize components in rich text

Component instances added to rich text in your site's primary locale are inherited by secondary locales. You can update a component instance's properties in secondary locales to localize it or use a visibility prop to hide it.

You can't add component instances in rich text in a secondary locale.

Components in rich text on page branches

You can add, update, move, and delete component instances inside static rich text elements (rich text elements not connected to a CMS Collection) on a page branch.

Component instances inside dynamic rich text elements (rich text elements connected to a CMS Collection) are read-only on page branches. Existing instances appear on the branch, but you can't add, move, or delete them or update their properties.

To make changes to a component instance inside dynamic rich text, return to the main version of the page.

Publish a CMS Collection item containing components

When you publish an individual Collection item that contains component instances, the instances use the version of the main component from your site's most recent full-site publish.

Publishing an individual Collection item doesn't publish changes made to the main component. If you update the main component, complete a full-site publish to update its instances on your live site.

If the main component has never been included in a full-site publish, its instances won't appear on the live site when you publish the Collection item individually.

Limitations

• You can't add a component that contains a Collection list to rich text
• You can't add a Collection list to a component if an instance is used in rich text
• You can't populate component slots within rich text
• You can't add a component to a rich text property on another component
• You can't connect a component instance's properties to CMS fields
• You can't unlink a component instance inside rich text
• You can't edit the main component from within rich text