Web Previews DatoCMS plugin

The plugin adds several touchpoints to the DatoCMS UI:

- A "Visual" tab in the main navigation: a full-screen, side-by-side editing view where the website preview sits next to the editing panel. Editors click on any element in the preview, and the corresponding record and field open right there. The tab includes:
- An address bar for navigating the preview
- Viewport controls for testing responsive layouts
- A frontend selector for switching between environments (e.g. production vs. staging)

- Preview links in the record sidebar: when editors open any record, they see quick links to view that content on the actual website. The plugin determines which URL corresponds to each record by calling an API endpoint on your frontend.

- A full iframe preview in the sidebar: beyond just links, editors can expand an inline preview of the page directly in the sidebar, with viewport presets (mobile, tablet, desktop) and auto-reload on save.

The plugin supports multiple frontends, so if your content powers different websites or environments, editors can switch between them from a single dropdown.

Each feature can be enabled independently per frontend — they work great together, but each is useful on its own.

> Important: This plugin requires configuration and development work. You'll need to implement API endpoints on your frontend website(s) for it to function. Read more in the following sections.

Installation and configuration

Once the plugin is installed, you'll see four configuration sections:

$3

Configure your project's frontends and the features each provides (e.g., "Production", "Staging", "Marketing Site"). For each frontend, you can enable:

#### Feature 1: Preview Links

When enabled, the plugin calls your API endpoint to retrieve preview URLs for the current record. You can then control how these links are displayed in the Record Sidebar (see section below).

