Setup: reference chapter

Reference, not a starting point. If this is your first time here, do NOT start on this page. Start with Getting Started: Quickstart 1, the 15-minute walkthrough that installs both layers in one pass. Come back to this chapter when you need reference depth: alternate render strategies, individual SDK reference, exhaustive troubleshooting.

Install + configure Studio + Live Preview + Delivery SDK in your app, then create + wire your Studio project. This chapter is the exhaustive reference for both layers. Quickstart 1 is the linear happy path through them.

Before you install anything, check that Studio is enabled for your organisation. A 10-second app-switcher check that saves a 20-minute "why is the canvas blank" investigation later.

Layer 1: Your app. Install the three SDKs (Delivery, Live Preview, Studio), bootstrap initStudio(...), add the section preview route + the catch-all template route.

Layer 2: Your Studio project. Create the project in app.contentstack.com, link it to your stack, configure environment + locale + canvas URL, verify.

Plan on ~15 minutes total if you already have a stack (~10 min for Layer 1, ~5 min for Layer 2). LLM path is closer to 5 min: run curl -fsSL https://studio-documentation.contentstackapps.com/install.sh | sh and ask "install Studio in this project" in Claude Code / Cursor / Copilot Chat.

Newcomer? Start with Quickstart 1: Setup, the 15-minute walkthrough that follows both layers in order. The reference below is for depth-first readers.

• Check that Studio is enabled for your organisation: 10-second app-switcher check before you install anything. Run this first.
• Prerequisites: Stack-side things you need (API key, delivery token, preview token, environment) before touching Studio.

• Install the Delivery SDK: Reads published content from Contentstack's content delivery network (CDN). Studio asks it to fetch.
• Install Live Preview: Wires the draft-content pipe so Studio's canvas and your standalone preview see unpublished edits.
• Install the Studio SDK: The visual editor bridge: studioSdk, <StudioCanvas />, <StudioComponent />, hooks, and registration APIs.
• Client-side rendering (CSR) vs server-side rendering (SSR): Pick the fetch + render combination that fits your framework.
• SSR composition query: Server-render compositions with fetchCompositionData + <StudioComponent /> so the first HTML already contains the page.

• Create a Studio project: Link a Contentstack to a new Studio project where authors compose pages.
• Playground Canvas: Try Studio without a canvas-app. Studio's hosted iframe is the default until you set a Canvas URL. Useful for setup, sketching, and demos.
• Configure environment, language, and canvas URL: Tell Studio which environment, locale, and section preview route to load. Setting the Canvas URL graduates the project out of Playground.
• Add the section preview route: The route in your app that mounts <StudioCanvas /> for Studio's iframe.
• Wire template preview routes: Mount <StudioComponent /> on ONE catch-all route (default) so every URL on your site renders through Studio. No per-template route registration. Studio's Content Delivery API (CDA) query resolves the matching template for each URL.
• Layer 2 runbook (the human-only Studio web steps): Consolidated checklist for everything that happens in app.contentstack.com after Layer 1 (code-side) is wired. Includes the explicit "LLM can vs can't do" matrix.

• Verify your Studio setup: Layered smoke test from Delivery SDK up through Studio canvas. Fix the lowest failing layer first.
• Troubleshoot: Common canvas, preview, and registration problems in roughly the order you'd hit them.
• Serve your canvas-app over HTTPS locally: One fix for the "Studio can't reach localhost" class of errors (mixed-content, PNA, "SDK Not Initialized"). Works in every browser. Vite, Next.js, Remix, Astro, Nuxt, Angular, Webpack, CRA, custom Node/Express, Docker.

• Docs home