Live Preview fetches draft content in real-time. Configure the Delivery SDK with a live_preview block (preview token + host) and initialize ContentstackLivePreview in your app.

The live_preview block on the Delivery SDK lets Studio's canvas iframe fetch draft content. Initializing ContentstackLivePreview powers preview in your standalone app render (outside Studio). Studio's canvas drives its own preview pipe via the Studio SDK and does not need ContentstackLivePreview.init itself, but your standalone site does.

npm install @contentstack/live-preview-utils

Add the init call to src/lib/contentstack.ts (the same file from the Delivery SDK step):

import Contentstack from "@contentstack/delivery-sdk";
import ContentstackLivePreview, { type IStackSdk } from "@contentstack/live-preview-utils";

export const stack = Contentstack.stack({
  apiKey:        process.env.NEXT_PUBLIC_CONTENTSTACK_API_KEY!,
  deliveryToken: process.env.NEXT_PUBLIC_CONTENTSTACK_DELIVERY_TOKEN!,
  environment:   process.env.NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT!,
  region:        "us",
  live_preview: {
    enable:        true,
    preview_token: process.env.NEXT_PUBLIC_CONTENTSTACK_PREVIEW_TOKEN!,
    host:          "rest-preview.contentstack.com",
  },
});

ContentstackLivePreview.init({
  enable:   true,
  stackSdk: stack.config as IStackSdk,   // CSR: the preview hash is written onto this stack so the Delivery SDK fetches drafts from the preview service
  ssr: false,                            // CSR app — in SSR you omit stackSdk and forward the hash via searchQuery (see below)
  stackDetails: {
    apiKey:      process.env.NEXT_PUBLIC_CONTENTSTACK_API_KEY!,
    environment: process.env.NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT!,
  },
  clientUrlParams: {
    host: "app.contentstack.com",
  },
  editButton: { enable: true },
});

export { ContentstackLivePreview };

Two things happen here:

1. The Delivery SDK gets a live_preview block: tells it to use the Preview Token + preview host when running in preview mode
2. ContentstackLivePreview.init sets up the bidirectional pipe between your app and Contentstack

Call ContentstackLivePreview.onEntryChange once at app boot. This registers a callback that fires whenever Contentstack pushes a content update, triggering a re-render or refetch in your app.

"use client";
// app/layout.tsx (Next.js App Router) or src/main.tsx (Vite)
import { useEffect } from "react";
import { ContentstackLivePreview } from "@/lib/contentstack";

export default function RootLayout({ children }) {
  useEffect(() => {
    ContentstackLivePreview.onEntryChange(() => {
      // re-fetch / re-render — simplest is a router refresh:
      // router.refresh()  (Next.js App Router)
      // queryClient.invalidateQueries()  (React Query)
      // setState(s => ({ ...s }))  (plain state)
    });
  }, []);

  return <>{children}</>;
}

For data-fetching libraries (React Query, SWR), wire onEntryChange to invalidate the relevant cache key.

Note: ContentstackLivePreview.init + onEntryChange are only needed for your standalone app rendering (the site users browse outside Studio). Studio's canvas iframe drives its own preview pipe via the Studio SDK and does not call these; the canvas-app reference implementation configures live_preview on the stack but does not invoke ContentstackLivePreview.init.

After init, open your app in a browser. Open Contentstack in another tab, edit a draft entry, click "Preview", and your app should reflect the change without a reload.

If nothing changes, see Troubleshoot.

The studio-skills CLI installs and configures Live Preview automatically using an LLM-driven skill:

npx @contentstack/studio-skills install

Then: "install Live Preview in this project". The skill detects your framework, adds the live_preview block to your Delivery SDK init, and wires onEntryChange to your render layer.

Install the Studio SDK