In the previous page we've covered what's in the repository that makes up your new project.

When the project creation wizard finishes its work, you're launched straight into our visual editor and get a live, editable preview of your website. Any change you make through the editor gets stored in the repository immediately (but remember: it's only in the preview branch!). This works the other way around as well: any code change you make, either in our online code editor or by pushing code to the repository, is quickly reflected in the visual editor.

How Stackbit runs your code in the Visual Editor

Here's what happens when the visual editor launches:

  1. Stackbit launches an isolated container in our cloud servers.
  2. The container clones the project's Git repository and checks out the preview branch.
  3. The container runs npm install to get all dependencies installed.
  4. The container starts Next.js in development mode. In this mode, any code changes result in a Fast Refresh of the page (or in some cases, a page reload). Any page you navigate to is also generated afresh each time.
  5. As part of initialization, the project is also configured to initialize Sourcebit and load your content. Sourcebit also extends Next's auto-refresh feature by triggering a refresh on any change to content, even when connected to an external CMS and changes are performed there.
  6. Our visual editor creates an iframe in which it calls the running project to render the homepage. Voilà! you have your website in front of you.

Running in development mode enables live editing and instant refreshes, but pages are not statically generated and optimized as in the production build. To get a better impression of your site's performance, publish and view your live hosted website.

Next up: now that we know how the project runs, let's discuss how visual editing works.