Verify Your Studio Setup End-to-End

A layered smoke test. Run these checks top-to-bottom, each layer is gated on the previous one passing. When a check fails, fix that layer before continuing.

Add a temporary log to any page or a one-off script:

import { stack } from "@/lib/contentstack";

const { entries } = await stack
  .contentType("blog_post")     // any content type you have
  .entry()
  .find();

console.log("Delivery:", entries.length, "entries");

Pass: non-empty array (or empty array if your stack has no content yet, but no error) Fail: Check your browser console for errors including:

• 401 Unauthorized, wrong Stack API Key or Delivery Token
• 404 Not Found, wrong content type UID

Re-check Install the Delivery SDK.

1. Open your app in a browser.
2. In another tab, open Contentstack to an entry of a content type your app reads.
3. Edit a field. Click Preview.
4. Switch to your app tab.

Pass: the page reflects the edit without a manual refresh. Fail: the page didn't change. Work through this checklist:

• [ ] Confirm ContentstackLivePreview.init(…) runs at app boot, then add a console.log inside the init call to verify.
• [ ] Confirm onEntryChange is wired to your render or refetch function.
• [ ] Confirm the Preview Token in your .env.local matches the token shown in your stack, under Settings, then Tokens.

Re-check Install Live Preview.

Open the browser console for your app. Check your browser console for errors including:

• studioSdk not initialised
• contentTypeUid is required
• stackSdk is missing

Add a temporary log:

import { studioSdk } from "@/lib/contentstack";
console.log("Studio SDK ready");

Pass: the log fires without errors. Fail: check that studioSdk.init({ stackSdk, contentTypeUid }) is called, that stackSdk is the Delivery SDK instance, and that contentTypeUid matches the CT Studio created. Re-check Install the Studio SDK.

Open your canvas route directly in a browser, the composed canvas address, which is the environment's per-locale Base URL (origin) + the Canvas URL path you set in Studio Configuration (e.g. http://localhost:5173 + /canvas = http://localhost:5173/canvas).

Pass: the page loads. It might look blank or show a minimal Studio shell because it's expecting to be loaded inside Studio's iframe (that's fine). Fail: a 404 means the route doesn't exist, so add it (see Section preview route). If the page is blank with a JS error, check that <StudioCanvas /> is imported and mounted.

1. Open Studio to your project.
2. Click any section in the Sections tab (or create one).
3. The canvas iframe should load with the section rendered inside.

Pass: the section renders inside the iframe. Fail:

• "No Canvas URL Found": set the Canvas URL field in Project Settings, then Configuration.
• "Environment Not Configured": pick an Environment + Language.
• Iframe loads your home page instead of the canvas: your Canvas URL is / instead of a dedicated path.

1. Create or open a Connected template in Studio.
2. Drop a few components, save.
3. Visit the route on your site that matches the template's URL pattern (e.g. /blog/ai-101).

Pass: the page renders with the template's layout + bound entry data. Fail: "Template did not load" means the template's URL pattern doesn't match your route. Either fix the pattern in Studio (Edit URL modal) or add the matching route. See Template preview routes.

1. Open the template's canvas in Studio.
2. Click on any component bound to entry data.
3. Edit the field inline.

Pass: the change saves to the entry and reflects in the canvas without a reload. Fail: Visual Editor is not enabled stack-wide. In Contentstack, open your stack, go to Settings, then Visual Experience, and on the General tab check Enable Live Preview.

You're done. Studio is wired. Hand the canvas URL to your authors and they can start composing.

npx @contentstack/studio-skills install

Then: "verify my Studio setup". The LLM runs the same checks, prints a layered report, and offers to fix what failed.