Simulate Content

[00:00] Say hello to the simulation feature. It's like having a time machine where we can see into the future and test how our slices will work all before we even send them off on their journey to the Prismic page builder.

[00:11] The trusty sidekick Slice Machine comes to the rescue by providing us with a sandbox full of mock data in a local environment. It's like building sandcastles, but with slices in development, fun and functional, right?

[00:23] Just make sure your slice simulator page is in the app directory as slice- simulato/page.jsx and includes 'use client' at the top of the file.

'use-client'

[00:33] Also, confirm in the slicemachine.config file that you have the simulator route.

"localSliceSimulatorURL": "http://localhost:3000/slice-simulator"

[00:40] On your variation, click the simulate slice button. A new browser tab will open and you can check how your slice will look. How awesome is that?

[00:48] If the mock data doesn't match your use case, you can edit the data in the side panel. Make sure your mock data is representative of how the slice will look. Clicking save mock content willl save any changes you make here.

[01:01] The final awesome thing we can do here is to add screenshots of our slices. These act as an example of how the final slice with content might look so Mr. McDonald knows what he's building in Prismic.

[01:12] Make sure you do this for each of your variations as well, so Mr. McDonald can tell the difference.

[01:18] So take a screenshot of your call to action variation, then go back to the slice editor window and click 'update screenshot' to upload your screenshot.