Manage a Symbol

Note: Studio is currently available as part of an Early Access Program and may not be accessible to all users. For more information or to request access, contact our support team.

A Symbol is a reusable UI block in Studio, created from a composition or section on the canvas. Symbols promote consistency across pages. When you update a symbol, all its instances reflect the change automatically.

Think of symbols as the building blocks of your design system within Studio:

For example, if you create a “Card Section” with an image, title, and button, and you want to reuse it across several pages, you can convert that section into a symbol. When you later change the button color or text alignment in the original symbol, every page using that card updates automatically.

You can create a symbol from any existing composition or section on the canvas.

To create a symbol, log in to your Contentstack account and perform the following steps:

1. From the App Switcher, click Studio.
2. Open a project and select an existing composition.
3. Right-click the section or component you want to reuse. Alternatively, go to the Layers tab and click the vertical ellipsis.
4. Select Convert to Symbol from the context menu.
5. Name the symbol and optionally assign an icon (e.g., Card Section, Hero Banner).
6. Click Create.

The selected section is now a symbol. It appears in your Symbols library, ready for reuse in other compositions.

You can edit a symbol to update its name, icon, or underlying design. When you modify a symbol, all instances across your project automatically reflect those changes. This ensures consistency and saves time when managing repeatable UI elements.

To edit a symbol, open a Studio project and perform the following steps:

1. Open the Symbols library panel from the left sidebar.
2. Locate the symbol you want to modify. Click the vertical ellipsis and select Edit.
3. Update the name or icon and click Save to apply changes.
4. For design edits, locate the symbol on the canvas. Right-click on it and select Edit Symbol. Add or remove components as needed.

Note: Symbols behave as a single block until you explicitly enter Edit Symbol mode.

Deleting a symbol removes it from your project and all its instances from existing compositions.

To delete a symbol, open a Studio project and perform the following steps:

1. Open the Symbols library.
2. Locate the symbol you want to delete. Click the vertical ellipsis and select Delete.
3. Confirm your action in the Delete Composition modal.

Warning: Once deleted, all instances of the symbol across your compositions are removed.

• Use symbols for repeatable UI elements like cards, banners, navbars, or hero sections.
• Follow consistent naming conventions: Card_Product, CTA_Pricing.
• Avoid excessive nesting to keep symbols manageable.
• Review changes carefully, global updates affect all linked instances.

For teams collaborating across multiple projects or locales, symbols make Studio not just a page builder, but a design-system-driven environment for composable, enterprise-grade experiences.