Real-time preview of changes on website

ppds.website · November 17, 2025, 9:39am

Hi

Both in Professional and Enterprise plan it indicates that Preview is available within editor of Dato interface but I could not find this option. Can someone help me?

m.finamor · November 17, 2025, 9:50am

The “Preview within editor” feature is available on all plans, but it is not automatic. To see the preview inside Dato, you first need to set up our “Web Previews” plugin and connect it to your frontend. The plugin is here:
https://www.datocms.com/marketplace/plugins/i/datocms-plugin-web-previews

At a high level, you need two things: the plugin configured in Dato, and a preview endpoint implemented in your website code.

Inside Dato, go to Settings → Plugins → Add new plugin, search for “Web Previews” and install it. In the plugin configuration, you tell Dato, for each model you care about, which URL to open for preview. Typically this is something like https://your-site.com/api/preview?slug={slug} or a path like /blog/{slug}. The plugin lets you use placeholders such as {slug} or {id} that are filled from the record fields. You will also want to use a Preview API token so that your frontend can fetch draft content; you can create that under Settings → API tokens, then reference it in your frontend code, not directly in the plugin config.

On your frontend, you need a preview handler that turns on preview mode and fetches draft content from Dato using that Preview API token. For example, in Next.js this is usually an /api/preview route that reads the query params from the URL, enables previewMode, and then redirects to the correct page. The page then uses the preview flag to fetch data using the Preview API instead of the Published API. Once this is in place, when you open a record in Dato you will see the “Open preview” button from the plugin, and clicking it will open the live preview of that specific record using your code.

If you want to see concrete examples, both of these open source demos implement web previews end to end:

Next.js ecommerce demo with previews:
https://github.com/datocms/ecommerce-website-demo/tree/main

Next.js landing page demo with previews:
https://github.com/datocms/next-landing-page-demo/tree/main

In both repos you can look for the preview API route and how they pass the preview URL to Dato to replicate the same pattern in your project.

github.com/datocms/ecommerce-website-demo

app/api/draft/preview-links/route.tsx

main

import type { SiteLocale } from '@/graphql/types/graphql';
import { headers as getHeaders } from 'next/headers';
import type { NextRequest } from 'next/server';

type generatePreviewUrlParams = {
  item: any;
  itemType: any;
  locale: SiteLocale;
};

const generatePreviewUrl = ({
  item,
  itemType,
  locale,
}: generatePreviewUrlParams) => {
  switch (itemType.attributes.api_key) {
    case 'home':
      return `/${locale}/home`;
    case 'showcase':
      return `/${locale}/showcase`;

This file has been truncated. show original

If you’re using a different framework than NextJS please let me know!