Create Editable Page Sections

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.

Studio allows content teams to visually design and manage editable sections on a webpage, without developer intervention.

This guide outlines how to set up, edit, and deploy a page section using Studio.

Before exposing editable sections:

• Ensure Studio is set up and connected to your front-end project (CSR or SSR).
• You have Admin or Developer permissions to modify composition structure.

The previous article introduced an empty section by creating a composition and linking it to the front-end code using the generated composition UID in the URL path file.

Additional Resource: To learn how to create a composition and embed it in the code for use in Studio Canvas, refer to the Set Up Studio for Your Project use-case.

With the foundation in place, it's time to construct and configure a page section using components, content bindings, and design tools.

Studio supports two types of components, each suited to different levels of customization and development effort.

Default components are prebuilt elements, such as containers, text blocks, and images, optimized for common layout use cases.

• Ready-to-use for layout needs
• Integrated with Live Edit and design tokens
• Require no coding for quick assembly

Tip: Default components are preconfigured for Live Preview and support design token integration.

Registered components are custom React components built and registered via the Studio CLI.

• Enable complex UI and business logic
• Support dynamic behavior and internal design systems
• Allow centralized updates across projects

Note: Registered components are reusable across projects and offer flexibility for enterprise-grade applications.

Components are accessible from the left panel. After placing them on the canvas, a structural layout is established, design and data can be applied in later steps.

Additional Resource: Learn more about the components through our documentation.

The Page Data tab defines a page’s structure, identity, and runtime behavior. It includes:

• Page Details: SEO metadata (title, description, Open Graph)
• Preview Entries: Linked content for Canvas previews
• Page Entries: Additional entries from Contentstack for data binding

Note: Page Data is configured per composition. Settings do not carry over between compositions.

In this example, an existing homepage entry is used. Data from its modular block is linked to render the feature section.

Additional Resource: Learn more about the Page Data through our documentation.

Use the Settings tab to control component behavior, appearance, and data bindings, without writing code.

• Select a component on the canvas.
• Open the Settings tab to configure properties and bind data fields.

This approach allows customization for each instance while keeping logic consistent.

Each component property is mapped to the corresponding field in the features modular block.

Additional Resource: Learn more about the Settings through our documentation.

The Design tab provides control over visual styling without the need for CSS. When a component is selected, relevant design tokens appear in the Design tab.

Design tokens enable:

• Consistent styling across pages and components
• Seamless alignment with the design system
• Easy global updates

To apply styles:

1. Select the component.
2. Click the Design tab in the right panel.
3. Choose design tokens or input custom values.
4. Preview responsive styles using the device view toggles.

Tip: Use tokens instead of hardcoded values to maintain styling consistency across the composition.

In this example, typography is styled using design tokens, while the component provides baseline styles.

With components in place, content bound, and design applied, the page section is now ready for deployment. Use Studio’s intuitive interface to iterate quickly and deliver visually rich, editable experiences without code.