What’s a Composition?

Two audiences on this page. Content authors: read the two sentences below then jump to For Authors: Working with Sections or the Glossary. The React / SDK content in the callouts is for engineers. You don’t need it to compose pages. Developers: keep reading. The callouts explain how the composition actually lands in your app.

Everything you build in Studio is a composition, a saved layout tree of components and the data bindings that drive them. Templates are compositions of type page. Sections are compositions of type section. If you’re composing pages in Studio, that’s the whole idea.

For engineers: headless principle. A composition lives in Studio + Contentstack. It does not serve HTML on its own. Your app’s framework still serves every page: Studio just supplies the composition spec, components, and bindings via csStudio.fetchCompositionData(...). A composition with url: "/blog/post-1" exists in the CMS, but visitors hitting /blog/post-1 only see content if your app has a route that receives the request and renders <StudioComponent specOptions={...} />. See Wire template preview routes: by default, ONE catch-all route handles every URL.

Compositions come in two flavors:

You pick the flavor when you create a composition. It decides where the composition can be used, what URL it gets, and what data it can bind to.

Three-part mental model. Any CMS-driven page does three things, and Studio’s primitives map one-to-one:

1. Fetch the data maps to the Template (URL-bound, tied to a Content Type). Plus optional pinned entries or saved queries declared on the composition.
2. Iterate over the schema maps to a List Section, a Section whose root is a Repeater. Used whenever a field holds N items (reference field, modular blocks field, or group with multiple: true).
3. Bind fields to component props maps to a Simple Section, a Section with no root Repeater. Maps one schema field to one component prop.

Fetch, then iterate, then bind. Every composition is a combination of these three. Studio’s UI has only “+ New Section” and “+ New Template”: you get List vs Simple by what you drop at the root.

Do It With a Skill

Nothing to run here; this page is the concept. When you want to build one, build-section and build-connected-template author the two kinds.

The Composition List

Every Studio project has a Compositions list with two tabs.

• Templates tab: pages connected to a content type.
• Sections tab: reusable blocks.

The button at the top changes label per tab: + New Template vs + New Section.

Where Compositions Render

What Else is in This Chapter

The composition concept underlies the whole canvas. Six more pages cover canvas-wide topics that aren’t specific to templates or sections:

Next

• Canvas URL: the project-level path used for section preview
• Templates
• Sections