Settings

Note: Studio is currently part of an Early Access Program and may not be available to all users. Contact the Contentstack support team; they will coordinate with the appropriate stakeholders to review eligibility.

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.

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:

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.

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.