Settings
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.
The Settings tab in Studio lets you configure how a component behaves, appears, and connects to content, all without writing any code. This tab is particularly useful when you want to create reusable components that adapt to various use cases.
When you select a component on the canvas and open the Settings tab, you can configure its available properties and data bindings. This makes it easier to customize behavior for each instance while keeping the underlying component logic consistent.
Properties
Use the Properties panel to control how your component’s props (inputs) are populated in Studio. You can bind each property to CMS fields, set static values, or use a mix of both to achieve the right balance of flexibility and control.
For example, in a blog card component:
| Label | Bound CMS Field |
| Blog Title | title |
| Blog Description | description |
| Blog Image | image |
Once bound, the component automatically displays the field values from the linked entry whenever the page renders.
You can also define static values directly in the Properties panel. Static values are ideal when you want to hardcode display text or links that don’t change based on CMS content.
Example:
- Set a static button label like “Read More.”
- Define a default background color or icon path.
Static and dynamic values can be mixed within the same component. For instance, a CMS-driven title with a static button label.
Tip: When no entry is selected, the component displays default values. Use Live Preview to test with real content from your stack.
When to Use the Settings Tab
Use the Settings tab when:
- You want to customize a component’s color, size, or shape.
- You need to bind CMS fields to component props for dynamic rendering.
- You want to define user interactions, such as click or hover behaviors.
- You’re creating a reusable composition or design system template.
The Settings tab allows you to fine-tune component behavior, styling, and data connectivity, all from a single, structured interface. Whether you’re designing flexible UI variants or enabling dynamic content through CMS bindings, these controls help streamline your workflow and promote consistency across your compositions.
More articles in "Work with Composition Editor"
