Get Started with JavaScript Live Preview Utils SDK

Contentstack is a headless CMS with an API-first approach. It is a CMS that developers can use to build powerful cross-platform applications in their favorite languages. Build your application frontend, and Contentstack will take care of the rest.

Additional Resource: Refer to our documentation on Omnichannel Content Preview Experience to learn how we help speed up the content creation process.

Contentstack provides the Live Preview Utils SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting live changes to the preview pane in the entry editor.

Prerequisites

The Live Preview Utils SDK package can be loaded for any project that uses Contentstack SDKs. To use edit tags while previewing content, you need a valid stack API Key.

Setup and Installation

To install the Live Preview Utils SDK package via npm, use the following command:

npm install @contentstack/live-preview-utils

Alternatively, if you want to include the SDK package directly in your website HTML code, use the following command:

<script src="https://unpkg.com/@contentstack/live-preview-utils@1.0.0/dist/index.js"></script>

Initializing the SDK

Since the Live Preview Utils SDK is responsible for communication, you need to only initialize it. Use the following command to initialize the SDK:

javascript
import ContentstackLivePreview from "@contentstack/live-preview-utils";

ContentstackLivePreview.init({
    enable: true,
    stackDetails: {
        apiKey: "your-stack-api-key",
    },
});

Alternatively, if you want to initialize the SDK directly in the HTML tag, use the class attribute named ContentstackLivePreview as follows:

<script>
    ContentstackLivePreview.init({
        enable: true,
        stackDetails: {
            apiKey: "your-stack-api-key",
        },
    });
</script>

Live Editing

Live Preview allows you to click on edit tags beside specific content blocks in the preview window to quickly scroll to the corresponding field. You can edit and preview the content changes side by side. Live edit tags are identified through the data-cslp attribute within the HTML tags. The styles for the live edit tags are available in the @contentstack/live-preview-utils/dist/main.css file.

To use the live edit tags within your stack, you need to include them in your main index.js file as follows:

javascript
import "@contentstack/live-preview-utils/dist/main.css";

Additional Resource: For more information on the JavaScript Live Preview Utils SDK, you can refer to our GitHub reference documentation.

More Resources

• Get Started with JavaScript Delivery SDK and Live Preview