Netlify Docs
Ask Netlify

Contact

Visual editing /Visual Editor /Frameworks /

Use Visual Editor with your own framework

If we don’t have built-in support for your framework, you can configure Visual Editor to work with your framework by following this document.

# Start with local development

First, make sure your website is editable via our Visual Editor in local development mode.

  1. Set ssgName: custom in your Visual Editor configuration file (see reference).
  2. Implement content reload when your website is open within Visual Editor by capturing the stackbitObjectsChanged window event. The guides section below links to concrete examples with various web frameworks.

# Define how we run your site

Once visual editing is working well locally, it's time to configure how your website should run as a hosted Netlify Visual Editor project.

Define the command to launch your website's server in development mode via the devCommand property (reference).

For a smooth experience in Visual Editor, you may also need to define additional properties which are currently experimental:

  1. experimental.ssg.logPatterns.up - When we run your website's server, it typically takes some time (from as few seconds to a few dozen seconds) before the server process is ready to accept requests. Set this property to the log message (or any part of it) that is printed when the server is ready. (Note that there is also a polling mechanism in place to start Visual Editor once the root route (/) returns an HTML response.)
  2. experimental.ssg.passthrough - Many frameworks use a Websocket connection in development mode between the client and server to trigger a client-side refresh on code changes (a.k.a. HMR or Hot Module Replacement). The relative path to the websocket endpoint on the server should be specified in this attribute, so our container does not interfere with it.

# Guides

The following frameworks are implemented with ssgName: custom:

If you need a framework that’s not listed yet, talk to us!

Need framework help?

For help in setting up the visual editor for a different framework, you can reach out to us.