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.

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.

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

npm install @contentstack/live-preview-utils@3

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

<script type='module'>
  import ContentstackLivePreview from 'https://esm.sh/@contentstack/[email protected]';
  ContentstackLivePreview.init({
      stackDetails: {
          apiKey: "your-stack-api-key",
      },
  });
</script>

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

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 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.

To learn how to add live edit tags and configure them for different frameworks or tools, refer to Set Up Live Edit Tags for Entries with REST documentation

• Get Started with JavaScript Delivery SDK and Live Preview