Video Walkthroughs

Six recorded walkthroughs, about 34 minutes in total. Each one runs against a real stack and mirrors a written guide, so you can watch, read, or do both.

Pick your track. If you author content, you need one video. If you’re a developer wiring Studio into an app, there are five and the order matters.

If You Author Content

You don’t need any of the developer videos. This one assumes a developer has already set Studio up and built some Sections for you.

Author your first page (3:55). Build a page out of ready-made Sections. The content comes from the CMS on its own, so there’s no data binding to do. Toggle preview mode to see real content fill in, change one exposed property, deploy.

Written guide: Your first edit in 5 minutes.

If You’re a Developer

Watch these in order. Unlike the written guides, each video picks up where the last one stopped. They refer back to what was just built and forward to what’s coming. Watching out of order means missing the setup a video assumes.

1. Set up Studio in your app (8:00)

Everything you need before writing code (a stack, an environment with your app’s base URL, a delivery token with preview enabled), then a Studio project, three SDKs, one contentstack/ folder, and a catch-all route. Ends on the empty canvas that tells you it worked.

Written guide: Quickstart 1: Set up Studio in your app.

2. Register a component with a Slot (4:42)

Starts with why: Studio’s built-in components are a fine starting point, but you want your own. Then registers five small single-purpose components rather than one big Hero, and composes them on the canvas. Explains what each part of a registration declares, including the slot that lets one component hold another.

Written guide: Quickstart 2: Register a component with a Slot.

3. Build a Simple Section and expose props (7:26)

Solves the repetition left over from video 2: build the Hero once as a Section, link it to a schema, and every Template on that schema binds the data itself. Also sets up the section canvas route and finally explains what the Canvas URL is for, turns a button into a Section Slot the Template fills, and exposes a property the Template can control.

Written guide: Quickstart 3: Build a Simple Section + Expose Props.

4. Smart Containers (Repeaters and Condition Blocks) 5:31

Builds three cards by hand first, so you can see the flaw: add a fourth card later and none of the bindings follow. Replaces them with a Repeater bound to the list, then shows why modular blocks additionally need Condition Blocks: each block-type has a different shape, so something has to decide which design renders. Finishes by assembling a full page.

Written guides: Quickstart 4: Build a List Section with Section Slots and Smart Containers.

5. Create a Template and its URL (4:15)

Why a Template binds to a content type rather than a page: one Template serves every entry, with the data swapped at request time. Then the URL half in detail, the two places a pattern may already be configured, why Studio picks it up for you, and how URL variables identify the right entry. Ends deployed and live.

Written guide: Quickstart 5: Create a Template + URL.

Accessibility

These videos don’t have captions yet. Every step in all six is also written out in the guides linked above, so nothing here is only available as audio.