Opengraph_B.png

<h1>Welcome to Live Preview with Contentstack</h1>This course is intended to outline the Contentstack features and techniques for using the Live Preview features with&nbsp;your content, understand the APIs, and how to leverage Live Preview within your implementation.&nbsp;Required for this course:<ol><li>Account in Contentstack with access to a Stack as an Administrator or Developer. Create a training Stack <a href="https://www.contentstack.com/academy-old/">here</a>. Training stacks are available for 90 days. Alternatively, you can bootstrap a <a href="https://www.contentstack.com/docs/developers/cli/bootstrap-starter-apps">Starter App via the CLI</a> or from the <a href="https://app.contentstack.com/#!/marketplace/starters">Marketplace</a>.&nbsp;</li><li>Permissions to create a new Live Preview.&nbsp;</li></ol>

How to Complete the Live Preview Course

<h3>What is Live Preview?</h3>
The Live Preview feature in Contentstack allows users to see real-time updates to their content as they make changes.&nbsp;
This means that any edits or modifications to the content are immediately reflected in the preview, providing a dynamic and interactive way to view and validate content before publishing.&nbsp;

Here are some key aspects of the Live Preview feature:
<ul>
 <li>Multiple Device Previews: Users can preview content across different devices and screen sizes to ensure responsive design and consistency.</li>
 <li>Contextual Editing: Users can click directly on the content in the preview pane to edit it, making the editing process more intuitive and efficient.&nbsp;</li>
 <li>Immediate Effect:&nbsp;Live preview eliminates&nbsp;the need to manually refresh or rebuild pages in real time.</li>
 <li>Reduced Errors:&nbsp;Content creators can see how their content will look in the final environment in real-time, allowing them to catch any formatting or content errors, ensuring that content aligns with brand guidelines and design expectations, leading to higher-quality output.</li>
 <li>Faster Iterations: With immediate effect, content creators&nbsp;can make quick adjustments, speeding up the content creation and review process.</li>
</ul>

Overall, the Live Preview feature enhances content management by providing a seamless and immediate way to visualize and refine content before it goes live.


<h3>Use Cases of Live Preview</h3>

<ol>
 <li>Omnichannel Preview Experience:
 Content managers can preview how their content will appear across various devices (mobiles, tablets, desktops) in real-time. They can switch between different aspect ratios to ensure responsiveness and consistency across platforms. This capability allows them to optimize content presentation without needing to switch between different devices physically.
 </li>
 <li>Real-Time Edits:
 By clicking on the "Edit" icon next to any content block within the Live Preview window, content managers can instantly navigate to the corresponding field in the editor. This seamless integration between preview and editing facilitates quick updates and adjustments. Content managers can see changes as they make them, ensuring accuracy and alignment with their vision.
 </li>
 <li>Instant Testing of Content Changes:
 Content managers can preview and test content changes immediately without the need to publish or save them. This feature is particularly useful for iterating on design elements, trying out different content placements, or experimenting with new features. It allows for rapid prototyping and refinement directly within the preview environment.
 </li>
 <li>Scope for Innovation and Enhancement:
 Live Preview is integrated as a core feature within the Contentstack platform rather than a separate add-on. This integration ensures that developers can leverage and innovate upon the feature seamlessly. They can incorporate new functionalities or enhance existing ones directly within the native environment, promoting continuous improvement and adaptation.
 </li>
 <li>Content Schema Integrity:
 Developers can maintain the integrity of the content schema while using Live Preview. Content entries remain structured in JSON format, allowing developers to define and modify content models as needed. This structured approach ensures consistency across content types and simplifies the process of scaling or modifying content structures over time.
 </li>
</ol>

<script src="https://cdn.jwplayer.com/players/ZwFvVzCm-b769H14u.js"></script>

Introduction to Live Preview

<h3>How to enable Live preview on your Stack?</h3><h3></h3><ol><li>Under stack settings, go to Live Preview, tick enable live preview and select a Default Preview <a href="https://www.contentstack.com/docs/developers/set-up-environments/about-environments">Environment</a>. <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt83eed7e9d24e0d53/67e1ad0029f30c277bf8de60/ImplementingLivePreview_L3_img-1.png" alt="ImplementingLivePreview_L3_img-1.png" height="auto"/> </li><li>Go to Environment settings and add the base URL (hosted website URL) in that environment’s settings.This hosted website should be fetching data from the same environment. <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd7f06a9a55b96fc3/67e1ad4db9f9a66e76dc40cf/ImplementingLivePreview_L3_img-2.png" alt="ImplementingLivePreview_L3_img-2.png" height="auto"/></li></ol><h3></h3><h3>Generate&nbsp;Preview Token&nbsp;for you stack</h3><ol><li>Under stack settings, go to <a href="https://www.contentstack.com/docs/developers/create-tokens/types-of-tokens">tokens</a>.</li><li>Under <a href="https://www.contentstack.com/docs/developers/create-tokens/about-delivery-tokens">Delivery Token</a>, create a new token. <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt17620102d7b0b49e/67e1adc3c0d1f26cc60a3d03/ImplementingLivePreview_L3_img-3.png" alt="ImplementingLivePreview_L3_img-3.png" height="auto"/> </li><li>Fill in the&nbsp;name and description (optional), then select the branch and environment, enable the Create&nbsp;<a href="https://www.contentstack.com/docs/developers/create-tokens/about-delivery-tokens#about-preview-tokens">Preview Token</a> toggle, and&nbsp;Generate Token. <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb0567501a748508b/67e1add8b9f9a60a39dc4132/ImplementingLivePreview_L3_img-4.png" alt="ImplementingLivePreview_L3_img-4.png" height="auto"/> </li></ol>

Basic implementation

<h3>What is your website Architecture?</h3>
When deciding between Client-Side Rendering (CSR) and Server-Side Rendering (SSR) for implementing Contentstack live preview, it's essential to consider the specific needs and constraints of your project.
Contentstack supports both SSR and CSR, and the choice might also depend on the specific framework you are using (e.g., Next.js for SSR, React for CSR). Contentstack provides <a href="https://www.contentstack.com/docs/developers/set-up-live-preview/how-live-preview-works-with-sdk">SDKs and APIs</a> that are compatible with both approaches.

Here are some key factors to help you decide:

<h4>Client-Side Rendering (CSR)</h4>

