Set Up Live Preview for Your Website

Live Preview lets you preview the changes made to your entry before they're published to the live site. Content managers can preview draft content in real-time across multiple digital channels.

Note: The Live Preview feature currently works only for web-based applications. We will provide support for mobile-based applications in the future.

GraphQL and REST APIs differ in how they structure data requests. In REST, each endpoint typically corresponds to a specific resource, and clients must make multiple requests to different endpoints to fetch related data. GraphQL, on the other hand, provides a more flexible approach.

You can set up Live Preview for your stack using following methods:

• Live Preview with GraphQL for Client-side Rendering (CSR)
• Live Preview with GraphQL for Server-side Rendering (SSR)
• Gatsby-powered Sites
• Live Preview with REST for Client-side Rendering (CSR)
• Live Preview with REST for Server-side Rendering (SSR)
• Set up Live Preview for Static-Site Generator (SSG)

Live Preview with GraphQL for Client-side Rendering (CSR)

Client-side rendering (CSR) is a technique in which developers use JavaScript to render content directly in a user's browser. Now, with Live Preview and GraphQL for CSR, you can experience the real-time data preview capabilities powered by GraphQL APIs.

Additional Resource: For detailed information on setting up live preview with GrapQL for client-side rendering sites, refer to our Set up Live Preview with GraphQL for Client-side Rendering (CSR) document.

Live Preview with GraphQL for Server-side Rendering (SSR)

Server-side rendering (SSR) is a method where an application produces HTML pages on the server rather than relying on the user's browser. When it comes to Live Preview with GraphQL for SSR, it allows you to effortlessly preview data in real-time through GraphQL APIs.

Additional Resource: For detailed information on setting up live preview with GrapQL for server-side rendering sites, refer to our Set-up Live Preview with GraphQL for Server-side Rendering (SSR) document.

Gatsby-powered Sites

Gatsby is an open-source framework that merges the capabilities of React, GraphQL, and Webpack into a unified tool for crafting static websites and applications. By enabling live preview on your Gatsby websites, you unlock the power of real-time data previews.

Additional Resource: For detailed information on setting up live preview for Gatsby powered sites, refer to our Set up Live Preview for Gatsby-powered Sites document.

Live Preview with REST for Client-side Rendering (CSR)

Client-side rendering (CSR) is a method where developers use JavaScript to render content directly in a user's browser. With live preview for REST, you gain the ability to preview data in real-time, all made possible through REST APIs.

Additional Resource: For detailed information on setting up live preview with REST for client-side rendering sites, refer to our Set-up Live Preview with REST for Client-side Rendering (CSR) document.

Live Preview with REST for Server-side Rendering (SSR)

Server-side rendering (SSR) is a technique in which an application generates HTML pages on the server, rather than in the user's browser, resulting in fully rendered HTML client pages. With live preview for REST, you can experience real-time data previews, all made possible through REST APIs.

Additional Resource: For detailed information on setting up live preview with REST for server-side rendering sites, refer to our Set-up Live Preview with REST for Server-side Rendering (SSR) document.

Live Preview for Static Site Generator(SSG)

Static Site Generators (SSGs) empower users to generate static HTML websites from raw data and templates, commonly employed for sites with minimal dynamic content requirements.

In the context of Live Preview, such websites leverage Live Preview in Client-side Rendering (CSR) mode. Now, let's delve into the detailed steps for configuring Live Preview for your SSG websites.

Addtional Resource: For detailed information on setting up live preview with REST for static sites generator (SSG) refer to our Set up Live Preview for Static-Site Generator (SSG) document.