Everything you build in Studio is a composition, a saved layout tree of components and the data bindings that drive them.

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 supplies the composition spec, components, and bindings via sdk.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={...} />.

By default, one catch-all route in your app handles every URL that Studio compositions map to. See Wire template preview routes for the setup.

Compositions come in two flavors:

Flavor	What it is	URL	Tied to an entry?
Template	A full page connected to a content type	Yes, derived from the content type	Yes
Section	A reusable block dropped inside a template	None, previews on the project's canvas URL	Optional, via a linked schema (a Contentstack content type that the section binds its props to, see Linked schema)

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.

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.

Flavor	Rendered by	At what URL
Template	<StudioComponent />	The catch-all route on your site, default: ONE route handles every URL (app/[[...slug]]/page.tsx for Next.js, <Route path="*"> for React Router). Note: Studio's CDA lookup (which template to render) is separate from your app's route matching — the CDA resolves the composition by URL, then your route renders it.
Section	<StudioCanvas /> (Studio iframe) AND embedded inside a template when dropped on a page	Sections have no URL of their own, they live wherever the template that uses them appears

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

Page	Covers
Canvas URL	The project-level path used for section preview
CMS Binding	How component props pull data from Contentstack instead of literal values
Design Panel	Right-panel styling controls, colors, spacing, typography, breakpoints
Layers	The left-panel layer tree, navigate and rename composition structure
Save vs Deploy	The Save, Deploy, published cycle

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