Required configuration:
- API endpoint URL — The endpoint that returns preview links (e.g., https://yourwebsite.com/api/preview-links)
- Custom Headers (Optional) — Additional headers to send with the API request

#### Feature 2: Visual Editing

When enabled, editors can open a full-screen, side-by-side view with click-to-edit overlays on your actual website. Visual Editing shows your website in an iframe and adds interactive editing capabilities.

Required configuration:
- Enable Draft Mode route — The route that enables draft/preview mode (e.g., https://yourwebsite.com/api/draft). This route receives a redirect query parameter with the path to load.
- Initial Path (Optional) — The default path to load when opening Visual Editing (defaults to / if not specified)

#### Valid configurations per frontend

- ✅ Only Preview Links — Sidebar with preview URLs (optionally shown as links or in an iframe)
- ✅ Only Visual Editing — Direct access to full-screen side-by-side editing with overlays
- ✅ Both features together — Full integration with sidebar preview links and visual editing

#### Multiple frontends support

You can configure multiple frontends, each with their own combination of features. When multiple frontends have Visual Editing enabled, a frontend selector dropdown appears in the Visual Editing toolbar, allowing editors to switch between different environments.

$3

Configure display options for preview links shown in a DatoCMS record sidebar. When Preview Links is enabled for at least one frontend, you can control how the preview URLs are displayed:

#### Sidebar Panel
Toggle: Enable Sidebar Panel

Shows a small panel in the record sidebar with quick links to preview URLs. Links open in a new browser tab when clicked.

!Preview Links Panel

Optional settings:
- Start with the panel open by default — The panel will be expanded when users open a record

#### Full Preview Sidebar
Toggle: Enable Full Preview Sidebar

Shows a full sidebar with an iframe preview of the selected URL. This provides a side-by-side view of your website directly within DatoCMS.

!Full Preview Sidebar

!Full Preview Sidebar with Multiple Links

Optional settings:
- Default sidebar width (px) — The initial width when the sidebar is opened

Note: Both the Sidebar Panel and Full Preview Sidebar can be enabled together. The Full Preview Sidebar shows the same URLs returned by your API endpoint, but renders them in an iframe for in-app preview.

$3

Configure viewport size presets for testing different screen sizes in iframe previews. Define custom viewport dimensions (name, width, height, icon) to quickly test responsive layouts.

$3

Configure iframe permissions and security settings:

- Iframe allow attribute — Defines what features will be available to the </code> pointing to the frontend (e.g., access to microphone, camera). <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#allow" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Learn more</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Content Security Policy</h2></p><p class="my-3">⚠️ For side-by-side previews to work, if your website implements a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Content Security Policy <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">frame-ancestors</code> directive</a>, you need to add <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">https://plugins-cdn.datocms.com</code> to your list of allowed sources:</p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />Content-Security-Policy: frame-ancestors 'self' https://plugins-cdn.datocms.com;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">The Preview Links API endpoint</h2></p><p class="my-3">Each frontend must implement a CORS-ready JSON endpoint that, given a specific DatoCMS record, returns an array of preview link(s).</p><p class="my-3">The plugin performs a POST request to the Preview Links API endpoint URL, passing a payload that includes the current environment, record and model:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">json<br />{<br /> "item": {…},<br /> "itemType": {…},<br /> "currentUser": {…},<br /> "siteId": "123",<br /> "environmentId": "main",<br /> "locale": "en",<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">- </code>item<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: <a href="https://www.datocms.com/docs/content-management-api/resources/item" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">CMA entity</a> of the current record<br />- </code>itemType<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: <a href="https://www.datocms.com/docs/content-management-api/resources/item-type" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">CMA entity</a> of the model of the current record<br />- </code>currentUser<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: CMA entity of the <a href="https://www.datocms.com/docs/content-management-api/resources/user" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">collaborator</a>, <a href="https://www.datocms.com/docs/content-management-api/resources/sso-user" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">SSO user</a> or <a href="https://www.datocms.com/docs/content-management-api/resources/account" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">account owner</a> currently logged in<br />- </code>siteId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: the ID of the current DatoCMS project<br />- </code>environmentId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: the current environment ID<br />- </code>locale<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: the locale currently active on the form</p><p class="my-3">The endpoint is expected to return a </code>200<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> response, with the following JSON structure:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">json<br />{<br /> "previewLinks": [<br /> {<br /> "label": "Published (en)",<br /> "url": "https://mysite.com/blog/my-article"<br /> },<br /> {<br /> "label": "Draft (en)",<br /> "url": "https://mysite.com/api/preview/start?slug=/blog/my-article"<br /> }<br /> ]<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The plugin will show all the preview links that are returned. If you want to make sure that a preview's URL is reloaded after each save, you can include an extra option (please be aware that because of cross-origin iframe issues, maintaining the scroll position between reloads will not be possible):</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">json<br />{<br /> "label": "Draft (en)",<br /> "url": "https://mysite.com/api/preview/start?slug=/blog/my-article",<br /> "reloadPreviewOnRecordUpdate": { "delayInMs": 100 }<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">The Enable Draft Mode route</h2></p><p class="my-3">When Visual Editing is enabled, your frontend must implement a route that enables draft/preview mode and redirects to the requested page. This route is called whenever the Visual Editing iframe needs to load a page in draft mode.</p><p class="my-3">The plugin takes the Enable Draft Mode route URL from your configuration and adds a </code>redirect<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> query parameter to it:</p><p class="my-3">- </code>redirect<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: The relative path to redirect to after enabling draft mode (e.g., </code>/blog/my-article<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>/products/shoes<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</p><p class="my-3"><strong>Important:</strong> The plugin preserves any existing query parameters in your configured URL. For example, if you configure the route as </code>https://yourwebsite.com/api/draft?token=secret123<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, the plugin will call </code>https://yourwebsite.com/api/draft?token=secret123&redirect=/blog/my-article<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. This allows you to include authentication tokens or other parameters in your configured URL.</p><p class="my-3">The </code>redirect<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> parameter contains the path to load, NOT the full URL. Your route should validate that it's a relative path to prevent open redirect vulnerabilities.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">1. <strong>Validate authentication</strong> (if needed) — If you included a token or other auth parameters in your configured URL, verify them<br />2. <strong>Validate the redirect path</strong> — Ensure the </code>redirect<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> parameter is a relative URL (not an absolute URL) to prevent open redirect attacks<br />3. <strong>Enable draft/preview mode</strong> — Set the appropriate cookies or session data to enable your framework's draft mode<br />4. <strong>Redirect to the requested path</strong> — Redirect the user to the path specified in the </code>redirect<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> parameter</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">If you configure the Enable Draft Mode route as:<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />https://yourwebsite.com/api/draft?token=your-secret-token<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">And Visual Editing opens with the path </code>/blog/my-article<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, the plugin will make a request to:<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />GET https://yourwebsite.com/api/draft?token=your-secret-token&redirect=/blog/my-article<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Your route should:<br />1. Validate the token matches your environment variable<br />2. Verify </code>/blog/my-article<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is a relative path<br />3. Enable draft mode (set cookies, etc.)<br />4. Redirect to </code>/blog/my-article<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The browser will then load </code>/blog/my-article<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> with draft mode enabled, showing unpublished content in the Visual Editing iframe.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Implementation examples</h2></p><p class="my-3">If you have built alternative endpoint implementations for other frameworks/SSGs, please open up a PR to this plugin and share it with the community!</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">We suggest you look at the code of our <a href="https://github.com/datocms/nextjs-starter-kit" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">official Starter Kit</a>:</p><p class="my-3">* Route handler for the Preview Links API endpoint: <a href="https://github.com/datocms/nextjs-starter-kit/blob/main/src/app/api/preview-links/route.tsx" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>app/api/preview-links/route.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a><br />* Enable Draft Mode route (and optional disable route) for Next.js <a href="https://www.datocms.com/docs/next-js/setting-up-next-js-draft-mode" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Draft Mode</a>: <a href="https://github.com/datocms/nextjs-starter-kit/blob/main/src/app/api/draft-mode/enable/route.tsx" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>app/api/draft-mode/enable/route.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> and <a href="https://github.com/datocms/nextjs-starter-kit/blob/main/src/app/api/draft-mode/disable/route.tsx" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>app/api/draft-mode/disable/route.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a></p><p class="my-3">The preview link URLs also include a </code>token<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> query parameter that the plugin would send to the API endpoint, like </code>https://www.mywebsite.com/api/preview-links?token=some-secret-ish-string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. The </code>token<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is a string of your choice that just has to match in both the plugin settings and <a href="https://github.com/datocms/nextjs-starter-kit/blob/main/src/app/api/preview-links/route.tsx#L31-L34" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">in your frontend's environment variables</a>. While not encryption, this token is an easy way to limit access to your preview content.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">We suggest you look at the code of our <a href="https://github.com/datocms/nuxt-starter-kit" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">official Starter Kit</a>:</p><p class="my-3">* Route handler for the Preview Links API endpoint: <a href="https://github.com/datocms/nuxt-starter-kit/blob/main/server/api/preview-links/index.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">server/api/preview-links/index.ts</a><br />* Enable Draft Mode route (and optional disable route): <a href="https://github.com/datocms/nuxt-starter-kit/blob/main/server/api/draft-mode/enable.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>server/api/draft-mode/enable.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> and <a href="https://github.com/datocms/nuxt-starter-kit/blob/main/server/api/draft-mode/disable.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>server/api/draft-mode/disable.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a></p><p class="my-3">The preview link URLs also include a </code>token<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> query parameter that the plugin would send to the API endpoint, like </code>https://www.mywebsite.com/api/preview-links?token=some-secret-ish-string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. The </code>token<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is a string of your choice that just has to match in both the plugin settings and <a href="https://github.com/datocms/nuxt-starter-kit/blob/main/server/api/preview-links/index.ts#L42-L44" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">in your frontend's environment variables</a>. While not encryption, this token is an easy way to limit access to your preview content.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">We suggest you look at the code of our <a href="https://github.com/datocms/sveltekit-starter-kit" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">official Starter Kit</a>:</p><p class="my-3">* Route handler for the Preview Links API endpoint: <a href="https://github.com/datocms/sveltekit-starter-kit/blob/main/src/routes/api/preview-links/%2Bserver.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>src/routes/api/preview-links/+server.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a><br />* Enable Draft Mode route (and optional disable route): <a href="https://github.com/datocms/sveltekit-starter-kit/blob/main/src/routes/api/draft-mode/enable/%2Bserver.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>routes/api/draft-mode/enable/+server.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> and <a href="https://github.com/datocms/sveltekit-starter-kit/blob/main/src/routes/api/draft-mode/disable/%2Bserver.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>routes/api/draft-mode/disable/+server.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a></p><p class="my-3">The preview link URLs also include a </code>token<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> query parameter that the plugin would send to the API endpoint, like </code>https://www.mywebsite.com/api/preview-links?token=some-secret-ish-string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. The </code>token<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is a string of your choice that just has to match in both the plugin settings and <a href="https://github.com/datocms/sveltekit-starter-kit/blob/main/src/routes/api/preview-links/%2Bserver.ts#L34-L36" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">in your frontend's environment variables</a>. While not encryption, this token is an easy way to limit access to your preview content.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">We suggest you look at the code of our <a href="https://github.com/datocms/astro-starter-kit" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">official Starter Kit</a>:</p><p class="my-3">* Route handler for the Preview Links API endpoint: <a href="https://github.com/datocms/astro-starter-kit/blob/main/src/pages/api/preview-links/index.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>src/pages/api/preview-links/index.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a><br />* Enable Draft Mode route (and optional disable route): <a href="https://github.com/datocms/astro-starter-kit/blob/main/src/pages/api/draft-mode/enable/index.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>src/pages/api/draft-mode/enable/index.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> and <a href="https://github.com/datocms/astro-starter-kit/blob/main/src/pages/api/draft-mode/disable/index.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>src/pages/api/draft-mode/disable/index.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a></p><p class="my-3">The preview link URLs also include a </code>token<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> query parameter that the plugin would send to the API endpoint, like </code>https://www.mywebsite.com/api/preview-links?token=some-secret-ish-string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. The </code>token` is a string of your choice that just has to match in both the plugin settings and <a href="https://github.com/datocms/astro-starter-kit/blob/main/src/pages/api/preview-links/index.ts#L33-L35" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">in your frontend's environment variables</a>. While not encryption, this token is an easy way to limit access to your preview content.</p><p class="my-3"></p><p class="my-3"></p><p class="my-3"><br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div><div class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-full max-w-xl"></div><div class="flex gap-2"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-16"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-20"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-14"></div></div></div><div class="w-full lg:w-80"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-32 w-full"></div></div></div><div class="space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-64 w-full"></div></div></div></main></div><script>requestAnimationFrame(function(){$RT=performance.now()});</script><script src="/_next/static/chunks/9b9784636e791b20.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n3:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n4:I[49786,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Header\"]\n5:I[22016,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"\"]\nc:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\nd:I[2355,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Analytics\"]\nf:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"OutletBoundary\"]\n10:\"$Sreact.suspense\"\n12:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ViewportBoundary\"]\n14:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"MetadataBoundary\"]\n:HL[\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/media/68d403cf9f2c68c5-s.p.f9f15f61.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"x_DymHuNhDTJUp7Mmr_Ru\",\"c\":[\"\",\"package\",\"datocms-plugin-web-previews\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"package\",{\"children\":[[\"name\",\"datocms-plugin-web-previews\",\"c\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"font-sans antialiased\",\"children\":[[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto flex max-w-md flex-col items-center justify-center px-4 py-24 text-center\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-package mb-6 h-16 w-16 text-muted-foreground\",\"children\":[[\"$\",\"path\",\"1a0edw\",{\"d\":\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"}],[\"$\",\"path\",\"d0xqtd\",{\"d\":\"M12 22V12\"}],[\"$\",\"path\",\"yx3hmr\",{\"d\":\"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7\"}],[\"$\",\"path\",\"1c824w\",{\"d\":\"m7.5 4.27 9 5.15\"}],\"$undefined\"]}],[\"$\",\"h1\",null,{\"className\":\"mb-2 text-3xl font-bold\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mb-4 text-xl text-muted-foreground\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"mb-8 text-muted-foreground\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"/\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"Go home\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}],[\"$\",\"$L5\",null,{\"href\":\"/search\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-search mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"circle\",\"4ej97u\",{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"8\"}],[\"$\",\"path\",\"1qie3q\",{\"d\":\"m21 21-4.3-4.3\"}],\"$undefined\"]}],\"Search packages\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}]]}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],\"$L6\"]}]}]]}],{\"children\":[\"$L7\",{\"children\":[\"$L8\",{\"children\":[\"$L9\",{},null,false,false]},[\"$La\",[],[]],false,false]},null,false,false]},null,false,false],\"$Lb\",false]],\"m\":\"$undefined\",\"G\":[\"$c\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"$Ld\",null,{}]\n7:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n8:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n9:[\"$\",\"$1\",\"c\",{\"children\":[\"$Le\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@11\"}]}]]}]\na:null\nb:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L12\",null,{\"children\":\"$L13\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L15\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n"])</script><script>self.__next_f.push([1,"e:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto max-w-6xl px-4 py-8\",\"children\":[\"$\",\"$10\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-full max-w-xl\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-16\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-20\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-14\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"w-full lg:w-80\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-32 w-full\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-64 w-full\"}]]}]]}],\"children\":\"$L16\"}]}]]}]\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"IconMark\"]\n11:null\n15:[[\"$\",\"title\",\"0\",{\"children\":\"datocms-plugin-web-previews - npm explorer\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Add a Visual tab for full-screen side-by-side editing with click-to-edit overlays, preview links in the record sidebar, and inline iframe previews with viewport presets\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/icon-light-32x32.png\",\"media\":\"(prefers-color-scheme: light)\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/icon-dark-32x32.png\",\"media\":\"(prefers-color-scheme: dark)\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/icon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"5\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png\"}],[\"$\",\"$L17\",\"6\",{}]]\n"])</script><title>datocms-plugin-web-previews - npm explorer</title><meta name="description" content="Add a Visual tab for full-screen side-by-side editing with click-to-edit overlays, preview links in the record sidebar, and inline iframe previews with viewport presets"/><link rel="icon" href="/icon-light-32x32.png" media="(prefers-color-scheme: light)"/><link rel="icon" href="/icon-dark-32x32.png" media="(prefers-color-scheme: dark)"/><link rel="icon" href="/icon.svg" type="image/svg+xml"/><link rel="apple-touch-icon" href="/apple-icon.png"/><script >document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><div style="display:none" id="S:2"></div><script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0}; $RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:2","S:2")</script><div style="display:none" id="S:0"></div><script>$RC("B:0","S:0")</script><script>self.__next_f.push([1,"16:[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-start gap-3\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"font-mono text-2xl font-bold sm:text-3xl\",\"children\":\"datocms-plugin-web-previews\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 font-mono\",\"children\":[\"v\",\"1.0.30\"]}],\"$undefined\",\"$undefined\"]}]]}],\"$undefined\",[\"$\",\"p\",null,{\"className\":\"text-lg text-muted-foreground\",\"children\":\"Add a Visual tab for full-screen side-by-side editing with click-to-edit overlays, preview links in the record sidebar, and inline iframe previews with viewport presets\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-1.5\",\"children\":[[\"$\",\"$L5\",\"datocms\",{\"href\":\"/search?q=datocms\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"datocms\"}]}],[\"$\",\"$L5\",\"datocms-plugin\",{\"href\":\"/search?q=datocms-plugin\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"datocms-plugin\"}]}],[\"$\",\"$L5\",\"sidebar\",{\"href\":\"/search?q=sidebar\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"sidebar\"}]}],[\"$\",\"$L5\",\"preview\",{\"href\":\"/search?q=preview\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"preview\"}]}],\"$L18\"]}],\"$L19\",\"$L1a\"]}],\"$L1b\"]}],\"$L1c\"]}]\n"])</script><script>self.__next_f.push([1,"1d:I[33485,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"InstallCommands\"]\n1e:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Tabs\"]\n1f:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsList\"]\n20:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsTrigger\"]\n21:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsContent\"]\n22:I[77801,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ReadmeViewer\"]\n18:[\"$\",\"$L5\",\"links\",{\"href\":\"/search?q=links\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"links\"}]}]\n"])</script><script>self.__next_f.push([1,"19:[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-4 text-sm text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-download h-4 w-4\",\"children\":[[\"$\",\"path\",\"ih7n3h\",{\"d\":\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"}],[\"$\",\"polyline\",\"2ggqvy\",{\"points\":\"7 10 12 15 17 10\"}],[\"$\",\"line\",\"1vk2je\",{\"x1\":\"12\",\"x2\":\"12\",\"y1\":\"15\",\"y2\":\"3\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"169\"}],\"/week\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-4 w-4\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],\"Updated \",\"6 days ago\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-scale h-4 w-4\",\"children\":[[\"$\",\"path\",\"7g6ntu\",{\"d\":\"m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z\"}],[\"$\",\"path\",\"ijws7r\",{\"d\":\"m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z\"}],[\"$\",\"path\",\"1b0cd5\",{\"d\":\"M7 21h10\"}],[\"$\",\"path\",\"108xh3\",{\"d\":\"M12 3v18\"}],[\"$\",\"path\",\"3gwbw2\",{\"d\":\"M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2\"}],\"$undefined\"]}],\"GPLv3\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[\"Unpacked: \",\"99.1 MB\"]}]]}]\n"])</script><script>self.__next_f.push([1,"1a:[\"$\",\"div\",null,{\"className\":\"text-sm\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-muted-foreground\",\"children\":\"Published by \"}],[\"$\",\"$L5\",null,{\"href\":\"/~DatoCMS\",\"className\":\"font-medium hover:underline\",\"children\":\"DatoCMS\"}]]}]\n"])</script><script>self.__next_f.push([1,"1b:[\"$\",\"div\",null,{\"className\":\"w-full space-y-4 lg:w-80\",\"children\":[[\"$\",\"$L1d\",null,{\"packageName\":\"datocms-plugin-web-previews\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2\",\"children\":[null,[\"$\",\"a\",null,{\"href\":\"https://github.com/datocms/plugins/tree/master/web-previews#readme\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"Homepage\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[\u003esvg]:px-2.5\",\"ref\":null}],\"$undefined\",[\"$\",\"a\",null,{\"href\":\"https://npmjs.com/package/datocms-plugin-web-previews\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-external-link mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"1q9fwt\",{\"d\":\"M15 3h6v6\"}],[\"$\",\"path\",\"gplh6r\",{\"d\":\"M10 14 21 3\"}],[\"$\",\"path\",\"a6xqqp\",{\"d\":\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"}],\"$undefined\"]}],\"npm\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[\u003esvg]:px-2.5\",\"ref\":null}]]}],[\"$\",\"div\",null,{\"className\":\"rounded-lg border p-3\",\"children\":[[\"$\",\"h4\",null,{\"className\":\"mb-2 text-sm font-medium\",\"children\":\"Dist Tags\"}],[\"$\",\"div\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"div\",\"latest\",{\"className\":\"flex justify-between text-sm\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-muted-foreground\",\"children\":\"latest\"}],[\"$\",\"$L5\",null,{\"href\":\"/package/datocms-plugin-web-previews/v/1.0.30\",\"className\":\"font-mono text-xs hover:underline\",\"children\":\"1.0.30\"}]]}],[\"$\",\"div\",\"next\",{\"className\":\"flex justify-between text-sm\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-muted-foreground\",\"children\":\"next\"}],[\"$\",\"$L5\",null,{\"href\":\"/package/datocms-plugin-web-previews/v/1.0.29\",\"className\":\"font-mono text-xs hover:underline\",\"children\":\"1.0.29\"}]]}]]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"23:T399c,"])</script><script>self.__next_f.push([1,"# Web Previews DatoCMS plugin\n\nThe plugin adds several touchpoints to the DatoCMS UI:\n\n- **A \"Visual\" tab in the main navigation**: a full-screen, side-by-side editing view where the website preview sits next to the editing panel. Editors click on any element in the preview, and the corresponding record and field open right there. The tab includes:\n - An address bar for navigating the preview\n - Viewport controls for testing responsive layouts\n - A frontend selector for switching between environments (e.g. production vs. staging)\n\n- **Preview links in the record sidebar**: when editors open any record, they see quick links to view that content on the actual website. The plugin determines which URL corresponds to each record by calling an API endpoint on your frontend.\n\n- **A full iframe preview in the sidebar**: beyond just links, editors can expand an inline preview of the page directly in the sidebar, with viewport presets (mobile, tablet, desktop) and auto-reload on save.\n\nThe plugin supports **multiple frontends**, so if your content powers different websites or environments, editors can switch between them from a single dropdown.\n\nEach feature can be enabled independently per frontend — they work great together, but each is useful on its own.\n\n\u003e **Important:** This plugin requires configuration and development work. You'll need to implement API endpoints on your frontend website(s) for it to function. Read more in the following sections.\n\n## Installation and configuration\n\nOnce the plugin is installed, you'll see four configuration sections:\n\n### 1. Frontends\n\nConfigure your project's frontends and the features each provides (e.g., \"Production\", \"Staging\", \"Marketing Site\"). For each frontend, you can enable:\n\n#### Feature 1: Preview Links\n\nWhen enabled, the plugin calls your API endpoint to retrieve preview URLs for the current record. You can then control how these links are displayed in the Record Sidebar (see section below).\n\n**Required configuration:**\n- **API endpoint URL** — The endpoint that returns preview links (e.g., `https://yourwebsite.com/api/preview-links`)\n- **Custom Headers (Optional)** — Additional headers to send with the API request\n\n#### Feature 2: Visual Editing\n\nWhen enabled, editors can open a full-screen, side-by-side view with click-to-edit overlays on your actual website. Visual Editing shows your website in an iframe and adds interactive editing capabilities.\n\n**Required configuration:**\n- **Enable Draft Mode route** — The route that enables draft/preview mode (e.g., `https://yourwebsite.com/api/draft`). This route receives a `redirect` query parameter with the path to load.\n- **Initial Path (Optional)** — The default path to load when opening Visual Editing (defaults to `/` if not specified)\n\n#### Valid configurations per frontend\n\n- ✅ **Only Preview Links** — Sidebar with preview URLs (optionally shown as links or in an iframe)\n- ✅ **Only Visual Editing** — Direct access to full-screen side-by-side editing with overlays\n- ✅ **Both features together** — Full integration with sidebar preview links and visual editing\n\n#### Multiple frontends support\n\nYou can configure multiple frontends, each with their own combination of features. When multiple frontends have Visual Editing enabled, a frontend selector dropdown appears in the Visual Editing toolbar, allowing editors to switch between different environments.\n\n### 2. Record Sidebar display settings\n\nConfigure display options for preview links shown in a DatoCMS record sidebar. When Preview Links is enabled for at least one frontend, you can control how the preview URLs are displayed:\n\n#### Sidebar Panel\n**Toggle:** Enable Sidebar Panel\n\nShows a small panel in the record sidebar with quick links to preview URLs. Links open in a new browser tab when clicked.\n\n![Preview Links Panel](docs/preview-links-panel.png)\n\n**Optional settings:**\n- **Start with the panel open by default** — The panel will be expanded when users open a record\n\n#### Full Preview Sidebar\n**Toggle:** Enable Full Preview Sidebar\n\nShows a full sidebar with an iframe preview of the selected URL. This provides a side-by-side view of your website directly within DatoCMS.\n\n![Full Preview Sidebar](docs/preview-links-sidebar-1.png)\n\n![Full Preview Sidebar with Multiple Links](docs/preview-links-sidebar-2.png)\n\n**Optional settings:**\n- **Default sidebar width (px)** — The initial width when the sidebar is opened\n\n**Note:** Both the Sidebar Panel and Full Preview Sidebar can be enabled together. The Full Preview Sidebar shows the same URLs returned by your API endpoint, but renders them in an iframe for in-app preview.\n\n### 3. Custom viewports\n\nConfigure viewport size presets for testing different screen sizes in iframe previews. Define custom viewport dimensions (name, width, height, icon) to quickly test responsive layouts.\n\n### 4. Iframe Security Settings\n\nConfigure iframe permissions and security settings:\n\n- **Iframe `allow` attribute** — Defines what features will be available to the `\u003ciframe\u003e` pointing to the frontend (e.g., access to microphone, camera). [Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#allow)\n\n## Content Security Policy\n\n⚠️ For side-by-side previews to work, if your website implements a [Content Security Policy `frame-ancestors` directive](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), you need to add `https://plugins-cdn.datocms.com` to your list of allowed sources:\n\n```\nContent-Security-Policy: frame-ancestors 'self' https://plugins-cdn.datocms.com;\n```\n\n## The Preview Links API endpoint\n\nEach frontend must implement a CORS-ready JSON endpoint that, given a specific DatoCMS record, returns an array of preview link(s).\n\nThe plugin performs a POST request to the Preview Links API endpoint URL, passing a payload that includes the current environment, record and model:\n\n```json\n{\n \"item\": {…},\n \"itemType\": {…},\n \"currentUser\": {…},\n \"siteId\": \"123\",\n \"environmentId\": \"main\",\n \"locale\": \"en\",\n}\n```\n\n- `item`: [CMA entity](https://www.datocms.com/docs/content-management-api/resources/item) of the current record\n- `itemType`: [CMA entity](https://www.datocms.com/docs/content-management-api/resources/item-type) of the model of the current record\n- `currentUser`: CMA entity of the [collaborator](https://www.datocms.com/docs/content-management-api/resources/user), [SSO user](https://www.datocms.com/docs/content-management-api/resources/sso-user) or [account owner](https://www.datocms.com/docs/content-management-api/resources/account) currently logged in\n- `siteId`: the ID of the current DatoCMS project\n- `environmentId`: the current environment ID\n- `locale`: the locale currently active on the form\n\nThe endpoint is expected to return a `200` response, with the following JSON structure:\n\n```json\n{\n \"previewLinks\": [\n {\n \"label\": \"Published (en)\",\n \"url\": \"https://mysite.com/blog/my-article\"\n },\n {\n \"label\": \"Draft (en)\",\n \"url\": \"https://mysite.com/api/preview/start?slug=/blog/my-article\"\n }\n ]\n}\n```\n\nThe plugin will show all the preview links that are returned. If you want to make sure that a preview's URL is reloaded after each save, you can include an extra option (please be aware that because of cross-origin iframe issues, maintaining the scroll position between reloads will not be possible):\n\n```json\n{\n \"label\": \"Draft (en)\",\n \"url\": \"https://mysite.com/api/preview/start?slug=/blog/my-article\",\n \"reloadPreviewOnRecordUpdate\": { \"delayInMs\": 100 }\n}\n```\n\n## The Enable Draft Mode route\n\nWhen Visual Editing is enabled, your frontend must implement a route that enables draft/preview mode and redirects to the requested page. This route is called whenever the Visual Editing iframe needs to load a page in draft mode.\n\nThe plugin takes the Enable Draft Mode route URL from your configuration and adds a `redirect` query parameter to it:\n\n- `redirect`: The relative path to redirect to after enabling draft mode (e.g., `/blog/my-article`, `/products/shoes`)\n\n**Important:** The plugin preserves any existing query parameters in your configured URL. For example, if you configure the route as `https://yourwebsite.com/api/draft?token=secret123`, the plugin will call `https://yourwebsite.com/api/draft?token=secret123\u0026redirect=/blog/my-article`. This allows you to include authentication tokens or other parameters in your configured URL.\n\nThe `redirect` parameter contains the path to load, NOT the full URL. Your route should validate that it's a relative path to prevent open redirect vulnerabilities.\n\n### Expected behavior\n\n1. **Validate authentication** (if needed) — If you included a token or other auth parameters in your configured URL, verify them\n2. **Validate the redirect path** — Ensure the `redirect` parameter is a relative URL (not an absolute URL) to prevent open redirect attacks\n3. **Enable draft/preview mode** — Set the appropriate cookies or session data to enable your framework's draft mode\n4. **Redirect to the requested path** — Redirect the user to the path specified in the `redirect` parameter\n\n### Example\n\nIf you configure the Enable Draft Mode route as:\n```\nhttps://yourwebsite.com/api/draft?token=your-secret-token\n```\n\nAnd Visual Editing opens with the path `/blog/my-article`, the plugin will make a request to:\n```\nGET https://yourwebsite.com/api/draft?token=your-secret-token\u0026redirect=/blog/my-article\n```\n\nYour route should:\n1. Validate the token matches your environment variable\n2. Verify `/blog/my-article` is a relative path\n3. Enable draft mode (set cookies, etc.)\n4. Redirect to `/blog/my-article`\n\nThe browser will then load `/blog/my-article` with draft mode enabled, showing unpublished content in the Visual Editing iframe.\n\n## Implementation examples\n\nIf you have built alternative endpoint implementations for other frameworks/SSGs, please open up a PR to this plugin and share it with the community!\n\n### Next.js\n\nWe suggest you look at the code of our [official Starter Kit](https://github.com/datocms/nextjs-starter-kit):\n\n* Route handler for the Preview Links API endpoint: [`app/api/preview-links/route.tsx`](https://github.com/datocms/nextjs-starter-kit/blob/main/src/app/api/preview-links/route.tsx)\n* Enable Draft Mode route (and optional disable route) for Next.js [Draft Mode](https://www.datocms.com/docs/next-js/setting-up-next-js-draft-mode): [`app/api/draft-mode/enable/route.tsx`](https://github.com/datocms/nextjs-starter-kit/blob/main/src/app/api/draft-mode/enable/route.tsx) and [`app/api/draft-mode/disable/route.tsx`](https://github.com/datocms/nextjs-starter-kit/blob/main/src/app/api/draft-mode/disable/route.tsx)\n\nThe preview link URLs also include a `token` query parameter that the plugin would send to the API endpoint, like `https://www.mywebsite.com/api/preview-links?token=some-secret-ish-string`. The `token` is a string of your choice that just has to match in both the plugin settings and [in your frontend's environment variables](https://github.com/datocms/nextjs-starter-kit/blob/main/src/app/api/preview-links/route.tsx#L31-L34). While not encryption, this token is an easy way to limit access to your preview content.\n\n### Nuxt\n\nWe suggest you look at the code of our [official Starter Kit](https://github.com/datocms/nuxt-starter-kit):\n\n* Route handler for the Preview Links API endpoint: [server/api/preview-links/index.ts](https://github.com/datocms/nuxt-starter-kit/blob/main/server/api/preview-links/index.ts)\n* Enable Draft Mode route (and optional disable route): [`server/api/draft-mode/enable.ts`](https://github.com/datocms/nuxt-starter-kit/blob/main/server/api/draft-mode/enable.ts) and [`server/api/draft-mode/disable.ts`](https://github.com/datocms/nuxt-starter-kit/blob/main/server/api/draft-mode/disable.ts)\n\nThe preview link URLs also include a `token` query parameter that the plugin would send to the API endpoint, like `https://www.mywebsite.com/api/preview-links?token=some-secret-ish-string`. The `token` is a string of your choice that just has to match in both the plugin settings and [in your frontend's environment variables](https://github.com/datocms/nuxt-starter-kit/blob/main/server/api/preview-links/index.ts#L42-L44). While not encryption, this token is an easy way to limit access to your preview content.\n\n### SvelteKit\n\nWe suggest you look at the code of our [official Starter Kit](https://github.com/datocms/sveltekit-starter-kit):\n\n* Route handler for the Preview Links API endpoint: [`src/routes/api/preview-links/+server.ts`](https://github.com/datocms/sveltekit-starter-kit/blob/main/src/routes/api/preview-links/%2Bserver.ts)\n* Enable Draft Mode route (and optional disable route): [`routes/api/draft-mode/enable/+server.ts`](https://github.com/datocms/sveltekit-starter-kit/blob/main/src/routes/api/draft-mode/enable/%2Bserver.ts) and [`routes/api/draft-mode/disable/+server.ts`](https://github.com/datocms/sveltekit-starter-kit/blob/main/src/routes/api/draft-mode/disable/%2Bserver.ts)\n\nThe preview link URLs also include a `token` query parameter that the plugin would send to the API endpoint, like `https://www.mywebsite.com/api/preview-links?token=some-secret-ish-string`. The `token` is a string of your choice that just has to match in both the plugin settings and [in your frontend's environment variables](https://github.com/datocms/sveltekit-starter-kit/blob/main/src/routes/api/preview-links/%2Bserver.ts#L34-L36). While not encryption, this token is an easy way to limit access to your preview content.\n\n### Astro\n\nWe suggest you look at the code of our [official Starter Kit](https://github.com/datocms/astro-starter-kit):\n\n* Route handler for the Preview Links API endpoint: [`src/pages/api/preview-links/index.ts`](https://github.com/datocms/astro-starter-kit/blob/main/src/pages/api/preview-links/index.ts)\n* Enable Draft Mode route (and optional disable route): [`src/pages/api/draft-mode/enable/index.ts`](https://github.com/datocms/astro-starter-kit/blob/main/src/pages/api/draft-mode/enable/index.ts) and [`src/pages/api/draft-mode/disable/index.ts`](https://github.com/datocms/astro-starter-kit/blob/main/src/pages/api/draft-mode/disable/index.ts)\n\nThe preview link URLs also include a `token` query parameter that the plugin would send to the API endpoint, like `https://www.mywebsite.com/api/preview-links?token=some-secret-ish-string`. The `token` is a string of your choice that just has to match in both the plugin settings and [in your frontend's environment variables](https://github.com/datocms/astro-starter-kit/blob/main/src/pages/api/preview-links/index.ts#L33-L35). While not encryption, this token is an easy way to limit access to your preview content.\n\n\n\n\n\n\n"])</script><script>self.__next_f.push([1,"1c:[\"$\",\"$L1e\",null,{\"defaultValue\":\"readme\",\"className\":\"w-full\",\"children\":[[\"$\",\"$L1f\",null,{\"children\":[[\"$\",\"$L20\",null,{\"value\":\"readme\",\"children\":\"Readme\"}],[\"$\",\"$L20\",null,{\"value\":\"dependencies\",\"children\":[\"Dependencies\",[\"$\",\"span\",null,{\"className\":\"ml-1.5 text-xs text-muted-foreground\",\"children\":[\"(\",18,\")\"]}]]}],[\"$\",\"$L20\",null,{\"value\":\"versions\",\"children\":[\"Versions\",[\"$\",\"span\",null,{\"className\":\"ml-1.5 text-xs text-muted-foreground\",\"children\":[\"(\",43,\")\"]}]]}]]}],[\"$\",\"$L21\",null,{\"value\":\"readme\",\"className\":\"mt-6\",\"children\":[\"$\",\"$L22\",null,{\"readme\":\"$23\"}]}],\"$L24\",\"$L25\"]}]\n"])</script><script>self.__next_f.push([1,"38:I[7860,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"VersionList\"]\n"])</script><script>self.__next_f.push([1,"24:[\"$\",\"$L21\",null,{\"value\":\"dependencies\",\"className\":\"mt-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-6 lg:grid-cols-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-package h-4 w-4\",\"children\":[[\"$\",\"path\",\"1a0edw\",{\"d\":\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"}],[\"$\",\"path\",\"d0xqtd\",{\"d\":\"M12 22V12\"}],[\"$\",\"path\",\"yx3hmr\",{\"d\":\"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7\"}],[\"$\",\"path\",\"1c824w\",{\"d\":\"m7.5 4.27 9 5.15\"}],\"$undefined\"]}],\"Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":18}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"@floating-ui/react\",{\"href\":\"/package/%40floating-ui%2Freact\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@floating-ui/react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.27.16\"}]]}],[\"$\",\"$L5\",\"@fortawesome/free-solid-svg-icons\",{\"href\":\"/package/%40fortawesome%2Ffree-solid-svg-icons\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@fortawesome/free-solid-svg-icons\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.7.2\"}]]}],[\"$\",\"$L5\",\"@fortawesome/react-fontawesome\",{\"href\":\"/package/%40fortawesome%2Freact-fontawesome\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[\"$L26\",\"@fortawesome/react-fontawesome\"]}],\"$L27\"]}],\"$L28\",\"$L29\",\"$L2a\",\"$L2b\",\"$L2c\",\"$L2d\",\"$L2e\",\"$L2f\",\"$L30\",\"$L31\",\"$L32\",\"$L33\",\"$L34\",\"$L35\",\"$L36\"]}]}]]}],false,\"$L37\"]}]}]\n"])</script><script>self.__next_f.push([1,"25:[\"$\",\"$L21\",null,{\"value\":\"versions\",\"className\":\"mt-6\",\"children\":[\"$\",\"$L38\",null,{\"packageName\":\"datocms-plugin-web-previews\",\"versions\":[{\"version\":\"1.0.30\",\"date\":\"2026-02-03T09:06:24.680Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.29\",\"date\":\"2026-01-26T13:51:32.733Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.28\",\"date\":\"2026-01-14T12:20:57.121Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.27\",\"date\":\"2025-12-16T13:36:18.321Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.27-next.11\",\"date\":\"2025-12-05T15:55:49.756Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.27-next.10\",\"date\":\"2025-12-05T11:05:59.955Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.27-next.9\",\"date\":\"2025-12-05T10:50:22.455Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.27-next.8\",\"date\":\"2025-12-04T13:13:15.937Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.27-next.7\",\"date\":\"2025-12-03T14:01:21.876Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.27-next.6\",\"date\":\"2025-12-03T12:22:20.194Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.27-next.5\",\"date\":\"2025-12-03T09:06:49.698Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.27-next.4\",\"date\":\"2025-12-03T08:31:39.717Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.27-next.3\",\"date\":\"2025-12-01T18:43:36.656Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.27-next.2\",\"date\":\"2025-12-01T14:00:28.368Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.27-next.1\",\"date\":\"2025-12-01T13:54:03.646Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.27-next.0\",\"date\":\"2025-12-01T11:34:43.811Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.26\",\"date\":\"2025-02-21T15:44:04.892Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.25\",\"date\":\"2025-02-05T15:46:35.344Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.24\",\"date\":\"2025-01-23T11:26:08.273Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.23\",\"date\":\"2025-01-21T17:36:30.152Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.22\",\"date\":\"2025-01-21T17:31:14.079Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.21\",\"date\":\"2025-01-21T12:02:10.060Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.20\",\"date\":\"2024-12-11T13:22:41.337Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.19\",\"date\":\"2024-12-11T09:25:40.500Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.18\",\"date\":\"2024-10-30T14:56:27.921Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.17\",\"date\":\"2024-07-16T04:51:32.056Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.16\",\"date\":\"2024-04-24T12:26:25.556Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.15\",\"date\":\"2024-04-24T08:56:33.152Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.14\",\"date\":\"2023-09-11T12:43:18.916Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.13\",\"date\":\"2023-06-08T08:05:09.153Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.12\",\"date\":\"2023-05-11T06:57:16.048Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.11\",\"date\":\"2023-05-10T08:03:22.724Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.10\",\"date\":\"2023-05-09T08:36:38.968Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.9\",\"date\":\"2023-05-09T06:14:18.142Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.8\",\"date\":\"2023-05-08T14:43:35.163Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.7\",\"date\":\"2023-05-08T14:37:13.272Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.6\",\"date\":\"2023-05-08T14:28:13.400Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.5\",\"date\":\"2023-05-08T13:53:15.287Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.4\",\"date\":\"2022-12-12T15:03:56.507Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.3\",\"date\":\"2022-12-05T15:53:48.009Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.2\",\"date\":\"2022-11-02T09:04:17.004Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.1\",\"date\":\"2022-10-21T07:52:15.144Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.0\",\"date\":\"2022-10-19T11:33:20.994Z\",\"deprecated\":\"$undefined\"}],\"currentVersion\":\"1.0.30\"}]}]\n"])</script><div style="display:none" id="S:1"><div class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div class="flex flex-wrap items-start gap-3"><h1 class="font-mono text-2xl font-bold sm:text-3xl">datocms-plugin-web-previews</h1><div class="flex flex-wrap items-center gap-2"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 font-mono">v1.0.30</span></div></div><p class="text-lg text-muted-foreground">Add a Visual tab for full-screen side-by-side editing with click-to-edit overlays, preview links in the record sidebar, and inline iframe previews with viewport presets</p><div class="flex flex-wrap gap-1.5"><a href="/search?q=datocms"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">datocms</span></a><a href="/search?q=datocms-plugin"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">datocms-plugin</span></a><a href="/search?q=sidebar"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">sidebar</span></a><a href="/search?q=preview"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">preview</span></a><a href="/search?q=links"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">links</span></a></div><div class="flex flex-wrap gap-4 text-sm text-muted-foreground"><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg><span class="font-medium text-foreground">169</span>/week</span><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-4 w-4"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>Updated 6 days ago</span><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scale h-4 w-4"><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path><path d="M7 21h10"></path><path d="M12 3v18"></path><path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"></path></svg>GPLv3</span><span class="flex items-center gap-1.5">Unpacked: 99.1 MB</span></div><div class="text-sm"><span class="text-muted-foreground">Published by </span><a class="font-medium hover:underline" href="/~DatoCMS">DatoCMS</a></div></div><div class="w-full space-y-4 lg:w-80"><div class="rounded-lg border bg-card"><div dir="ltr" data-orientation="horizontal" data-slot="tabs" class="flex flex-col gap-2"><div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="text-muted-foreground inline-flex h-9 items-center w-full justify-start rounded-none border-b bg-transparent p-0" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_36av5ubrb_-content-npm" data-state="active" id="radix-_R_36av5ubrb_-trigger-npm" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">npm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-yarn" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-yarn" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">yarn</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-pnpm" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-pnpm" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">pnpm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-bun" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-bun" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">bun</button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-npm" id="radix-_R_36av5ubrb_-content-npm" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0" style="animation-duration:0s"><div class="flex items-center justify-between gap-2 p-3"><code class="flex-1 overflow-x-auto whitespace-nowrap font-mono text-sm">npm install datocms-plugin-web-previews</code><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9 h-8 w-8 shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-4 w-4"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-yarn" hidden="" id="radix-_R_36av5ubrb_-content-yarn" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-pnpm" hidden="" id="radix-_R_36av5ubrb_-content-pnpm" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-bun" hidden="" id="radix-_R_36av5ubrb_-content-bun" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div></div></div><div class="flex flex-wrap gap-2"><a href="https://github.com/datocms/plugins/tree/master/web-previews#readme" target="_blank" rel="noopener noreferrer" data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house mr-1.5 h-4 w-4"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>Homepage</a><a href="https://npmjs.com/package/datocms-plugin-web-previews" target="_blank" rel="noopener noreferrer" data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link mr-1.5 h-4 w-4"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>npm</a></div><div class="rounded-lg border p-3"><h4 class="mb-2 text-sm font-medium">Dist Tags</h4><div class="space-y-1"><div class="flex justify-between text-sm"><span class="text-muted-foreground">latest</span><a class="font-mono text-xs hover:underline" href="/package/datocms-plugin-web-previews/v/1.0.30">1.0.30</a></div><div class="flex justify-between text-sm"><span class="text-muted-foreground">next</span><a class="font-mono text-xs hover:underline" href="/package/datocms-plugin-web-previews/v/1.0.29">1.0.29</a></div></div></div></div></div><div dir="ltr" data-orientation="horizontal" data-slot="tabs" class="flex flex-col gap-2 w-full"><div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_aav5ubrb_-content-readme" data-state="active" id="radix-_R_aav5ubrb_-trigger-readme" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Readme</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_aav5ubrb_-content-dependencies" data-state="inactive" id="radix-_R_aav5ubrb_-trigger-dependencies" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Dependencies<span class="ml-1.5 text-xs text-muted-foreground">(18)</span></button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_aav5ubrb_-content-versions" data-state="inactive" id="radix-_R_aav5ubrb_-trigger-versions" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Versions<span class="ml-1.5 text-xs text-muted-foreground">(43)</span></button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-readme" id="radix-_R_aav5ubrb_-content-readme" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6" style="animation-duration:0s"><div class="relative"><div class="prose prose-sm dark:prose-invert max-w-none overflow-hidden rounded-lg border p-6" style="max-height:500px"><p><h1 class="text-2xl font-bold mt-6 mb-4">Web Previews DatoCMS plugin</h1></p><p class="my-3">The plugin adds several touchpoints to the DatoCMS UI:</p><p class="my-3">- <strong>A "Visual" tab in the main navigation</strong>: a full-screen, side-by-side editing view where the website preview sits next to the editing panel. Editors click on any element in the preview, and the corresponding record and field open right there. The tab includes:<br /> - An address bar for navigating the preview<br /> - Viewport controls for testing responsive layouts<br /> - A frontend selector for switching between environments (e.g. production vs. staging)</p><p class="my-3">- <strong>Preview links in the record sidebar</strong>: when editors open any record, they see quick links to view that content on the actual website. The plugin determines which URL corresponds to each record by calling an API endpoint on your frontend.</p><p class="my-3">- <strong>A full iframe preview in the sidebar</strong>: beyond just links, editors can expand an inline preview of the page directly in the sidebar, with viewport presets (mobile, tablet, desktop) and auto-reload on save.</p><p class="my-3">The plugin supports <strong>multiple frontends</strong>, so if your content powers different websites or environments, editors can switch between them from a single dropdown.</p><p class="my-3">Each feature can be enabled independently per frontend — they work great together, but each is useful on its own.</p><p class="my-3">> <strong>Important:</strong> This plugin requires configuration and development work. You'll need to implement API endpoints on your frontend website(s) for it to function. Read more in the following sections.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Installation and configuration</h2></p><p class="my-3">Once the plugin is installed, you'll see four configuration sections:</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Configure your project's frontends and the features each provides (e.g., "Production", "Staging", "Marketing Site"). For each frontend, you can enable:</p><p class="my-3">#### Feature 1: Preview Links</p><p class="my-3">When enabled, the plugin calls your API endpoint to retrieve preview URLs for the current record. You can then control how these links are displayed in the Record Sidebar (see section below).</p><p class="my-3"><strong>Required configuration:</strong><br />- <strong>API endpoint URL</strong> — The endpoint that returns preview links (e.g., <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">https://yourwebsite.com/api/preview-links</code>)<br />- <strong>Custom Headers (Optional)</strong> — Additional headers to send with the API request</p><p class="my-3">#### Feature 2: Visual Editing</p><p class="my-3">When enabled, editors can open a full-screen, side-by-side view with click-to-edit overlays on your actual website. Visual Editing shows your website in an iframe and adds interactive editing capabilities.</p><p class="my-3"><strong>Required configuration:</strong><br />- <strong>Enable Draft Mode route</strong> — The route that enables draft/preview mode (e.g., <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">https://yourwebsite.com/api/draft</code>). This route receives a <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">redirect</code> query parameter with the path to load.<br />- <strong>Initial Path (Optional)</strong> — The default path to load when opening Visual Editing (defaults to <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">/</code> if not specified)</p><p class="my-3">#### Valid configurations per frontend</p><p class="my-3">- ✅ <strong>Only Preview Links</strong> — Sidebar with preview URLs (optionally shown as links or in an iframe)<br />- ✅ <strong>Only Visual Editing</strong> — Direct access to full-screen side-by-side editing with overlays<br />- ✅ <strong>Both features together</strong> — Full integration with sidebar preview links and visual editing</p><p class="my-3">#### Multiple frontends support</p><p class="my-3">You can configure multiple frontends, each with their own combination of features. When multiple frontends have Visual Editing enabled, a frontend selector dropdown appears in the Visual Editing toolbar, allowing editors to switch between different environments.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Configure display options for preview links shown in a DatoCMS record sidebar. When Preview Links is enabled for at least one frontend, you can control how the preview URLs are displayed:</p><p class="my-3">#### Sidebar Panel<br /><strong>Toggle:</strong> Enable Sidebar Panel</p><p class="my-3">Shows a small panel in the record sidebar with quick links to preview URLs. Links open in a new browser tab when clicked.</p><p class="my-3">!<a href="docs/preview-links-panel.png" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Preview Links Panel</a></p><p class="my-3"><strong>Optional settings:</strong><br />- <strong>Start with the panel open by default</strong> — The panel will be expanded when users open a record</p><p class="my-3">#### Full Preview Sidebar<br /><strong>Toggle:</strong> Enable Full Preview Sidebar</p><p class="my-3">Shows a full sidebar with an iframe preview of the selected URL. This provides a side-by-side view of your website directly within DatoCMS.</p><p class="my-3">!<a href="docs/preview-links-sidebar-1.png" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Full Preview Sidebar</a></p><p class="my-3">!<a href="docs/preview-links-sidebar-2.png" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Full Preview Sidebar with Multiple Links</a></p><p class="my-3"><strong>Optional settings:</strong><br />- <strong>Default sidebar width (px)</strong> — The initial width when the sidebar is opened</p><p class="my-3"><strong>Note:</strong> Both the Sidebar Panel and Full Preview Sidebar can be enabled together. The Full Preview Sidebar shows the same URLs returned by your API endpoint, but renders them in an iframe for in-app preview.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Configure viewport size presets for testing different screen sizes in iframe previews. Define custom viewport dimensions (name, width, height, icon) to quickly test responsive layouts.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Configure iframe permissions and security settings:</p><p class="my-3">- <strong>Iframe <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">allow</code> attribute</strong> — Defines what features will be available to the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><iframe></code> pointing to the frontend (e.g., access to microphone, camera). <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#allow" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Learn more</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Content Security Policy</h2></p><p class="my-3">⚠️ For side-by-side previews to work, if your website implements a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Content Security Policy <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">frame-ancestors</code> directive</a>, you need to add <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">https://plugins-cdn.datocms.com</code> to your list of allowed sources:</p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />Content-Security-Policy: frame-ancestors 'self' https://plugins-cdn.datocms.com;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">The Preview Links API endpoint</h2></p><p class="my-3">Each frontend must implement a CORS-ready JSON endpoint that, given a specific DatoCMS record, returns an array of preview link(s).</p><p class="my-3">The plugin performs a POST request to the Preview Links API endpoint URL, passing a payload that includes the current environment, record and model:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">json<br />{<br /> "item": {…},<br /> "itemType": {…},<br /> "currentUser": {…},<br /> "siteId": "123",<br /> "environmentId": "main",<br /> "locale": "en",<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">- </code>item<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: <a href="https://www.datocms.com/docs/content-management-api/resources/item" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">CMA entity</a> of the current record<br />- </code>itemType<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: <a href="https://www.datocms.com/docs/content-management-api/resources/item-type" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">CMA entity</a> of the model of the current record<br />- </code>currentUser<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: CMA entity of the <a href="https://www.datocms.com/docs/content-management-api/resources/user" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">collaborator</a>, <a href="https://www.datocms.com/docs/content-management-api/resources/sso-user" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">SSO user</a> or <a href="https://www.datocms.com/docs/content-management-api/resources/account" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">account owner</a> currently logged in<br />- </code>siteId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: the ID of the current DatoCMS project<br />- </code>environmentId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: the current environment ID<br />- </code>locale<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: the locale currently active on the form</p><p class="my-3">The endpoint is expected to return a </code>200<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> response, with the following JSON structure:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">json<br />{<br /> "previewLinks": [<br /> {<br /> "label": "Published (en)",<br /> "url": "https://mysite.com/blog/my-article"<br /> },<br /> {<br /> "label": "Draft (en)",<br /> "url": "https://mysite.com/api/preview/start?slug=/blog/my-article"<br /> }<br /> ]<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The plugin will show all the preview links that are returned. If you want to make sure that a preview's URL is reloaded after each save, you can include an extra option (please be aware that because of cross-origin iframe issues, maintaining the scroll position between reloads will not be possible):</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">json<br />{<br /> "label": "Draft (en)",<br /> "url": "https://mysite.com/api/preview/start?slug=/blog/my-article",<br /> "reloadPreviewOnRecordUpdate": { "delayInMs": 100 }<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">The Enable Draft Mode route</h2></p><p class="my-3">When Visual Editing is enabled, your frontend must implement a route that enables draft/preview mode and redirects to the requested page. This route is called whenever the Visual Editing iframe needs to load a page in draft mode.</p><p class="my-3">The plugin takes the Enable Draft Mode route URL from your configuration and adds a </code>redirect<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> query parameter to it:</p><p class="my-3">- </code>redirect<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: The relative path to redirect to after enabling draft mode (e.g., </code>/blog/my-article<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>/products/shoes<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</p><p class="my-3"><strong>Important:</strong> The plugin preserves any existing query parameters in your configured URL. For example, if you configure the route as </code>https://yourwebsite.com/api/draft?token=secret123<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, the plugin will call </code>https://yourwebsite.com/api/draft?token=secret123&redirect=/blog/my-article<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. This allows you to include authentication tokens or other parameters in your configured URL.</p><p class="my-3">The </code>redirect<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> parameter contains the path to load, NOT the full URL. Your route should validate that it's a relative path to prevent open redirect vulnerabilities.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">1. <strong>Validate authentication</strong> (if needed) — If you included a token or other auth parameters in your configured URL, verify them<br />2. <strong>Validate the redirect path</strong> — Ensure the </code>redirect<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> parameter is a relative URL (not an absolute URL) to prevent open redirect attacks<br />3. <strong>Enable draft/preview mode</strong> — Set the appropriate cookies or session data to enable your framework's draft mode<br />4. <strong>Redirect to the requested path</strong> — Redirect the user to the path specified in the </code>redirect<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> parameter</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">If you configure the Enable Draft Mode route as:<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />https://yourwebsite.com/api/draft?token=your-secret-token<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">And Visual Editing opens with the path </code>/blog/my-article<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, the plugin will make a request to:<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />GET https://yourwebsite.com/api/draft?token=your-secret-token&redirect=/blog/my-article<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Your route should:<br />1. Validate the token matches your environment variable<br />2. Verify </code>/blog/my-article<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is a relative path<br />3. Enable draft mode (set cookies, etc.)<br />4. Redirect to </code>/blog/my-article<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The browser will then load </code>/blog/my-article<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> with draft mode enabled, showing unpublished content in the Visual Editing iframe.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Implementation examples</h2></p><p class="my-3">If you have built alternative endpoint implementations for other frameworks/SSGs, please open up a PR to this plugin and share it with the community!</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">We suggest you look at the code of our <a href="https://github.com/datocms/nextjs-starter-kit" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">official Starter Kit</a>:</p><p class="my-3">* Route handler for the Preview Links API endpoint: <a href="https://github.com/datocms/nextjs-starter-kit/blob/main/src/app/api/preview-links/route.tsx" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>app/api/preview-links/route.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a><br />* Enable Draft Mode route (and optional disable route) for Next.js <a href="https://www.datocms.com/docs/next-js/setting-up-next-js-draft-mode" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Draft Mode</a>: <a href="https://github.com/datocms/nextjs-starter-kit/blob/main/src/app/api/draft-mode/enable/route.tsx" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>app/api/draft-mode/enable/route.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> and <a href="https://github.com/datocms/nextjs-starter-kit/blob/main/src/app/api/draft-mode/disable/route.tsx" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>app/api/draft-mode/disable/route.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a></p><p class="my-3">The preview link URLs also include a </code>token<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> query parameter that the plugin would send to the API endpoint, like </code>https://www.mywebsite.com/api/preview-links?token=some-secret-ish-string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. The </code>token<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is a string of your choice that just has to match in both the plugin settings and <a href="https://github.com/datocms/nextjs-starter-kit/blob/main/src/app/api/preview-links/route.tsx#L31-L34" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">in your frontend's environment variables</a>. While not encryption, this token is an easy way to limit access to your preview content.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">We suggest you look at the code of our <a href="https://github.com/datocms/nuxt-starter-kit" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">official Starter Kit</a>:</p><p class="my-3">* Route handler for the Preview Links API endpoint: <a href="https://github.com/datocms/nuxt-starter-kit/blob/main/server/api/preview-links/index.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">server/api/preview-links/index.ts</a><br />* Enable Draft Mode route (and optional disable route): <a href="https://github.com/datocms/nuxt-starter-kit/blob/main/server/api/draft-mode/enable.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>server/api/draft-mode/enable.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> and <a href="https://github.com/datocms/nuxt-starter-kit/blob/main/server/api/draft-mode/disable.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>server/api/draft-mode/disable.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a></p><p class="my-3">The preview link URLs also include a </code>token<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> query parameter that the plugin would send to the API endpoint, like </code>https://www.mywebsite.com/api/preview-links?token=some-secret-ish-string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. The </code>token<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is a string of your choice that just has to match in both the plugin settings and <a href="https://github.com/datocms/nuxt-starter-kit/blob/main/server/api/preview-links/index.ts#L42-L44" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">in your frontend's environment variables</a>. While not encryption, this token is an easy way to limit access to your preview content.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">We suggest you look at the code of our <a href="https://github.com/datocms/sveltekit-starter-kit" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">official Starter Kit</a>:</p><p class="my-3">* Route handler for the Preview Links API endpoint: <a href="https://github.com/datocms/sveltekit-starter-kit/blob/main/src/routes/api/preview-links/%2Bserver.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>src/routes/api/preview-links/+server.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a><br />* Enable Draft Mode route (and optional disable route): <a href="https://github.com/datocms/sveltekit-starter-kit/blob/main/src/routes/api/draft-mode/enable/%2Bserver.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>routes/api/draft-mode/enable/+server.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> and <a href="https://github.com/datocms/sveltekit-starter-kit/blob/main/src/routes/api/draft-mode/disable/%2Bserver.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>routes/api/draft-mode/disable/+server.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a></p><p class="my-3">The preview link URLs also include a </code>token<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> query parameter that the plugin would send to the API endpoint, like </code>https://www.mywebsite.com/api/preview-links?token=some-secret-ish-string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. The </code>token<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is a string of your choice that just has to match in both the plugin settings and <a href="https://github.com/datocms/sveltekit-starter-kit/blob/main/src/routes/api/preview-links/%2Bserver.ts#L34-L36" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">in your frontend's environment variables</a>. While not encryption, this token is an easy way to limit access to your preview content.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">We suggest you look at the code of our <a href="https://github.com/datocms/astro-starter-kit" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">official Starter Kit</a>:</p><p class="my-3">* Route handler for the Preview Links API endpoint: <a href="https://github.com/datocms/astro-starter-kit/blob/main/src/pages/api/preview-links/index.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>src/pages/api/preview-links/index.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a><br />* Enable Draft Mode route (and optional disable route): <a href="https://github.com/datocms/astro-starter-kit/blob/main/src/pages/api/draft-mode/enable/index.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>src/pages/api/draft-mode/enable/index.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> and <a href="https://github.com/datocms/astro-starter-kit/blob/main/src/pages/api/draft-mode/disable/index.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>src/pages/api/draft-mode/disable/index.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a></p><p class="my-3">The preview link URLs also include a </code>token<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> query parameter that the plugin would send to the API endpoint, like </code>https://www.mywebsite.com/api/preview-links?token=some-secret-ish-string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. The </code>token` is a string of your choice that just has to match in both the plugin settings and <a href="https://github.com/datocms/astro-starter-kit/blob/main/src/pages/api/preview-links/index.ts#L33-L35" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">in your frontend's environment variables</a>. While not encryption, this token is an easy way to limit access to your preview content.</p><p class="my-3"></p><p class="my-3"></p><p class="my-3"><br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"26:[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}]\n27:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.2.0\"}]\n28:[\"$\",\"$L5\",\"@types/lodash-es\",{\"href\":\"/package/%40types%2Flodash-es\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/lodash-es\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.17.12\"}]]}]\n29:[\"$\",\"$L5\",\"cuid\",{\"href\":\"/package/cuid\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"cuid\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.0.0\"}]]}]\n2a:[\"$\",\"$L5\",\"datocms-plugin-sdk\",{\"href\":\"/package/datocms-plugin-sdk\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"datocms-plugin-sdk\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.1.1\"}]]}]\n2b:[\"$\",\"$L5\",\"datocms-react-ui\",{\"href\":\"/package/datocms-react-ui\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"datocms-react-ui\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.1.4\"}]]}]\n2c:[\"$\",\"$L5\",\"final-form\",{\"href\":\"/package/final-form\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover"])</script><script>self.__next_f.push([1,":bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"final-form\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.20.9\"}]]}]\n2d:[\"$\",\"$L5\",\"final-form-arrays\",{\"href\":\"/package/final-form-arrays\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"final-form-arrays\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.1.0\"}]]}]\n2e:[\"$\",\"$L5\",\"lodash-es\",{\"href\":\"/package/lodash-es\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"lodash-es\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.17.21\"}]]}]\n2f:[\"$\",\"$L5\",\"penpal\",{\"href\":\"/package/penpal\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"penpal\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.1.1\"}]]}]\n30:[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.2.0\"}]]}]\n31:[\"$\",\"$L5\",\"react-dom\",{\"href\":\"/package/react-dom\",\"className\":\"group f"])</script><script>self.__next_f.push([1,"lex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.2.0\"}]]}]\n32:[\"$\",\"$L5\",\"react-final-form\",{\"href\":\"/package/react-final-form\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-final-form\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.5.9\"}]]}]\n33:[\"$\",\"$L5\",\"react-final-form-arrays\",{\"href\":\"/package/react-final-form-arrays\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-final-form-arrays\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.1.4\"}]]}]\n34:[\"$\",\"$L5\",\"react-merge-refs\",{\"href\":\"/package/react-merge-refs\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-merge-refs\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.0.2\"}]]}]\n35:[\"$\",\"$L5\",\"use-deep-compare\",{\"href\":\"/package/use-deep-compare\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"use-deep-compare\"]}],["])</script><script>self.__next_f.push([1,"\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"1.1.0\"}]]}]\n36:[\"$\",\"$L5\",\"usehooks-ts\",{\"href\":\"/package/usehooks-ts\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"usehooks-ts\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.9.1\"}]]}]\n"])</script><script>self.__next_f.push([1,"37:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":8}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@biomejs/biome\",{\"href\":\"/package/%40biomejs%2Fbiome\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@biomejs/biome\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"1.9.4\"}]]}],[\"$\",\"$L5\",\"@types/react\",{\"href\":\"/package/%40types%2Freact\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.0.25\"}]]}],[\"$\",\"$L5\",\"@types/react-dom\",{\"href\":\"/package/%40types%2Freact-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L39\",\"$undefined\"]}],\"@types/react-dom\"]}],\"$L3a\"]}],\"$L3b\",\"$L3c\",\"$L3d\",\"$L3e\",\"$L3f\"]}]}]]}]\n"])</script><script>self.__next_f.push([1,"39:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n3a:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.0.9\"}]\n3b:[\"$\",\"$L5\",\"@vitejs/plugin-react\",{\"href\":\"/package/%40vitejs%2Fplugin-react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@vitejs/plugin-react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.3.1\"}]]}]\n3c:[\"$\",\"$L5\",\"cross-env\",{\"href\":\"/package/cross-env\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"cross-env\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.0.3\"}]]}]\n3d:[\"$\",\"$L5\",\"globals\",{\"href\":\"/package/globals\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"globals\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^15.9.0\"}]]}]\n3e:[\"$\",\"$L5\",\"typescript\",{\"href\":\"/package/typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.5.3\"}]]}]\n3f:[\"$\",\"$L5\",\"vite\",{\"href\":\"/package/vite\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-"])</script><script>self.__next_f.push([1,"foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"vite\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.4.1\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>