The Configuration tab is where Studio learns three things: which environment to preview from, which language, and which route on your site to load for previewing sections.

Project → Settings → Configuration.

Click to enlarge

The Environment dropdown lists the Environments configured on your Contentstack stack (see Prerequisites). Pick the one you want Studio to preview content from, usually test, preview, or staging.

Studio uses this to:

• Resolve the Base URL (combined with Language below)
• Fetch entries with the right publish state

The Language dropdown lists the languages on your stack. Pick the default, usually English - United States (en-us).

If your site is multi-locale, you can preview other languages from the canvas by passing locale to useCompositionData(...). See Install the Studio SDK: fetch a composition. The Language picked here is just the default.

Studio shows the resolved Base URL below the Language dropdown, the value Studio derived from the Environment's urls[] entry whose locale matches the selected Language. You can't edit it here; if it's wrong, fix the per-Language URL on the Environment record in your stack.

The path on your site that hosts <StudioCanvas />, usually something like /canvas, /studio-canvas, or /__studio. Enter the path only, never a full origin.

Base URL                Canvas URL
http://localhost:5173 + /canvas        = http://localhost:5173/canvas

The Base URL (origin) is not this field. Studio reads the Base URL from the per-locale URL on your Contentstack stack: Stack → Settings → Environments → <env> → URL for <locale>. For local dev, set that to your dev origin (e.g. http://localhost:5173). If it is empty, the canvas stays blank no matter what Canvas URL you set.

Studio combines Base URL + Canvas URL to get the full iframe address. That composed URL loads inside Studio's iframe when an author opens a section. If you haven't added the route in your app yet, the next page covers it.

Leave Canvas URL empty to use Playground Canvas.

Without a Canvas URL, the project falls back to Studio's hosted Playground iframe, useful for sketching and demos before your canvas-app exists.

Deploy is disabled in Playground. Once you're ready to ship, set the Canvas URL and the project graduates to Website Canvas. See Playground Canvas for the full picture.

A toggle for the optional Freeform mode. Leave it off unless you need to compose pages that aren't tied to a content type. See the Freeform chapter for the details; you don't need it for normal template authoring.

Click Save at the bottom of the page. The Configuration takes effect immediately; open any composition and the canvas iframe loads at the new URL.

npx @contentstack/studio-skills install

Then: "configure my Studio project".

Add the section preview route