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.
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.comorhttp://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 React and Prismic. If you don't have one yet, start with the Install step.
The Prismic Toolbar is used to support previews of draft content. Add it to your app where you included <PrismicProvider>. In Create React App, this is in /src/index.js. In Vite, this is in /src/main.js.
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { PrismicProvider, PrismicToolbar } from '@prismicio/react'
import { client, repositoryName } from './prismic'
ReactDOM.render(
<React.StrictMode>
<PrismicProvider client={client}>
<App />
<PrismicToolbar repositoryName={repositoryName} />
</PrismicProvider>
</React.StrictMode>,
document.getElementById('root')
)Note that <PrismicToolbar> has been added with the Prismic repository name from /src/prismic.js.
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 as /preview. In the settings for your hosting provider, add a redirect from /preview to the main page of your app. 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.
If your app uses a router like React Router, create a route for /preview (you can change the route, but you'll need to change the Preview Route setting in your Prismic repository to match).
The route's component should have this code in it:
import { usePrismicPreviewResolver } from '@prismicio/react'
import { useNavigate } from 'react-router-dom'
function Preview() {
const navigate = useNavigate()
// This performs a client-side redirect to the previewed document's URL
usePrismicPreviewResolver({ navigate })
}The navigate function is specific to the router library your app is using. In this example, React Router provides a useNavigate hook which returns a navigate function.
Prismic doesn't inherently know the route structure for your website. So, to preview a document, you need to build the route for that document and forward the browser to that route.
When you click the "preview" button in the Prismic editor, the editor opens a new window at /preview in your website and adds some information about the previewed document to the URL. When the preview route component is mounted in the browser, it extracts the document information from the URL and uses that information to construct a route for the document. Then, it redirects the user to the new route.
How does your website display the previewed content? That all happens behind the scenes. When you click "preview" in the editor, Prismic sets a cookie in your browser with a special ref token to access previewed content. When your website queries content from Prismic, the React query hooks check for that cookie. If the cookie is present, the hook includes the ref token in the query, and the API sends back draft content.
Can't find what you're looking for?
Need technical Support? Spot an error in the documentation? Get in touch with us on our Community Forum.