Expose 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.

Exposing editable page sections in Studio allows developers to define which areas of a composition can be modified by content authors. This ensures flexibility in page design while maintaining structure and consistency across reusable layouts.

This guide explains how to identify editable zones, configure them within Studio, and verify updates in real-time previews.

Before you expose editable page sections, make sure your setup is ready. This section lists the required access, tools, and configurations that ensure Studio functions correctly when defining and linking editable zones.

• You have access to Studio within your stack.
• A project and at least one composition (for example, a page layout) are already created.
• Components are registered and synced with Figma via the CLI.
• You have Admin or Developer permissions to modify composition structure.

Editable sections are areas within a composition that can be directly modified by content editors. They typically include dynamic page zones such as hero banners, content blocks, or call-to-action modules.

These sections are defined at the component level and exposed through Studio so authors can visually edit or rearrange content while preserving the overall layout and design integrity.

1. Identify the Editable Regions

   link

   Before enabling editing, you must determine which areas of your composition can be made editable. This section helps you locate, review, and confirm the specific components that should be exposed for editing within Studio.

   1. Open your existing project in Studio.
   2. Go to the Compositions tab and select your target composition (for example, “Homepage Layout”).
   3. On the composition canvas, review each component to determine which areas should be editable (such as text blocks, banners, or feature sections).
   4. Confirm that each component you want to expose is registered and synced in Studio.

      Tip: Editable regions should be content-focused areas, not structural ones—avoid exposing headers, navigation, or system components.

2. Enable Editable Areas in the Composition

   link

   Once you’ve identified the components that should be editable, enable editing directly in your composition. This section explains how to mark sections as editable and label them for clarity within Studio’s interface.

   1. With your composition open, select a component you want to make editable.
   2. In the Properties Panel, toggle Make Editable or select the Editable checkbox.
   3. Assign a Label or Display Name for easy identification in the editor interface.
   4. Save your composition.
   5. Repeat these steps for other sections you want to expose.

      Example: You can expose “Hero Banner,” “Feature Grid,” and “CTA Section” as editable components so authors can update copy or media assets directly.

3. Map Editable Sections to Content Types

   link

   Mapping editable sections ensures that each zone connects to a specific Content Type in your stack. This link allows changes made in Studio to update automatically in Contentstack, maintaining content and design consistency.

   1. In the same composition, open the Mapping view.
   2. For each editable section, link it to a specific Content Type (for example, “Hero,” “Card Group,” or “Promo Banner”).
   3. Choose the appropriate Field Mapping so that Studio knows which content fields correspond to the editable zones.
   4. Save the mapping configuration.

      Note: This ensures that when authors edit a section, updates automatically sync with the corresponding fields in the Contentstack stack.

4. Preview and Verify Editable Sections

   link

   After mapping, it’s essential to preview your configuration. This section shows you how to review each editable section, confirm that it behaves as expected, and verify that real-time updates display correctly in Studio.

   1. Once all mappings are configured, switch to Preview Mode in Studio.
   2. Hover over each editable section — editable zones will appear with visual indicators (for example, outlines or edit icons).
   3. Make a test change such as updating text or swapping an image.
   4. Click Save or Publish Preview to verify that updates reflect in real-time.
   5. If an editable section doesn’t appear, confirm that it’s linked to a registered component with valid mappings.

5. Sync with Figma (Optional)

   link

   Syncing with Figma keeps your design and Studio configurations in harmony. This optional step helps teams maintain visual consistency across design and development environments by syncing registered components and editable areas.

   If you’re using the Figma Plugin, sync your updated composition to maintain design consistency.

   Run the following command in your terminal:

   <span class="code">csdx studio:sync</span>

   1. Open your linked Figma file.
   2. Export or refresh components, the editable regions will now reflect the same structure defined in Studio.

      Result: Figma retains component context, ensuring that visual design matches editable areas defined in Studio.

6. Save and Publish Changes

   link

   When your editable sections are verified, save and publish your updates so content authors can begin using them. This section explains how to finalize and release your composition to ensure your exposed sections are active.

   1. After verifying all editable sections, click Save Composition.
   2. Return to Studio Home and review your updated composition summary.
   3. Once all editable zones are confirmed, publish the composition for your content team.

      Best Practice: Provide naming consistency for exposed sections (e.g., “hero_section,” “feature_grid”) to simplify content updates across projects.

The example below illustrates how editable sections work in a real project scenario. It helps you visualize how Studio configurations connect with content types, Figma sync, and collaborative editing in practical use.

Consider, a development team is preparing the “Product Landing Page” composition.

• Editable regions: Hero Banner, Feature Highlights, and CTA Section.
• Each is mapped to a distinct content type within the same stack.
• When synced to Figma, these regions appear as defined components.
• Content authors can open Studio, edit these areas, and publish updates—without affecting layout integrity.

Exposing editable page sections gives teams control and flexibility over composable layouts. By defining and mapping editable zones, Studio ensures that developers maintain structure while enabling content authors to customize experiences independently.

To continue building, visit the Build a New Page guide for advanced steps and best practices on optimizing Studio for composable content creation.