The canvas URL is a project-level path that Studio uses to preview sections. It does not affect how templates render at their real URLs.

A section has no URL of its own, it's a reusable block, not a page. But Studio still needs a real page to load inside its iframe so you can preview and author the section. The canvas URL points at that page.

Section preview iframe  =  Base URL          +  Canvas URL
                           (Environment +       (project setting,
                            Language)            e.g. /canvas)

The page at your canvas URL needs to mount <StudioCanvas />:

// e.g. app/canvas/page.tsx in Next.js
import { StudioCanvas } from '@contentstack/studio-react';

export default function CanvasRoute() {
  return <StudioCanvas />;
}

That's it. Studio drives the rest via URL params.

Studio → your project → Settings → Configuration.

Click to enlarge

Once you've saved the Canvas URL, follow the steps in Set up the section preview route to add the matching route to your app.

• Environment + Language: together resolve the Base URL from your stack's environment config
• Canvas URL: the path on your site (e.g. /canvas)

(The Enable Freeform Feature toggle on the same page belongs to the optional Freeform chapter; leave it off unless you need it.)

npx @contentstack/studio-skills install

Then ask your LLM: "set up the section preview route". It will add the canvas route to your code and set the Canvas URL in Studio.

• Set up the section preview route
• Sections overview
• Install the Studio SDK: full SDK reference (install + init + register + fetch + mount)