Preview & Toolbar do not work

Hi there,
I am having difficulties with the preview and the toolbar on react.
When I open the preview (localhost) the toolbar does not show.

In my root I have the following:

import { PrismicProvider, PrismicToolbar } from '@prismicio/react'
import { prismicClient, prismicRepository } from './api/prismic'
import { TestWrapper } from './components/prismic/testWrapper' 

return (
    <PrismicProvider client={prismicClient}>
      <TestWrapper />
      <PrismicToolbar repositoryName={prismicRepository} />

The prismic Client and prismicRepository look like this:

import * as prismic from '@prismicio/client'

// Fill in your repository name
export const prismicRepository = 'my-repo'
const endpoint = prismic.getEndpoint(prismicRepository)

export const prismicClient = prismic.createClient(endpoint, {
  // If your repo is private, add an access token
  accessToken: 'my-token', 

And the TestWrapper is nothing more than:

import React from 'react'
import { PrismicRichText, useSinglePrismicDocument } from '@prismicio/react'

export const TestWrapper = () => {
  const [document] = useSinglePrismicDocument('news')
  console.log('Doc: ', document)

  return (
      {document && (
        <PrismicRichText field={} />

The good thing is: I do not get any errors,
The bad thing is: document stays undefined and the toolbar stays on 'display: none !important;'

Did I overlook something here? Or should it indeed work like this?

Hello @bartjan.vanhummel

Have you configured previews in your repo? Also, can you please try to clear cookies and see if that works?


Hi Priyanka,

Clearing the cookies did not help.
The Previews have been configured in the repo under

Hello @bartjan.vanhummel

I need your project source code and repository URL to investigate it further. You can share a Github repo or a Zip file in a private message.


Hello @bartjan.vanhummel

I have checked your repository and found that you haven't set /preview for the preview route. Could you please set this configuration in Link Resolver in your repository and check if it works? Find more detail about What's happening in /preview?



I added /preview and in the project /preview will be redirected to /
However I am still not able to see the toolbar or the preview itself.


It's difficult for me to troubleshoot without access to the code. You might want to check our Previews troubleshoot guide.

I have one question:
Have you set up routes or link resolver in your prismic client as described in this section? I don't see this setup.


Yes I had that, but did not do much.
I added /preview in there and /news to be sure that it should work.
Today I didn't work with it.

For now I added a 'news channel' especially for development and testing.
In the code I prevent this channel to be shown on production.

It's not that I do not get the data. It's just that preview in combination with showing the data is not working. I will have a look later on again.

Yes, please look at our troubleshooting guide and let me know if you need anything else.