Slice simulator not working properly

Describe your question/issue in detail

When reporting bugs, we recommend you do a recording of your issue with the Jam Chrome plugin:

The slice preview doesn't work, it appears blank event if you edit the placeholder in the index.tsx. The editor on the left seems to work alright.

This will give us lots of dev information to help debug your issue. You can remove it once you're done :slight_smile:

Impacted feature

Slice simulation

What steps have you taken to resolve this issue already?

Tried on a different browser like Edge and Brave. Also changed every variable from using JS instead if TS, to not using src/


The simulator preview doesn't work. The Simulator editor does works alright

Your Role


Hosting provider


Package.json file

Steps to reproduce

  1. Clone GitHub - Zonalds/test-prismic-nextjs: A test repo for Prismic + NextJs
  2. Install packages with yarn install
  3. Run ``yarn slicemachinein one terminal andyarn start` in another terminal
  4. Simulate a slice, notice the editor works fine but not the preview.

Hey @obiezei, just tried on my end, I think you're experiencing a white screen because you're actually rendering white text on white background:

It looks like this happens because you're implementing dark more on your website, exciting! You can fine-tune your Slice Simulator's background to match the body's by using the background prop:

background="linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb))"

This does the trick on my end:

Let us know about it! Thanks for being part of Prismic Community~!

1 Like

Thank you @lihbr, that solves my issue.

1 Like