Canvas URL

Last updated September 14, 2026

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.

Why it exists

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)

What the canvas route needs

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.

Where you set it

In Studio, open your project and go to Settings, then Configuration.

Click to enlarge

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

When the canvas URL is used

Action	Uses canvas URL?
Opening a section to author or preview	Yes
Building / verifying a section in isolation	Yes
Opening a template	No: templates use their own URL patterns
Visitors loading a published page	No

Errors and fixes

Error	Fix
"No Canvas URL Found" or MISSING_CANVAS_URL	Set the Canvas URL field in Project Configuration
Canvas iframe fails to resolve a Base URL	Pick an Environment + Language in Project Configuration
Canvas loads blank	Your canvas route exists but doesn't mount <StudioCanvas />. Add the snippet above
Canvas iframe shows your home page	Canvas URL is /. Change it to a dedicated route like /canvas

Speed it up with an LLM

curl -fsSL https://studio-documentation.contentstackapps.com/install.sh | sh

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)