Live Preview

With this feature, you'll be able to manage and preview your content right from the Contentstack panel without publishing it. You can read more about this in Contentstack's documentation.

However, this feature requires some additional custom work with your template and HTML markup.

Setup

First step is adding livePreview configuration object to the cnts config in the middleware.config.js:

module.exports = {
  integrations: {
    cnts: {
      // ... config
        livePreview: {
          managementToken: 'MANAGEMENT_TOKEN',
          enable: true,
          host: 'CONTENT_HOST',
        },
      },
    },
    // ... other configs
  },
}

Example for Nuxt 3.x application (SSR)

Add current Contentstack Live Preview Utils SDK to your nuxt.config.ts file like below:

// nuxt.config.ts
appConfig: {
  contentstackScriptSrc: 'https://unpkg.com/@contentstack/live-preview-utils@^1.2/dist/index.js',
}

Initialize ContentstackLivePreview and fetch your content.

<script setup lang="ts">
import { onMounted, onServerPrefetch, ref } from 'vue';
import { sdk } from '~/sdk';

const { contentstackScriptSrc } = useAppConfig();
const route = useRoute();

const content = ref();

useHead({
  script: [
    {
      src: contentstackScriptSrc,
      onload: () => {
        window.ContentstackLivePreview.init();
      }
    }
  ]
});

onMounted(async () => {
  content.value = await sdk.cms.getContent({
    url: 'example',
    livePreviewQuery: route.query
  });
});

onServerPrefetch(async () => {
  content.value = await sdk.cms.getContent({
    url: 'example',
    livePreviewQuery: route.query
  });
});
</script>

<template>
  <div v-if="content">
    <render-content :content="content" />
  </div>
</template>

Example for Next.js application (SSR)

Initialize ContentstackLivePreview and fetch your content.

import { GetServerSidePropsContext } from 'next';
import Script from 'next/script';
import RenderContent from '~/components/cms/RenderContent';
import { sdk } from '~/sdk';

export async function getServerSideProps({
  locale,
  query
}: GetServerSidePropsContext) {
  const content = await sdk.cms.getContent({
    url: 'example',
    livePreviewQuery: query
  });

  return {
    props: {
      content
    }
  };
}

export function CmsPage({ content }) {
  return (
    <>
      <Script
        src="https://unpkg.com/@contentstack/live-preview-utils@^1.2/dist/index.js"
        onLoad={() => {
          window.ContentstackLivePreview.init();
        }}
      />
      <div className="my-5">
        {content && <RenderContent content={content} />}
      </div>
    </>
  );
}

export default CmsPage;