Quickstart Guide to Creating Your First Page
A quickstart for evaluators. You'll go from "Studio installed but never opened" to "I composed a page and saw it render" in five minutes. Uses Studio's default components (no custom registration), assumes a stack with at least one content type and one entry.
If you're an enterprise team planning to ship with your own components, start with Enterprise day one instead. That recipe takes longer but lands you in a real working configuration.
What You'll Have
- A Studio project linked to your stack
- A template against an existing content type
- A page rendered with real entry data
- A working understanding of the canvas, bind, render loop
What You Need Before Starting
- Studio + Live Preview + Studio SDK installed in your app (Setup)
- An app running locally (npm run dev or equivalent)
- A canvas route mounting <StudioCanvas /> (Section preview route)
- A catch-all template route mounting <StudioComponent /> (ONE route handles every URL via Studio's CDA query) (Template preview routes)
- Project Settings → Configuration filled in: Environment, Language, Canvas URL (Configure project)
If any of the above isn't done, go through Setup first.
Step 1: Pick a Content Type to Template
You need a content type that has at least one entry. A blog_post, product, or anything similar works. We'll call it <your_ct> below.
If your stack doesn't have a populated content type yet, that's prerequisite work: create one in Contentstack with a couple of entries before continuing.
Step 2: Create the Template
In Studio:
- Compositions → Templates tab → + New Template
- In the create dialog, pick <your_ct> as the connected content type
- Studio opens a blank canvas
The canvas chrome shows: - Your template name in the top bar - A Content type chip confirming the connection - A PREVIEW ENTRY chip with one of the entries auto-picked (the first one) - Components palette on the left, Settings panel on the right
Step 3: Drop Two Components
From the Components palette, expand Basic:
- Drag a Heading onto the canvas
- Drag a Text below it
Both render with placeholder content: "Heading text" and "Body text".
Step 4: Bind to Entry Data
- Click the Heading on the canvas
- Right panel → Data tab
- Next to the text prop, click the binding chip (the link icon)
- The Data Picker opens
- Pick a text field from your content type: title, name, whatever fits
The Heading now shows the actual entry's title in the canvas.
Repeat for the Text component, binding to a longer field: body, description, etc.
Step 5: Save and View
- Click Save in the top bar
- Studio writes the composition record to your stack
The template now lives. Find the URL pattern Studio derived: click the URL pencil icon in the top bar to see it. It'll be something like /<your_ct>/{{entry.title}} or /<your_ct>/{{entry.uid}} depending on your content type's URL setup.
Step 6: Open the Rendered Page
Open http://localhost:3000<the URL> in your browser, substituting your actual entry's data.
For example, if the URL pattern is /blogs/{{entry.title}} and your entry's title is "AI 101", open /blogs/AI%20101.
You should see: - The entry's title rendered as a heading - The entry's body rendered as text - Both via your app's <StudioComponent /> route
That's a working Studio template. A composition you built visually, bound to a real entry, rendering through your app's route.
What to Try Next
- Swap the Preview Entry. Click the ⇄ icon next to PREVIEW ENTRY in the canvas toolbar. Pick a different entry. The canvas re-renders with that entry's data. The same template, all entries.
- Drop a section. Build a small reusable block from the Card grid with slots recipe. Drop it on this template.
- Bring your own components. The default Heading and Text are utility components. For real work, register your own: see Bring your own components or jump to Enterprise day one for the full flow.
When This Recipe Doesn't Work
| What you see | Likely cause | Fix |
|---|---|---|
| Canvas opens but iframe is blank | <StudioCanvas /> not mounted at the Canvas URL | Section preview route |
| "Template did not load" error | URL pattern doesn't resolve through Studio's CDA query (no template matches that URL) | Check the URL pattern in Studio, or wire the catch-all route via setup-template-preview-routes. The catch-all matches every URL; you don't need per-template routes. |
| Binding shows no fields | Connected content type doesn't have the fields you expected | Verify the CT in Contentstack |
| Saved but page on your site shows nothing | <StudioComponent /> not on the route, or useCompositionData is querying wrong URL | Template preview routes |
| Other | Walk the layered diagnostic | Verify end to end |
Speed It Up with an LLM
curl -fsSL https://www.contentstack.com/docs/studio/install.sh | sh
Then ask: "Verify my Studio setup." The LLM walks the layered diagnostic and tells you exactly what's missing.
See Also
- Enterprise day one: same flow but with your own component library
- Templates: the concept
- Setup: Verify end to end: diagnostic