Troubleshooting: Live Editing (Slice Previews)

Prismic Administrative Support FAQs
, , ,
1

If you're experiencing issues with Prismic's Live Preview, including in a Next.js environment, use the following troubleshooting guide to identify and resolve the problem.

1. Verify slicemachine.config.json Configuration

Ensure your slicemachine.config.json file is correctly set up:

{
  "repositoryName": "your-repo-name",
  "adapter": "@slicemachine/adapter-next",
  "libraries": ["./slices"],
  "localSliceSimulatorURL": "http://localhost:3000/slice-simulator"
}
  • Adapter: Should be set to @slicemachine/adapter-next.
  • Libraries: Should correctly point to the slices directory.
  • Local Slice Simulator URL: Must match your development environment URL.

2. Configure the Slice Simulator Page

Ensure you have a slice-simulator.js (or .ts) page inside the pages directory:

import { SliceSimulator } from '@slicemachine/adapter-next/simulator';
import { SliceZone } from '@prismicio/react';
import { components } from '../slices';

const SliceSimulatorPage = () => (
  <SliceSimulator sliceZone={(props) => <SliceZone {...props} components={components} />} />
);

export default SliceSimulatorPage;

3. Match Live Preview URLs

Ensure consistency between localSliceSimulatorURL in slicemachine.config.json and the Live Preview URL configured in Prismic. Both should point to the same address, typically http://localhost:3000/slice-simulator during development.

4. Clear Browser Cache and Cookies

If Live Preview isn't updating correctly, try:

  • Clearing the browser cache to remove outdated data.
  • Deleting cookies related to Prismic to reset session data.

5. Manage Preview Cookies

Preview cookies can interfere with Slice Previews. To reset:

  1. Click the Preview button in Prismic.
  2. Close the preview toolbar ("X").
  3. Refresh the Page Builder.

6. Ensure the Slice Simulator is Accessible

Test if your simulator is reachable:

  • Open http://localhost:3000/slice-simulator directly.
  • If it doesn't load, check for redirect loops (net::ERR_TOO_MANY_REDIRECTS).

7. Validate JSON Formatting

Misformatted JSON files can break configurations. Ensure:

  • No trailing commas.
  • Double quotes (") instead of single quotes (').
  • Correct syntax in slicemachine.config.json.

8. Adjust Browser Cookie Settings

In some cases, blocking third-party cookies in browser settings has resolved preview issues. Try toggling this setting.

9. Synchronize Dependencies

Ensure all Prismic-related packages are up-to-date and compatible:

npm outdated
npm update

This prevents inconsistencies that can cause Live Preview issues.

10. Check Security Headers

If hosting your application, security headers might block embedding:

  • X-Frame-Options should be SAMEORIGIN or removed during development.
  • Check Content-Security-Policy to allow frame-src from localhost.

By following these steps, you should be able to resolve most Live Preview issues in Next.js when working with Prismic.