Using Sections and Components in a Template
Open a template on the canvas, and you compose it by dragging from the left palette into the center.
The Canvas, in Plain English
- Left panel: what you can drop. Components, sections, layers, search.
- Center: the canvas. Drop targets are highlighted as you drag.
- Right panel: properties of whatever you selected. It has two standard tabs:
- Settings: component properties and data bindings
- Design: styles
- In page- or component-authoring contexts, an extra Data or Component Data tab appears for page- or component-level data.
- Top bar: composition title, content type chip, preview entry, URL editor, view toggles, Save and Deploy.
Clicking the swap icon (⇌) next to PREVIEW ENTRY: opens the Select Entries modal, a searchable list of entries for the connected content type, with Title, Modified At, Publish Status, and URL columns:
What You Can Drop
The left palette has seven main categories (Advanced is hidden when empty):
| Category | What's in it |
|---|---|
| Basic | Text, heading, button, link primitives |
| Media | Image, video, asset placeholders |
| Container | Box, Row, Column: layout primitives |
| Smart Containers | Repeater, Condition Block, Section Slot |
| Advanced | Advanced built-in components (hidden when empty) |
| Registered Components | Your registered React components |
| HTML Elements | Raw HTML primitives |
On a template, sections live in the Layers panel or can be dragged in from the compositions list (the panel that shows all authored sections and templates available in your project).
Full template assembled from sections
Here's a Blog Post template assembled by drag-dropping two section compositions: Hero Strip (filled with a Button in its section slot) and Card Grid (with its Card Title exposed prop overridden to "Related Blogs"). The right panel shows the section's exposed prop ready for further editing.
This single template demonstrates the full architectural chain: - Registered Components (Hero, Card) declared in code - Sections built from those components (Hero Strip, Card Grid) - Template consuming the sections via drag-drop + filling section slots + overriding exposed props
Every authored decision, what's static, what's linked-schema, what's iterated, what's overridable, lives in this one canvas.
Binding a Component to Entry Data
When you select a component on the canvas, the right panel switches to its properties.
The same flow works for your registered components: each prop you declared becomes bindable in the same Data Picker.
Dropping a Section onto a Template
When you drop a section onto a template, Studio uses the section's linked schema to decide which field on your page's content type it should bind to.
- One match: bound automatically.
- Multiple matches: bound to one, with a dropdown in the section's right-panel settings to switch.
- No match: drops unbound; you can pick a field manually if a compatible one exists.
See Auto-binding for details.
Save vs. Deploy
| Button | What it does |
|---|---|
| Save | Persists your changes to Contentstack. Doesn't push to a live environment. |
| Deploy | Moves the composition through your publishing workflow to a target environment. |
Saving a section has an extra step: Studio may open the Expose Props modal so you can decide which component props on the section should be tunable per-template-instance. See Expose Section Props.
Common Pitfalls
| Pitfall | Why it bites | Fix |
|---|---|---|
| "No element is currently selected" in the right panel | Nothing is focused on the canvas, so the panel has nothing to show. | Click a component on the canvas first. |
| A bound value renders empty | The connected entry doesn't have that field set. | Switch the Preview Entry from the canvas toolbar (the swap icon, labeled with two opposing arrows) to an entry that has the field populated. |
| A registered component drops but renders blank | It may be missing default data. | Have your developer add sensible defaults; see Component default data. |