Contentstack
search
Changelog

Build a New Page

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.

Building a new page in Studio lets you combine reusable components and tokens to create structured, composable experiences. This guide shows how to create, configure, and preview a new page composition while maintaining alignment between design and content.

Prerequisites

Before you begin building a new page, make sure your environment is configured correctly. The following prerequisites ensure you have the required permissions, project setup, and synced assets to create and manage pages within Studio successfully.

  • You have access to Studio within your Contentstack stack.
  • A project is already created in Studio.
  • All core components and tokens are registered and synced.
  • You have Editor, Developer, or Admin permissions.

Tip: Ensure your Figma Plugin integration is active if you plan to sync and preview designs.

  1. Create a New Composition

    Compositions define the structure and layout of a page in Studio. This section explains how to create a new composition that serves as the foundation for your page, where you can add components and configure layout settings.

  2. Click New Composition.
  3. Select Composition Type: choose Page.
  4. Enter a Name (e.g., “About Us” or “Product Overview”).
  5. (Optional) Add a Description for internal reference.
  6. Click Create.

    Studio now opens a blank composition canvas where you can start building your page layout.

  7. Add Components to Your Page

    Components are the building blocks that make up your page’s visual and functional structure. In this section, you’ll learn how to add, arrange, and configure registered components within the Studio canvas to design your page layout.

  8. On the left panel, open the Components Library.
  9. Drag and drop components onto your composition canvas.
  10. Adjust the placement to define the page layout structure.
  11. Use the Properties Panel to configure individual component attributes.
  12. Repeat until all required components are added.

    Example: Add a “Hero Banner” at the top, a “Feature Grid” in the middle, and a “CTA Section” at the bottom.

  13. Configure Component Properties

    Each component includes customizable properties that define its content and appearance. This section describes how to adjust text, media, and design tokens to control how each component behaves within your page composition.

  14. Select a component on the canvas.
  15. In the Properties Panel, edit fields such as:
    • Text or heading labels
    • Linked assets (images, videos)
    • Tokens for color, spacing, or typography
  16. If applicable, map components to Content Types from your stack.
  17. Save your changes.

    Tip: Use consistent token naming conventions for color and typography to maintain design alignment.

  18. Define Editable Sections

    Editable sections enable content authors to modify specific areas of a page without altering its overall structure. Here, you’ll learn how to mark selected components as editable and label them for clear identification in the content editor.

  19. Select the component or zone you want to expose as editable.
  20. Toggle Make Editable in the Properties Panel.
  21. Assign a Display Name to identify it in the content editor.
  22. Save your composition.

    For detailed steps, refer to the Expose Editable Page Sections guide.

  23. Map Content Fields

    Mapping links your editable sections in Studio to corresponding fields in Contentstack content types. This section explains how to establish those connections so that updates made by authors in Studio automatically sync with stack data.

  24. In the composition, switch to Mapping View.
  25. For each editable section, select the corresponding Content Type.
  26. Choose the fields to map — for example, “title,” “description,” or “image.”
  27. Save your mapping configuration.

    Result: When a content author edits a mapped field, the change reflects both in Studio and your stack.

  28. Preview Your Page

    Before publishing, preview your page to confirm that its layout, design, and data bindings render correctly. This section walks you through validating editable zones and confirming that component updates display as intended in real time.

  29. Click Preview Mode in Studio.
  30. Hover over editable sections to verify that they’re active.
  31. Make sample updates (e.g., change text or image).
  32. Click Save Preview to confirm changes render as expected.

    Tip: If previews fail to load, check component registration and mapping accuracy.

  33. Sync with Figma (Optional)

    Syncing your composition with Figma ensures that design and Studio configurations stay visually aligned. This section covers how to sync registered components so your Figma file reflects the same layout and metadata as Studio.

    Open your terminal and run:
    csdx studio:sync

  34. Open your linked Figma file.
  35. Refresh components — the new page composition will now appear with all contextual metadata.

    Note: This sync ensures Figma understands Studio’s registered components, preserving the structure and relationships defined in your project.

  36. Save and Publish Your Page

    After reviewing and validating your page setup, save and publish your composition to make it available for authors and collaborators. This section explains how to finalize and deploy your page within Studio.

  37. Click Save Composition.
  38. Review all mapped components and editable areas.
  39. Click Publish Composition to make the page available for authors.
  40. Confirm your page appears under Studio Home → Compositions List.

    Best Practice: Use clear naming conventions (e.g., “product_landing_v2”) to simplify future reference and content updates.

Example Setup

The example below demonstrates how developers and content authors can use Studio to build and maintain pages collaboratively. It provides a practical look at component configuration, mapping, and real-time updates between Contentstack and Studio.

Consider, a developer builds a “Product Landing Page” in Studio:

  • Adds components such as Hero Banner, Feature Grid, and CTA Block.
  • Defines editable zones for text and media.
  • Maps sections to “Product Content Type” fields in the stack.
  • Syncs with Figma for design consistency.

When content authors update fields in Contentstack, the changes instantly reflect on the published page through Studio.

Building pages in Studio gives teams a powerful way to compose, preview, and maintain modular digital experiences. With reusable components, tokens, and editable sections, Studio streamlines collaboration and ensures design consistency across projects.

To continue building, explore the Connect Content with Data Binding guide for advanced configurations and best practices.

More articles in "Key Use Cases"