Live Editing in the New Page Builder

The new Page Builder completely reimagines the page-building experience and adds live-rendered preview thumbnails.

The new Page Builder works with all Prismic projects.

Some features are not yet supported in the new Page Builder. We're working towards adding the following features:

  • Revision history
  • Create a new version in another release

Prepare your codebase

Screenshot of the Page Builder

In order to enable this feature for your content team you will need to do three things:

  • Install the slice simulator, if you haven't already (instructions for Next.js and Nuxt)
  • Deploy your website
  • Have a live URL for your website to add in the Page Builder (see below for how to set it up)

Enable live previews

To enable live previews, first ensure that you have the slice simulator installed: check the slicemachine.config.json file at the root of your project. The file should include a "localSliceSimulatorURL" property like "https://localhost:3000/slice-simulator". Your project should include a corresponding page component.

Your project must be deployed. Once deployed, you can check to ensure that the slice simulator is working by visiting your-site.com/slice-simulator. You should see a page like this:

Screenshot of the Prismic slice simulator page
This page appears when you try to access the slice simulator directly.

Copy–paste the URL for that page into the configuration for the Page Builder. Now you should have live previews working.

Offer feedback

We value your input! Use this form to provide feedback on the Page Builder. Your feedback will help us improve the tool and provide you with a better editing experience. Please provide a detailed description of any bugs you encounter or new features you want to see:


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.