<ul>
 <li>Interactivity: CSR allows for highly interactive applications as JavaScript is executed on the client side.</li>
 <li>Initial Load Time: The initial load time can be longer because the browser has to download and execute JavaScript before rendering the content.</li>
 <li>Complexity: Implementing live previews might be more complex as you need to ensure that the client-side app can handle real-time updates and rendering.</li>
</ul>

<h4>Server-Side Rendering (SSR)</h4>

<ul>
 <li>Initial Load Time: The initial load time can be faster because the server sends a fully rendered page to the client.</li>
 <li>Complexity: Implementing live previews can be easier and more seamless since the server renders the updated content.</li>
 <li>Performance on the Server: SSR can be more demanding on the server, especially with a high number of concurrent users.</li>
 <li>Interactivity: SSR might not be as interactive out of the box as CSR, although hybrid approaches can mitigate this.</li>
</ul> 
<h4>Hybrid Approach</h4>
In many cases, a hybrid approach, using both CSR and SSR, might be the best solution. For example, you can use SSR for the initial load to benefit from SEO and faster initial load times, and then switch to CSR for subsequent interactions to enhance interactivity.
 
<hr />
 
<h3>Live Preview in CSR</h3>
Client-side rendering (CSR) involves a process where all rendered HTML client pages are generated on the browser side. Consequently all the data fetching is also done on the client side. This guide explains in detail how to set up Live Preview for an CSR Application.
 

<h4>How CSR Works:</h4>

<ol>
 <li>Initial HTML and JavaScript Load:<ul>
 <li>When a user visits a CSR-based web application, the server sends an initial HTML document that often includes references to JavaScript frameworks like React, Angular, or Vue.js.</li>
 <li>This initial HTML might include placeholders or loading indicators where content will be rendered dynamically.</li>
 </ul>
 </li>
 <li>Data Fetching and Rendering:<ul>
 <li>Once the browser loads the initial HTML and JavaScript, the client-side code makes requests to APIs or other data sources to fetch necessary data.</li>
 <li>This data is then used by the JavaScript frameworks to dynamically render the actual content on the page.</li>
 <li>This process allows for highly interactive and responsive user interfaces, as changes can be made to the UI without requiring full page reloads.</li>
 </ul>
 </li>
 <li>Benefits:<ul>
 <li>Speed and Responsiveness: CSR can provide a faster initial load time because only minimal HTML is initially transferred.</li>
 <li>Interactivity: Applications can feel more responsive since data fetching and rendering happen on the client side without waiting for server responses for every interaction.</li>
 <li>Flexibility: Developers have more control over how content is displayed and can create highly dynamic user interfaces.</li>
 </ul>
 </li>
</ol><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt42d7003887817022/67e1b16e914c2442924972c1/ImplementingLivePreview_L4_img-1.avif" alt="ImplementingLivePreview_L4_img-1.avif" height="auto" />
Working of Live Preview in CSR:
When a website is opened in the Live Preview pane, data is fetched live from the current entry using a GET call over preview service url.&nbsp;If changes are made to the entry, with those changes Contentstack sends a PATCH call. The onEntryChange() function then triggers another GET call to fetch the updated data, which is re-rendered on the webpage in Live Preview pane.
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt79f0d34846849b01/67e1b6f367538e1ec22bd731/ImplementingLivePreview_L4_img-2.png" alt="ImplementingLivePreview_L4_img-2.png" height="auto" />
 
<hr />
 
<h3>Live Preview in SSR</h3>
Server-side rendering (SSR) involves a process where an application generates rendered HTML client pages on the server rather than in the browser. Consequently, data fetching is also done on the server side, with HTML pages created and sent to the browser. This guide explains in detail how to set up Live Preview for an SSR Application.

<h4>Server-Side Rendering (SSR)</h4>

<ol>
 <li>Request Handling:<ul>
 <li>When a user requests a page from a SSR-based application, the server processes the request and generates the complete HTML for that page.</li>
 <li>This includes the content of the page, data fetched from databases or APIs, and the initial state of any client-side frameworks (if used).</li>
 </ul>
 </li>
 <li>HTML Generation:<ul>
 <li>Server-side frameworks like Next.js (for React), Nuxt.js (for Vue.js), or server-side template engines (e.g., EJS, Pug) are commonly used to facilitate SSR.</li>
 <li>These frameworks or engines render components or templates with the data provided by the server into a complete HTML document.</li>
 </ul>
 </li>
 <li>Sending HTML to Client:<ul>
 <li>Once the HTML is generated on the server, it is sent to the client's browser as a fully formed document.</li>
 <li>This HTML can include all the content necessary for the initial view of the page, reducing the need for subsequent data fetching before the page can be fully rendered.</li>
 </ul>
 </li>
 <li>Client Interaction:<ul>
 <li>Once the initial HTML is rendered on the client's browser, any further interactivity can be enhanced with client-side JavaScript.</li>
 <li>This includes handling user events, making API calls for dynamic updates, and managing client-side state using frameworks like React, Vue.js, or Angular. </li>
 </ul>
 </li>
</ol>
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltfc9d5f1526d39df0/67e1b791a352df6071697026/ImplementingLivePreview_L4_img-3.avif" alt="ImplementingLivePreview_L4_img-3.avif" height="auto" /> 
<h4>Working of Live Preview in SSR</h4>
When a website is opened in the Live Preview pane, the server builds HTML pages with data fetched live from the current entry using a GET call over the preview-service URL. These pages are then sent to the client and rendered in the Live Preview pane. If changes are made to the entry, Contentstack sends a PATCH call with those changes. The webpage in the Live Preview pane is then refreshed, and the server builds HTML pages with the updated data fetched from another GET call. These updated pages are sent to the client and rendered in the Live Preview pane.
<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltdc4fe0eae7f658a1/67e1b7c72fdf5e5ad0069dde/ImplementingLivePreview_L4_img-4.png" alt="ImplementingLivePreview_L4_img-4.png" height="auto" />

How Live Preview works

