Canvas URL

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.

Do It With a Skill

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

Then ask for setup-section-preview, or say ”set up the section preview route”. It writes the canvas route into your code and prints the exact Canvas URL to paste into project settings. Setting it is a browser step, so that half stays with you.

For the concept rather than the wiring, understand-canvas-url explains why it must be a relative path and how it differs from the environment’s Base URL.

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.

• 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

Errors and Fixes

Next

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