Visual Editor /

Troubleshoot Visual Editor

Here you will find a collection of troubleshooting tips for common issues with Visual Editor.

# Development server is stuck

Just as when you're working locally, there are a number of factors that may result in needing to restart your development server.

If you run into an issue in which Visual Editor or your website isn’t behaving as you’d expect, try this series of steps:

  1. Refresh your browser: That's fast and often resolves minor issues.
  2. Restart the development server: This can be done by opening your visual editor settings, going to the Advanced tab, and scrolling down to Troubleshooting. Choose Restart Preview. This usually takes about as long as it does to boot your local Next.js development server.
  3. Restart container: If you still haven't cleared the issue. There is a Restart Container button below the Restart Preview button. This restarts the entire editing experience, which usually takes a few minutes to complete.

Troubleshooting settings.

New ways to restart visual editor

We’re rolling out new visual editor settings. If you have the new visual editor settings, you can find the restart options by selecting the new settings icon next to your project name and choosing Restart visual editor preview or Restart visual editor container.

Or you can restart the container from

.

If you’re still having trouble after following these steps, you can contact us.

# Site preview doesn’t load

There could be a number of reasons why your preview isn't working properly. The subsections below outline the most common solutions. If these don't solve your issue, contact support.

Preview failed to load.

# Restart to fix temporary issues

If the preview was previously working but is experiencing issues, try restarting the server.

In local development, restart your framework server and the stackbit dev server.

In a cloud project, go to settings (cog icon next to site name in top left corner), select the Advanced tab, and click Restart.

Restart preview server

New ways to restart visual editor

We’re rolling out new visual editor settings. If you have the new visual editor settings, you can find the restart options by selecting the new settings icon next to your project name and choosing Restart visual editor preview or Restart visual editor container.

Or you can restart the container from

.

# Address unique configuration options

Some frameworks require additional configuration options specific to that framework. Read the appropriate framework guide for required configuration for that framework.

# Audit security headers

Visual Editor attempts to remove headers that block a site from loading in an iframe, which is how the preview is presented in Visual Editor.

In some cases, a header may be blocking Visual Editor from loading your site in the preview iframe. Open the console to identify the blocking header and, if possible, adjust. Be sure to only apply changes in development.

If you can't identify the header or are not able to make this change, contact us so we can work together on a resolution.

# Origin sensitivity

Your development server is accessed through a proxy in our application. Some development server configurations expect a specific origin or have other rules in place that Visual Editor application is not expecting.

This is typically caught and handled automatically, with the help of the ssgName configuration property.

If you believe this to be the issue, please contact us. We'll help resolve and put further checks in place to help other users.

# Content source connection errors

When you are seeing an issue with content not loading or have received an error about connection issues with the CMS source, there are a few troubleshooting methods you can try.

# Environment variables

When using the contentSources property to configure your content source, you are often required to use environment variables. Check that:

  • The environment variables you're specifying in the code resolve to the expected value.
  • You're using all required variables and options for that particular content source.

You can refer to the configuration guide within the appropriate integration section for a reference on how to configure that particular source.

Can’t find visual editor settings?

We’re rolling out new visual editor settings. If you can’t find your visual editor settings, go to

.

Or select the new settings icon next to your project name and choose Visual editor settings.

# Custom sources

If using a custom or experimental content source, contact support with details if you are having connection issues.

# Application connections

Working with an external content source requires that you establish an authentication connection to be able to edit content.

You can confirm that the connection is established in your account settings.

Visual Editor third-party account connections

# Mismatched users

Some external content providers require that the writable API key match to the user account that is connected via Visual Editor.

If there is a possibility these are mismatched, disconnect and reconnect the account.

# More resources

If you have additional concerns that aren’t answered in this doc, you can visit our Forums to find more information in our verified Support Guides and ask questions.