Preview Drafts

This technology has no Slice Machine integration

This framework has no integration with Prismic's developer tool, Slice Machine. You can still build a Prismic website with this technology by using Prismic's Legacy Builder. However, if you're starting a new project with Prismic, we strongly recommend using a technology that integrates with Slice Machine: Next.js or Nuxt.

Configure previews in your repo

In your repository, navigate to Settings > Previews. Under "Create a New Preview," enter:

Site Name: A display name for the preview environment (such as "Development" or "Production").
Domain URL: The domain of your site (such as https://your-site.com or http://localhost:3000).
Preview Route: This is a route in your app that Prismic will use to build your website's URLs.

Note that you can add multiple previews in your repository settings. For instance, you can have one preview for your website on localhost and another for your production website.

Before you proceed

First, you'll need a project with SvelteKit and Prismic. If you don't have one yet, start with the Install step.

Add the Prismic Toolbar Script

In Settings > Previews, you will find a script like this:

Copy

<script async defer src="https://static.cdn.prismic.io/prismic.js?new=true&repo=your-repo-name"></script>

The repo=your-repo-name URL parameter should include your repository name.

Include this script in your website header. To ensure that previews and shareable preview links work properly, you must include this script on every page of your website, including 404 pages. In SvelteKit, you can add this script before the closing <head> tag in src/routes/app.html. In plain Svelte, you can add it in App.svelte between <svelte:head> tags.

Preview for a web app without routing (without SvelteKit)

If your app only has one route, previews will work without any configuration in your project.

When you set up previews in your repository, leave the preview route empty. When you click the preview button in the editor, this should launch a preview by default, with the Prismic toolbar appearing. Click the "x" on the Prismic toolbar to exit the preview.

Preview for a web app with routing (with SvelteKit)

When you create the preview in your Prismic settings, set the Preview Route to /preview.

Install the cookie package from npm:

Copy

npm install --save-dev cookie

In your app, create a route called preview/+server.js (you can change the route, but you must also change the Preview Route setting in your Prismic repository to match), and paste in this code:

src/routes/preview/+server.js

Copy

import * as prismic from '@prismicio/client'
import * as cookie from 'cookie'

import createClient from '$lib/prismicio'

export async function GET({ url, fetch, request }) {
  const client = createClient({ fetch, request })

  const previewToken = url.searchParams.get('token')
  const previewURL = await client.resolvePreviewURL({ defaultURL: '/' })

  const headers = new Headers({
    'Set-Cookie': cookie.serialize(prismic.cookie.preview, previewToken, {
      path: '/',
    }),
    location: previewURL,
  })

  const response = new Response(null, {
    status: 307,
    headers,
  })

  return response
}

Was this article helpful?

Not really

Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.