<h3>1. Generate Preview Token</h3>In the Basic Implementation&nbsp;module, we have already generated a preview token.&nbsp;&nbsp;<h3>2.&nbsp;Update Contentstack's delivery SDK</h3>To update the&nbsp;package via npm, use the following command:<pre>npm install contentstack</pre> To allow <a href="https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/about-javascript-delivery-sdk">delivery SDK</a> to fetch preview content, we need to add live preview configs to the stack initialization method i.e. to Contenstack.Stack() method.Contenstack.Stack() method takes the live_preview object which includes following parameters:<ul><li>preview_token: The preview_token is used to&nbsp;authenticate API requests to fetch preview content.</li><li>enable:&nbsp;This boolean property lets you enable&nbsp;the live preview on your client-side. Setting this to true&nbsp;turns on the live preview feature, allowing real-time updates to be shown in the application. If set to false, the live preview functionality will be disabled.</li><li>host:&nbsp;The host property is optional and is used to define the endpoint that the application will connect to for fetching the live preview data. REST API hosts according to regions: <ul><li>AWS NA:&nbsp;rest-preview.contentstack.com</li><li>AWS EU:&nbsp;eu-rest-preview.contentstack.com</li><li>Azure NA:&nbsp;azure-na-rest-preview.contentstack.com</li><li>Azure EU:&nbsp;azure-eu-rest-preview.contentstack.com</li><li>GCP NA:&nbsp;gcp-na-rest-preview.contentstack.com</li></ul> </li></ul><pre>import Contentstack from 'contentstack' const Stack = Contentstack.Stack({ ... // update your configs here live_preview: { preview_token: preview_token, enable: true, host: 'rest-preview.contentstack.com' //optional for AWS-NA region }, ... })</pre><h3>3. Install / Update and Initialize the Live Preview Utils SDK</h3> <a href="https://www.contentstack.com/docs/developers/sdks/utils-sdk/javascript/about-javascript-live-preview-utils-sdk">Live preview utils SDK</a> listens to content changes and requests the delivery SDK to preview changes in real-time. Therefore Live Preview Utils SDK is always initialized at the client side irrespective of CSR/SSR is being followed.To use Live preview utils SDK you can either install it using npm or import it using the script tag in your HTML page.To install the package via npm, use the following command:<pre>npm install @contentstack/live-preview-utils</pre>initialization :<pre>import ContentstackLivePreview from "@contentstack/live-preview-utils"; ContentstackLivePreview.init({ enable: true });</pre>or you can use Script&nbsp;tag to&nbsp;import and initialize live preview utils sdk:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt48250a2b71332476/67e1b9f2362ee30f7f55cbbd/ImplementingLivePreview_L5_img-1.png" alt="ImplementingLivePreview_L5_img-1.png" height="auto"/> <h3>ContentstackLivePreview.init() method:</h3>init() method initializes the Live Preview Utils SDK.&nbsp;The&nbsp;init()&nbsp;method accepts a configuration object as a parameter.The following explains all the configuration options available.<ul><li>enable: The enable property determines whether Live Preview communications have been enabled. It takes a boolean value. It is an optional property which takes the default value as&nbsp;true.&nbsp;</li><li>ssr: The ssr property controls how data is updated for previewed content when you modify entry content. It is an optional property which takes the default value as&nbsp;true.&nbsp; Its behavior changes based on whether your application uses Server-Side Rendering (SSR) or Client-Side Rendering (CSR).<ul><li>When ssr is set to true: Your application or website is rendered on the server (SSR). This means that each time you edit content, a request is made for a new HTML page.</li><li>When ssr is set to false: Your application is rendered on the client side (CSR). In this case, your framework (e.g., React) will fetch the updated data and reload the existing page. </li></ul></li><li>stackSdk:&nbsp;The&nbsp;stackSdk&nbsp;represents the stack object.&nbsp;For&nbsp;CSR mode stackSdk object is required. When stackSdk object is provided utils SDK&nbsp;initialization switches to CSR mode. It is required to override default SSR configs.</li><li>stackDetails: The&nbsp;stackDetails&nbsp;object contains stack-related information which helps you redirect to the corresponding entry when you use edit tags on your website. The stackDetails object contains the following properties:<ul><li>apiKey</li><li>branch</li><li>environment&nbsp;</li></ul></li></ul><ul><li>clientUrlParams: The&nbsp;clientUrlParams&nbsp;object represents the URL information where your stack is present which includes host, port, and protocol. AWS NA region app host is default { host: "app.contentstack.com", // AWS NA region app host } The default params take AWS NA region values. Client host for other regions: • AWS EU region: eu-app.contentstack.com • Azure NA region: azure-na-app.contentstack.com • Azure EU region: azure-eu-app.contentstack.com • GCP NA region: gcp-na-app.contentstack.com • GCP EU region: gcp-eu-app.contentstack.com</li></ul><ul><li>cleanCslpOnProduction: When&nbsp;enable&nbsp;is set to&nbsp;false&nbsp;and cleanCslpOnProduction is set to&nbsp;true, the&nbsp;data-cslp&nbsp;attributes are removed from the website. When operating in a production environment, you generally want to avoid including data-cslp attributes in your site's HTML tags or enabling the live preview feature. To manage this, you can implement conditional statements to control the live preview functionality based on the current environment.</li></ul><pre>ContentstackLivePreview.init({ &nbsp; enable: process.env.CONTENTSTACK_ENVIRONMENT !== "production" // returns false and disables the live-preview in production environment cleanCslpOnProduction: process.env.CONTENTSTACK_ENVIRONMENT === "production" // returns true and cleans data-cslp attributes in production environment ... }</pre> <ul><li>editButton: The editButton object provides functionality to manage the "Edit" button in your application, whether you're inside or outside the Live Preview portal. It offers several key features, including edit button visibility and&nbsp;control over the inclusion or exclusion of the "Edit" button within or outside the Live Preview panel, You can also adjust the button’s positioning based on your needs. Following keys enables you to customize editButton object:<ul><li>enable: This key accepts boolean values, which&nbsp;let's you specify whether you want to display the “Edit” button or not. the default values is true.</li><li>exclude: This key provides you with the option to exclude the editButton from either inside or outside the Live Preview portal for certain conditions. It is of type “Array” with any one of the following string values: <ul><li>insideLivePreviewPortal&nbsp;is used when you want to remove the “Edit” button from within the Live Preview portal.</li><li>outsideLivePreviewPortal&nbsp;is used when you want to remove the “Edit” button from outside the Live Preview portal. </li></ul></li><li>includeByQueryParameter:&nbsp;This boolean property&nbsp;is used to override the cslp-buttons query parameter. You can set this to true/false to enable/disable the "Edit" button option, respectively. By default it is set to true</li><li>position: This property lets you customize the "Edit" button’s placement using one of eight predefined positions. It accepts the following values: left, right, top-left (or top), top-right, top-center, bottom-left (or bottom), bottom-right, and bottom-center.</li></ul></li></ul>example:<pre>ContentstackLivePreview.init({ &nbsp; &nbsp; ... &nbsp; &nbsp; editButton: { &nbsp; &nbsp; &nbsp; &nbsp; enable: true, &nbsp; &nbsp; &nbsp; &nbsp; exclude: ["outsideLivePreviewPortal"], &nbsp; &nbsp; &nbsp; &nbsp; includeByQueryParameter: false, &nbsp; &nbsp; &nbsp; &nbsp; position:'top-right', &nbsp; &nbsp; } });</pre> <ul><li>debug: Setting debug: true in ContentstackLivePreview.init() enables debugging mode for the Live Preview functionality. This mode is useful for developers as it provides additional logging and detailed information about the Live Preview's internal processes and interactions. When you're done with debugging, it's generally a good idea to set debug to false or remove the debug option to avoid unnecessary logging in a production environment.</li></ul><h3>Configure Live preview Across Pages - CSR Powered website</h3>ContentstackLivePreview.onEntryChange() method executes when an entry content is being changed, inside this method, you can add logic to fetch preview content.&nbsp;&nbsp;<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltc506e7b1bff7d46b/67e1bcb4d148edb993a3ff67/ImplementingLivePreview_L5_img-2.png" alt="ImplementingLivePreview_L5_img-2.png" height="auto"/>In the above exampleupdateData() function is responsible for fetching new data and updating the state.ContentstackLivePreview.onEntryChange(updateData) registers the updateData function to be called whenever an entry is updated, it&nbsp;fetches the draft/preview content and updates the component's state with setData&nbsp;i.e.&nbsp;data is being updated and rerendered&nbsp;on every change happening in the entry. <h3>Configure Live Preview Across Pages - SSR Powered website</h3>Set up a middleware to track all new changes being made to the entry content. This middleware injects the live preview hash and content type UID into the Stack class using the&nbsp;livePreviewQuery()&nbsp;method.<pre>app.use((req, response, next) =&gt; { // this will get live_preview hash and ContentType to the request Stack.livePreviewQuery(req.query); next(); });</pre>In other Javascript frameworks like next.js, you can directly&nbsp;update the live preview query from the page component itself.&nbsp;Next.js (SSR) example:<ul><li>Set up a middleware: After initialization of live preview SDK in the client component, Let's set up a middleware to track all new changes being made to the entry content. This middleware injects the live preview hash and content type UID into the Stack instance using the livePreviewQuery() method.</li></ul><pre>// utils.js ... export const setLivePreviewQueryParams = (queryParams) =&gt; { if(queryParams?.live_preview) { &nbsp; Stack.livePreviewQuery(queryParams) &nbsp; } } ... </pre> <ul><li>Configure Pages:&nbsp;setLivePreviewQueryParams() updates the live preview query parameters based on the searchParams passed to the page which enables live content updates. This ensures that every time the page loads or search parameters change, we’re checking for and updating live preview functionality parameters.</li></ul><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltaac121a05a27022e/67e1be35a352dfb810697091/ImplementingLivePreview_L5_img-3.png" alt="ImplementingLivePreview_L5_img-3.png" height="auto"/> After implementing these steps you are all set to live preview your first page. <h3>Configure Live preview -&nbsp;SSG-powered Website</h3>Static site generation (SSG) is a web development strategy that generates HTML pages at build time using available data and templates. This results in pre-rendered static files that are served directly from a web server. In contrast, server-side rendering (SSR) and client-side rendering (CSR) generate pages dynamically for each request. SSG is used where the website needs minimal dynamic content When working with Live Preview the server side generates and serves&nbsp;static HTML files with initial/published data and the client-side handles the Live Preview in CSR mode. <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt13ddff7eabd3ae7d/67e1bee194fe2fa63fdc79e8/ImplementingLivePreview_L5_img-4.png" alt="ImplementingLivePreview_L5_img-4.png" height="auto"/>SSG Live preview example: <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blte9860aefeb60f424/67e1bf09a388fcb626812206/ImplementingLivePreview_L5_img-5.png" alt="ImplementingLivePreview_L5_img-5.png" height="auto"/>

Live preview: REST Delivery SDK

<h3>How to setup&nbsp;Live preview with GraphQL API?</h3>
The <a href="https://www.contentstack.com/docs/developers/apis/graphql-content-delivery-api">GraphQL Content Delivery API</a> offers a more efficient alternative to traditional Content Delivery APIs. It enables you to fetch customized responses or retrieve data from nested or multiple resources with a single API request.
GraphQL is a versatile and customizable API query language. Contentstack's GraphQL API allows you to query precisely what you need, without any excess. For example, you can fetch data from multiple content types with just one API request. You can also define the structure of your requests to customize the responses. Currently, Contentstack's GraphQL supports only queries, and the GraphQL types for each requested resource are generated in real-time, ensuring your content is always up-to-date. 
A GraphQL query like below is sent to&nbsp;https://{{domain}}/stacks/{{api_key}} over POST method with environment parameter and access token in headers to fetch the content. <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf9619548fdec8940/67e1bfd1b9f9a67f51dc4277/ImplementingLivePreview_L6_img-1.png" alt="ImplementingLivePreview_L6_img-1.png" height="auto" />




<h3>1. Generate Preview Token</h3>
&nbsp; &nbsp; &nbsp;In the Basic Implementation&nbsp;module, we have already generated a preview token.&nbsp;&nbsp;


<h3>2. Install / Update and Initialize the Live Preview Utils SDK</h3>
<a href="https://www.contentstack.com/docs/developers/sdks/utils-sdk/javascript/about-javascript-live-preview-utils-sdk">Live preview utils SDK</a> listens to content changes and requests the GraphQl&nbsp;Api&nbsp;to preview changes in real-time. Therefore&nbsp;Live Preview Utils SDK is always initialized at the client side irrespective of CSR/SSR is being followed.
To use Live preview utils SDK you can either install it using npm or import it using the script tag in your HTML page.

To install the package via npm, use the following command:<pre>npm install @contentstack/live-preview-utils</pre>

Create a new JS file and initialize Live Preview SDK:<pre>import ContentstackLivePreview from "@contentstack/live-preview-utils"; ContentstackLivePreview.init({ enable: true });</pre>

or you can use Script&nbsp;tag to&nbsp;import and initialize live preview utils sdk:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltbc3ec508d7dc3b96/67e1c07b67538edd892bd7f1/ImplementingLivePreview_L6_img-2.png" alt="ImplementingLivePreview_L6_img-2.png" height="auto" />



 
ContentstackLivePreview.init() method:
init() method initializes the ive Preview Utils SDK.&nbsp;The&nbsp;init()&nbsp;method accepts a configuration object as a parameter.
The following explains all the options available for the configuration.
<ul>
 <li>enable: The enable property determines whether Live Preview communications have been enabled. It takes a boolean value. it is an optional property which takes the default value as&nbsp;true&nbsp;.&nbsp;</li>
 <li>ssr: The ssr property controls how data is updated for previewed content when you modify entry content. it is an optional property which takes the default value as&nbsp;true.&nbsp; Its behavior changes based on whether your application uses Server-Side Rendering (SSR) or Client-Side Rendering (CSR).<ul>
 <li>When ssr is set to true: Your application or website is rendered on the server (SSR). This means that each time you edit content, a request is made for a new HTML page.</li>
 <li>When ssr is set to false: Your application is rendered on the client side (CSR). In this case, your framework (e.g., React) will fetch the updated data and reload the existing page.</li>
 </ul>
 </li>
 <li>stackDetails: The&nbsp;stackDetails&nbsp;object contains stack-related information which helps you redirect to the corresponding entry when you use edit tags on your website. stackDetails object contains the following properties:<ul>
 <li>apiKey</li>
 <li>branch</li>
 <li>environment&nbsp; </li>
 </ul>
 </li>
 <li>clientUrlParams: The clientURLParams object represents the URL information where your stack is present which includes host, port, and protocol. AWS NA region app host is default.</li>
</ul><pre>{ host: "app.contentstack.com", // AWS NA region app host }</pre>
 The default params take AWS NA region values. Client host for other regions: • AWS EU region: eu-app.contentstack.com • Azure NA region: azure-na-app.contentstack.com • Azure EU region: azure-eu-app.contentstack.com • GCP NA region: gcp-na-app.contentstack.com • GCP EU region: gcp-eu-app.contentstack.com 
<ul>
 <li>cleanCslpOnProduction: When&nbsp;enable&nbsp;is set to&nbsp;false&nbsp;and cleanCslpOnProduction is set to&nbsp;true, the&nbsp;data-cslp&nbsp;attributes are removed from the website. When operating in a production environment, you generally want to avoid including data-cslp attributes in your site's HTML tags or enabling the live preview feature. To manage this, you can implement conditional statements to control the live preview functionality based on the current environment.</li>
</ul><pre>ContentstackLivePreview.init({ &nbsp; &nbsp; enable: process.env.CONTENTSTACK_ENVIRONMENT !== "production" // returns false and disables the live-preview in production environment &nbsp; &nbsp; cleanCslpOnProduction: process.env.CONTENTSTACK_ENVIRONMENT === "production" // returns true and cleans data-cslp attributes in production environment &nbsp; ... }</pre>

<ul>
 <li>editButton: The editButton object provides functionality to manage the "Edit" button in your application, whether you're inside or outside the Live Preview portal. It offers several key features, including edit button visibility and&nbsp;control over the inclusion or exclusion of the "Edit" button within or outside the Live Preview panel, You can also adjust the button’s positioning based on your needs. Following keys enables you to customize editButton object:<ul>
 <li>enable: This key accepts boolean values, which&nbsp;let's you specify whether you want to display the “Edit” button or not. the default values is true.</li>
 <li>exclude: This key provides you with the option to exclude the editButton from either inside or outside the Live Preview portal for certain conditions. It is of type “Array” with any one of the following string values:<ul>
 <li>insideLivePreviewPortal is used when you want to remove the "Edit" button from within the Live Preview portal.</li>
 <li>outsideLivePreviewPortal is used when you want to remove the "Edit" button from outside the Live Preview portal.</li>
 </ul>
 </li>
 <li>includeByQueryParameter:&nbsp;This boolean property&nbsp;is used to override the cslp-buttons query parameter. You can set this to true/false to enable/disable the "Edit" button option, respectively. By default it is set to true</li>
 <li>position: This property lets you customize the "Edit" button’s placement using one of eight predefined positions. It accepts the following values: left, right, top-left (or top), top-right, top-center, bottom-left (or bottom), bottom-right, and bottom-center.</li>
 </ul>
 </li>
</ul>
example:<pre>ContentstackLivePreview.init({ &nbsp; &nbsp; ... &nbsp; &nbsp; editButton: { &nbsp; &nbsp; &nbsp; &nbsp; enable: true, &nbsp; &nbsp; &nbsp; &nbsp; exclude: ["outsideLivePreviewPortal"], &nbsp; &nbsp; &nbsp; &nbsp; includeByQueryParameter: false, &nbsp; &nbsp; &nbsp; &nbsp; position:'top-right', &nbsp; &nbsp; } });</pre>
 
<ul>
 <li>debug: Setting debug: true in ContentstackLivePreview.init() enables debugging mode for the Live Preview functionality. This mode is useful for developers as it provides additional logging and detailed information about the Live Preview's internal processes and interactions. When you're done with debugging, it's generally a good idea to set debug to false or remove the debug option to avoid unnecessary logging in a production environment.</li>
</ul>

EXAMPLE:<pre>import ContentstackLivePreview from "@contentstack/live-preview-utils"; ContentstackLivePreview.init({ &nbsp;&nbsp;&nbsp;&nbsp;stackDetails: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;apiKey: "your-stack-api-key", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;enironment: "your-environment-name", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;branch: "your-branch-name" &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;enable: true, &nbsp;&nbsp;&nbsp;&nbsp;ssr: false/true, });</pre>



<h3>3.&nbsp;Update GraphQL API Request</h3>
To allow graphql API&nbsp;to fetch preview content, we need to append live preview hash and preview token in headers of API request and update url hostname to graphql preview hostname.
<ul>
 <li>preview_token: The preview_token is used to&nbsp;authenticate API requests to fetch preview content.</li>
 <li>live_preview:&nbsp;When you open any entry in a stack where the live preview feature is enabled, a Live Preview Hash(Session ID) is generated in the background. This hash is a unique identifier that can be used to save and fetch data to be displayed in the live preview panel.</li>
 <li>hostname:&nbsp;The hostname property is optional and is used to define the endpoint that the application will connect to for fetching the live preview data. GraphQL&nbsp;API hosts according to regions:
 <ul>
 <li>US (North America, or NA):&nbsp;graphql-preview.contentstack.com</li>
 <li>AWS EU:&nbsp;eu-graphql-preview.contentstack.com</li>
 <li>Azure NA:&nbsp;azure-na-graphql-preview.contentstack.com</li>
 <li>Azure EU:&nbsp;azure-eu-graphql-preview.contentstack.com</li>
 <li>GCP NA:&nbsp;gcp-na-graphql-preview.contentstack.com</li>
 </ul>
 </li>
</ul>
 
<blockquote>
 Note: If you are using framework which does strong caching like NextJS, then add no caching in fetch request like cache: "no-store" otherwise live preview might not work properly.
</blockquote>
<pre>import ContentstackLivePreview from "@contentstack/live-preview-utils"; const graphqlUrl = new URL( `https://graphql.contentstack.com/stacks/${CONTENTSTACK_API_KEY}?environment=${CONTENTSTACK_ENVIRONMENT}`, ); const GRAPHQL_HOST_NAME = "graphql.contentstack.com"; const LIVE_PREVIEW_HOST_NAME = "graphql-preview.contentstack.com"; function getHeaders() { const headers = new Headers(); headers.append("Content-Type", "application/json"); headers.append("access_token", CONTENTSTACK_DELIVERY_TOKEN); return headers; } const gqlRequest = async (gql) =&gt; { const hash = ContentstackLivePreview.hash; const headers = getHeaders(); if (hash) { headers.append("live_preview", hash); headers.append("preview_token", CONTENTSTACK_PREVIEW_TOKEN); graphqlUrl.hostname = LIVE_PREVIEW_HOST_NAME; } else { graphqlUrl.hostname = GRAPHQL_HOST_NAME; } const res = await fetch(graphqlUrl.toString(), { method: "POST", headers: headers, body: JSON.stringify({ query: gql, }), cache: 'no-store', }); return res; }</pre>




<h3>Configure Live preview Across Pages - CSR Powered website</h3>
ContentstackLivePreview.onEntryChange()&nbsp;method executes when an entry content is being changed, inside this method, you can add logic to fetch preview content.&nbsp;&nbsp;<pre>import React, { useEffect, useState } from "react"; import ContentstackLivePreview from "@contentstack/live-preview-utils"; const updateData = () =&gt; { &nbsp;&nbsp;&nbsp;&nbsp;const fetchedData = gqlRequest(query); &nbsp;&nbsp;&nbsp;&nbsp;setData(fetchedData); }; React.useEffect(() =&gt; { &nbsp;&nbsp;&nbsp;ContentstackLivePreview.onEntryChange(updateData); }, []);</pre>

In the above example
<ul>
 <li>updateData()&nbsp;function is responsible for fetching new data and updating the state.</li>
 <li>ContentstackLivePreview.onEntryChange(updateData) registers the updateData function to be called whenever an entry is updated, it&nbsp;fetches the draft/preview content and updates the component's state with setData&nbsp;i.e.&nbsp;data is being updated and re-rendered&nbsp;on every change happening in the entry.</li>
</ul>

<script src="https://cdn.jwplayer.com/players/vxNczpsk-b769H14u.js"></script>

<h3>Configure Live Preview Across Pages - SSR Powered website</h3>
Pass query parameters from the URL into the setConfigFromParams() method of Live Preview which extract and store the hash, making it accessible via ContentstackLivePreview.hash. To achieve this, create a middleware and execute the following command:<pre>import ContentstackLivePreview from "@contentstack/live-preview-utils"; ContentstackLivePreview.setConfigFromParams(searchParams) // You could use objects provided by the frameworks as well.</pre>

<script src="https://cdn.jwplayer.com/players/RZt9lymL-b769H14u.js"></script>

Live Preview - GraphQL API

<h3>Live Edit Tags</h3>Live edit tags enable you to quickly navigate to&nbsp;the field that holds the website content shown in the Live Preview pane. By clicking the "Edit" button next to a content block in the preview pane, you'll be taken to the corresponding field within the entry. If the field contains a reference to another entry, you will be directed to the editor page of that referenced entry. The&nbsp;<a href="https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/about-javascript-live-preview-utils-sdk">Live Preview Utils SDK</a>&nbsp;searches for the elements which contain the edit tags referred to as&nbsp;data-cslp. Edit tags contain the information about where your field exists in the entry. The structure of the&nbsp;edit tag&nbsp;(field location in the entry) you can pass against the&nbsp;data-cslp&nbsp;attribute is as follows:<pre>{content_type_uid}.{entry_uid}.{locale}.{field_uid}</pre>Here's a sample field path<pre>home.blt80654132ff521599.en-us.modular_blocks[0].teaser.heading</pre> Note: If the field is nested within another complex field, such as Modular Blocks, provide the field path as follows:&nbsp;{modular_block_field_UID}.{block_UID}.{field_UID}. For a website built using Contentstack's&nbsp;<a href="https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/about-javascript-delivery-sdk/">JavaScript Delivery SDK</a>, you can use the&nbsp;addEditableTags()&nbsp;method to automatically generate the edit tag for you.&nbsp;<h3>Import the addEditableTags() method</h3> Install Contentstack Utils from npm using the following command:<pre>npm i @contentstack/utils</pre>import&nbsp;addEditableTags using the following commands:&nbsp;<pre>// utils.js import {addEditableTags} from "@contentstack/utils”</pre><h3>Generate edit tags for entry content</h3>To generate entry content, navigate to the code responsible for delivering the entry content. After retrieving data from Contentstack, the resulting entry object is passed to the addEditableTags() method to add edit tags to the previewed entry content.<pre>addEditableTags(entry, content_type_uid, tagsAsObject, locale)</pre>here ,&nbsp;<ul><li>entry:&nbsp;entry object you fetched from Contentstack SDK/API call</li><li>content_type_uid:&nbsp;is the unique ID of the current entry’s content type</li><li>tagsAsObject:&nbsp;By default,&nbsp;tagsAsObject&nbsp;is set to&nbsp;false, and it appends&nbsp;data-cslp&nbsp;in the form of a string cause as follows:</li></ul><pre>'data-cslp=path.to.field'</pre><ul><li>If&nbsp;tagsAsObject&nbsp;is set to&nbsp;true, the&nbsp;data-cslp&nbsp;attribute is returned in object format as follows</li></ul><pre>{'data-cslp: path.to.field'}</pre><ul><li>locale: The locale code used to fetch entry. </li></ul>The&nbsp;addEditableTags() method adds a new key-value pair at every level of your&nbsp;entry result object. where,<ul><li>Key is denoted by $&nbsp;sign</li><li>Value is an object which contains the field name and data-cslp details.</li></ul>For example, if you pass the following object to&nbsp;the&nbsp;addEditableTags&nbsp;method<pre>{ "heading": "Exploring the Vineyards: A Journey through Wine Country", "description": "As a seasoned traveler, you understand the allure of exploring new destinations. One such destination that has been gaining popularity is the wine country.", "cta": { "text": "Learn More", "url": "/explore-the-vineyards" }, }</pre> The result returned will look like:<pre>{ "heading": "Exploring the Vineyards: A Journey through Wine Country", "description": "As a seasoned traveler, you understand the allure of exploring new destinations. One such destination that has been gaining popularity is the wine country.", "cta": { &nbsp; "text": "Learn More", "url": "/explore-the-vineyards", "$": { "text": { "data-cslp": "text_banner.blt6fb37c46b9d17365.cta.text" }, "url": { "data-cslp": "text_banner.blt6fb37c46b9d17365.cta.url" } } }, "$": { "heading": { "data-cslp": "text_banner.blt6fb37c46b9d17365.heading" }, "description": { "data-cslp": "text_banner.blt6fb37c46b9d17365.description" }, "cta": { "data-cslp": "text_banner.blt6fb37c46b9d17365.cta" }, } }</pre><h3>Generate Edit tags example - REST</h3>Once you have retrieved data using the Contentstack, utilize the addEditableTags() function. Pass the retrieved entry into this function to incorporate edit tags into the draft entry content effectively. The following example is using&nbsp;JavaScript Delivery SDK to fetch content.<pre>// utils.js export const getEntryByUrl = async (contentTypeUid, locale, entryUrl) =&gt; { try { const result = Stack.ContentType(contentTypeUid) .Query() .language(locale) .where('url', `${entryUrl}`) .toJSON() .find() addEditableTags(result[0][0], contentTypeUid, true, locale) const data = result[0][0] return data } catch (error) { &nbsp; throw error &nbsp; } }</pre><h3>Generate Edit tags example - Graph QL</h3>Locate the section of your website's code responsible for fetching content from Contentstack. To ensure proper functionality of live editing, it's crucial to retrieve&nbsp;system system {uid}&nbsp;from GraphQL at the root of the query and&nbsp;system {uid, content_type_uid}&nbsp;for all references.Here is an example of the&nbsp;gqlRequest()&nbsp;method for your reference: <pre>export const getHeaderRes = async (): Promise =&gt; { const gql = ` query HeaderQuery { all_header { total items { title logoConnection { edges { node { url filename } } } navigation_menu { label page_referenceConnection { totalCount edges { node { ... on Page { title url system { uid content_type_uid } } } } } } notification_bar { show_announcement announcement_text { json } } system { uid } } } } `;</pre> Next, include _content_type_uid and uid alongside system, and assign the values from system.content_type_uid to _content_type_uid&nbsp;&nbsp;and system.uid to uid:<pre>const transformed = { ...header, logo: header.logoConnection.edges[0].node, navigation_menu: header.navigation_menu.map((item: any) =&gt; ({ ...item, page_reference: item.page_referenceConnection.edges.map((edge: any) =&gt; ({ ...edge.node, uid: edge.node.system.uid, _content_type_uid: edge.node.system.content_type_uid, })), })), uid: header.system.uid, notification_bar: { ...header.notification_bar, }, };</pre> Include data-cslp&nbsp;parameters in transformed response by using addEditableTags() method from @contentstack/utils<pre>addEditableTags(transformed, "header", true);</pre><h3>Set up the Live Preview Utils SDK</h3>To navigate to the correct stack it is required to provide&nbsp;the stackDetails object parameter to the live preview initialization method.<pre>ContentstackLivePreview.init({ ... stackDetails: { apiKey: "your api key", environment: "your environment", branch: "your branch" }, clientUrlParams: { host: "app.contentstack.com",// NA region host }, })</pre> Note: The host value is&nbsp;based on the region where your stack is located<ul><li>US (NA) region host: app.contentstack.com</li><li>EU region host: eu-app.contentstack.com</li><li>Azure NA region host:&nbsp;azure-na-app.contentstack.com</li><li>Azure EU region host:&nbsp;azure-eu-app.contentstack.com</li><li>GCP NA region host:&nbsp;gcp-na-app.contentstack.com</li></ul><h3>Configure live edit tags across webpages</h3><h5>For pure HTML tags (tagsAsObject:false) example:&nbsp;</h5>To add edit tags to your website's HTML:<ol><li>Find the HTML Section: Locate the part of your HTML code where you want to include edit tags.</li><li>Add Edit Tags: To access an edit tag, fetch the path to the field in your entry data and add a dollar sign ($) before the last field in the path.<ul><li>For instance, if the path to your data is data.description.height, the edit tag should be data.description.$.height.</li></ul></li></ol>Example snippet:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9561e0d5f6257c5e/67e1c8296678fd4011aeaa06/ImplementingLivePreview_L7_img-1.png" alt="ImplementingLivePreview_L7_img-1.png" height="auto"/><h5> </h5><h5>React-based Components (tagsAsObject:true) example:&nbsp;</h5>For React-based Applications&nbsp;you can set&nbsp;tagsAsObject to&nbsp;true, by enabling this you will receive edit tag details in object format.&nbsp;You need to destructure the object while passing it within the JSX element.Let's add edit tags to following JSX snippet:&nbsp;<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb3ff4792d476ebc4/67e1c88d0b0fc52dadb4b1d4/ImplementingLivePreview_L7_img-2.png" alt="ImplementingLivePreview_L7_img-2.png" height="auto"/>After adding edit tags the above JSX will be:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltfc04529a9ee43a32/67e1c8ade6ff22567b0d1756/ImplementingLivePreview_L7_img-3.png" alt="ImplementingLivePreview_L7_img-3.png" height="auto"/>

Live Edit Tags

<h3>What is&nbsp;Contentstack Google Chrome Extension?</h3>
The Contentstack Google Chrome Extension enables users to seamlessly transition from a live webpage to its corresponding entry in Contentstack.
When viewing a webpage powered by Contentstack, users with editing permissions will notice an edit button at the bottom right or left of the page. Clicking this button directs them to the corresponding entry in Contentstack.
This feature significantly reduces the time and effort needed to locate specific entries within Contentstack’s web application. It also optimizes the editing experience by allowing users to update content instantly.
 
Steps to setup Chrome Extension:
<ol>
 <li>Install extension from <a href="https://chrome.google.com/webstore/detail/contentstack/kliacmaffhaakhphcelpjcmienmikgoa">Contentstack Google Chrome Extension</a>.</li>
 <li>In the pop-up enter stack and domain&nbsp;settings and button settings. Add the Stack API Key,&nbsp;Hosted Domain Name or Host of your website and select the Region of your organization. 
 <img asset_uid="blt7e91b21db8560d2a" src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7e91b21db8560d2a/67e1cb4c29f30c8409f8e1c0/ImplementingLivePreview_L8_img-1.png" alt="ImplementingLivePreview_L8_img-1.png" height="auto" />
 </li>
 <li>Add the following attributes to the body tag&nbsp;of you websites page:</li>
</ol>
data-pageref: Used to identify the entry UID of the current page data-contenttype: Used to identify the content type UID of the entry data-locale: Used to identify the local of the entry for the current page
Since you might need to configure these three parameters for each page (if there are more than one page in your website), consider creating a helper function and call it on every page.<pre>export const setDataForChromeExtension = (data: { entryUid: string, contenttype: string, locale: string }) =&gt; { document.body.setAttribute('data-pageref', data.entryUid) document.body.setAttribute('data-contenttype', data.contenttype) document.body.setAttribute('data-locale', data.locale) }</pre>


Alternatively you can add these attributes to div tag tag of your component in the website<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt6eeb151ea083de4c/67e1cbf8848c63859acfd7b1/ImplementingLivePreview_L8_img-2.png" alt="ImplementingLivePreview_L8_img-2.png" height="auto" />

After setting this up you will be able to see a button on your webpage which on clicking redirects you to the corresponding entry in Contentstack. 

<script src="https://cdn.jwplayer.com/players/IgGPJf3M-b769H14u.js"></script>

Chrome Extension

<h3>Installing a training instance</h3>
The video below offers a step-by-step visual walkthrough of the process for setting up a training instance in Contentstack. It covers everything from signing up for a training instance to accepting your stack invitation and configuring your account. By the end of this guide, you’ll have your own training instance linked to your organization and stack. This environment will be available to you for 30 days, allowing you to explore and practice using Contentstack’s features. Whether you’re new to Contentstack or looking to enhance your skills, this training instance will give you hands-on experience in a real-world setup.

<script src="https://cdn.jwplayer.com/players/gpZI0u68-b769H14u.js"></script>

<h3>Setting up and Understanding Live Preview in CSR Mode</h3>
The video below provides a detailed, step-by-step visual walkthrough of setting up your stack and code base to enable Live Preview in Client-Side Rendering (CSR) mode. Throughout this course, it will guide you from the basic implementation of Live Preview in your Contentstack stack to the necessary code modifications for enabling Live Preview in a CSR website built with Next.js 14, running locally. It will explain the specific changes required in the code, the reasoning behind them, and how they impact the Live Preview functionality. By the end of this walkthrough, you’ll see exactly how Live Preview will look and work once everything is set up.

<script src="https://cdn.jwplayer.com/players/Q4EQkDSV-b769H14u.js"></script>

<h3>Setting up and Understanding Live Preview in SSR Mode</h3>
The video below provides a detailed, step-by-step visual walkthrough of setting up your stack and code base to enable Live Preview in Server-Side Rendering (SSR) mode. Throughout this course, it will guide you from the basic implementation of Live Preview in your Contentstack stack to the necessary code modifications for enabling Live Preview in a SSR website built with Next.js 14, running locally. It will explain the specific changes required in the code, the reasoning behind them, and how they impact the Live Preview functionality. By the end of this walkthrough, you’ll see exactly how Live Preview will look and work once everything is set up.
 
<blockquote>
 Note: In the SSR video we used a sample SSR app made in NextJS14 with Live Preview 2.0. This might differ from the one present in Sample Starter Apps.
 Sample Env For SSR:<pre>#create environment file name as .env.local #and place following configuration data. CONTENTSTACK_API_KEY=YOUR_API_KEY CONTENTSTACK_DELIVERY_TOKEN=YOUR_DELIVERY_TOKEN CONTENTSTACK_ENVIRONMENT=YOUR_PUBLISHING_ENVIRONMENT # For live preview CONTENTSTACK_PREVIEW_TOKEN= CONTENTSTACK_APP_HOST=app.contentstack.com CONTENTSTACK_API_HOST=cdn.contentstack.io CONTENTSTACK_PREVIEW_HOST=rest-preview.contentstack.com CONTENTSTACK_LIVE_PREVIEW=true CONTENTSTACK_LIVE_EDIT_TAGS=true #site-map NEXT_PUBLIC_HOSTED_URL=http://localhost:3000 # Requires host url for sitemap. Localhost:3000 is set as default value # For Live preview default value is to true to disable live preview set CONTENTSTACK_LIVE_PREVIEW=false # For live edit tags default value is set to false to enable live edit tag set CONTENTSTACK_LIVE_EDIT_TAGS=true # For NA region add CONTENTSTACK_APP_HOST=app.contentstack.com # For EU region add CONTENTSTACK_APP_HOST=eu-app.contentstack.com # For setting custom host add CONTENTSTACK_API_HOST=for(NA: cdn.contentstack.io, EU: eu-cdn.contentstack.com)</pre>
</blockquote>

<script src="https://cdn.jwplayer.com/players/IAemzpqv-b769H14u.js"></script>

Comprehensive guide to setting up CSR and SSR for Live Preview

<h3>Limitations of Live Preview</h3> <ul><li>Incompatibility with websites using third-party website builders or CMS for HTML generation.</li><li>Previewing an individual component is only possible when it is referenced in a page entry.</li><li>Lack of compatibility with native mobile applications.</li><li>Restrictions on previewing content based on user role permissions for accessing entries, specific environments, and languages.</li><li>Requirement for websites to be Iframe-compatible to prevent CORS (Cross-Origin Resource Sharing) errors during preview.</li></ul>

Limitations of Live Preview

<h3>Additional Resources
 </h3><ul><li>Read the Contentstack Docs about <a href="https://www.contentstack.com/docs/developers/set-up-live-preview">Live Preview</a></li><li>Live Preview <a href="https://www.contentstack.com/docs/faqs#live-preview-faqs">FAQs</a></li><li><a href="https://www.contentstack.com/docs/developers/sample-apps">Starter Apps </a>which includes Live Preview implementation</li><li>Live Preview <a href="https://www.contentstack.com/blog/product-updates/live-preview-paves-the-way-for-the-future">Blog</a></li><li>Academy Playground <a href="https://github.com/contentstack/contentstack-academy-playground">Github Repo</a></li></ul>

Implementing Live Preview

Skills Covered