--- title: "[Second Level Navigation] - Set Up Live Preview" description: Live Preview lets content managers preview entry content across multiple channels before saving or publishing it to a live website. url: https://www.contentstack.com/docs/developers/set-up-live-preview product: Contentstack doc_type: navigation audience: - developers - content-managers version: unknown last_updated: 2025-11-30 --- # [Second Level Navigation] - Set Up Live Preview This page provides the Live Preview setup navigation and related links for developers and content managers. Use it to find the appropriate Live Preview documentation for your framework, delivery method (REST/GraphQL), or troubleshooting needs. ## Article content ### Item 1 #### Listing page ##### Heading Set Up Live Preview ##### Introduction Live Preview lets content managers preview entry content across multiple channels before saving or publishing it to a live website. You can edit an entry and preview the content changes side by side in real-time. ##### Links section ###### Work with Live Preview ###### Heading Work with Live Preview ###### Links - About Live Preview **Title:** About Live Preview **Url:** /content-managers/live-preview/about-live-preview - How Live Preview Works **Title:** How Live Preview Works **Url:** /docs/developers/set-up-live-preview/how-live-preview-works **Date field for flag:** 2025-07-31 - How Live Preview Works with SDK **Title:** How Live Preview Works with SDK **Url:** /developers/set-up-live-preview/how-live-preview-works-with-sdk - Set Up Live Preview for your Website **Title:** Set Up Live Preview for your Website **Url:** /developers/set-up-live-preview/set-up-live-preview-for-your-website - Set Up Live Preview for your Stack **Title:** Set Up Live Preview for your Stack **Url:** /docs/developers/set-up-live-preview/set-up-live-preview-for-your-stack - Open Live Preview in a New Tab **Title:** Open Live Preview in a New Tab **Url:** /docs/developers/set-up-live-preview/open-live-preview-in-a-new-tab **Select flag:** NEW **Date field for flag:** 2025-09-30T13:58:45.000Z - Custom Preview URLs **Title:** Custom Preview URLs **Url:** /docs/developers/set-up-live-preview/custom-preview-urls **Select flag:** NEW - Get Started with Live Preview Utils SDK V2.0 **Title:** Get Started with Live Preview Utils SDK V2.0 **Url:** /docs/developers/set-up-live-preview/get-started-with-live-preview-utils-sdk - Get Started with Live Preview Utils SDK V3.0 **Title:** Get Started with Live Preview Utils SDK V3.0 **Url:** /docs/developers/set-up-live-preview/get-started-with-live-preview-utils-sdk-v3 **Date field for flag:** 2025-03-03 - Migrate to Preview Service **Title:** Migrate to Preview Service **Url:** /docs/developers/set-up-live-preview/migrate-to-preview-service - Live Preview Onboarding and Troubleshooting Guide **Title:** Live Preview Onboarding and Troubleshooting Guide **Url:** /docs/developers/set-up-live-preview/live-preview-onboarding-and-troubleshooting-guide - Set Up Shopify Live Preview **Title:** Set Up Shopify Live Preview **Url:** /developers/set-up-live-preview/set-up-shopify-live-preview **Date field for flag:** 2025-11-30 ###### Set Up with GraphQL ###### Heading Set Up with GraphQL ###### Links - For Client-side Rendering (CSR) Websites **Title:** For Client-side Rendering (CSR) Websites **Url:** /docs/developers/set-up-live-preview/set-up-live-preview-with-graphql-for-client-side-rendering - For Server-side Rendering (SSR) Websites **Title:** For Server-side Rendering (SSR) Websites **Url:** /docs/developers/set-up-live-preview/set-up-live-preview-with-graphql-for-server-side-rendering ###### Set Up with Gatsby ###### Heading Set Up with Gatsby ###### Links - For Gatsby-Powered Websites **Title:** For Gatsby-Powered Websites **Url:** /docs/developers/set-up-live-preview/set-up-live-preview-for-gatsby-powered-sites/ ###### Set Up with REST ###### Heading Set Up with REST ###### Links - For Client-side Rendering (CSR) Websites **Title:** For Client-side Rendering (CSR) Websites **Url:** /docs/developers/set-up-live-preview/set-up-live-preview-with-rest-for-client-side-rendering/ - For CSR without Contentstack SDK **Title:** For CSR without Contentstack SDK **Url:** /docs/developers/set-up-live-preview/live-preview-implementation-for-csr-without-contentstack-sdk/ - For Server-side Rendering (SSR) Wesbites **Title:** For Server-side Rendering (SSR) Wesbites **Url:** /docs/developers/set-up-live-preview/set-up-live-preview-with-rest-for-server-side-rendering/ - For SSR without Contentstack SDK **Title:** For SSR without Contentstack SDK **Url:** /docs/developers/set-up-live-preview/live-preview-implementation-for-ssr-without-contentstack-sdk/ - Live Edit Tags for Entries with REST **Title:** Live Edit Tags for Entries with REST **Url:** /docs/developers/set-up-live-preview/set-up-live-edit-tags-for-entries-with-rest/ ###### Set Up for Static Site Generator ###### Heading Set Up for Static Site Generator ###### Links - Static Site Generator (SSG) Websites **Title:** Static Site Generator (SSG) Websites **Url:** /docs/developers/set-up-live-preview/set-up-live-preview-for-static-site-generator-ssg/ ###### Set Up for NextJS ###### Heading Set Up for NextJS ###### Links - SSR App Router **Title:** SSR App Router **Url:** /docs/developers/set-up-live-preview/live-preview-implementation-for-nextjs-ssr-app-router/ - CSR App Router **Title:** CSR App Router **Url:** /docs/developers/set-up-live-preview/live-preview-implementation-for-nextjs-csr-app-router/ ###### Set Up for ReactJS ###### Heading Set Up for ReactJS ###### Links - CSR Website **Title:** CSR Website **Url:** /docs/developers/set-up-live-preview/live-preview-implementation-for-reactjs-csr-website ###### More about Live Preview ###### Heading More about Live Preview ###### Links - Benefits of Live Preview **Title:** Benefits of Live Preview **Url:** /content-managers/author-content/benefits-of-live-preview - Limitations of Live Preview **Title:** Limitations of Live Preview **Url:** /content-managers/live-preview/limitations-of-live-preview - Live Preview FAQs **Title:** Live Preview FAQs **Url:** /faqs#live-preview-faqs ## Common questions ### What is this page used for? This page is a listing page that groups links for setting up and working with Live Preview. ### Where do I find setup instructions for my framework? Use the sections such as “Set Up for NextJS,” “Set Up for ReactJS,” “Set Up with Gatsby,” or “Set Up for Static Site Generator.” ### Where are the REST and GraphQL setup guides? They are listed under “Set Up with REST” and “Set Up with GraphQL.” ### Where can I find troubleshooting help? Use the link “Live Preview Onboarding and Troubleshooting Guide” under “Work with Live Preview.”