Test Code in the Local Editor

Note This article refers to 2 different versions of the editor:

  • Regular Editor: The editor that's generally used to build Wix sites.
  • Local Editor: A specialized version of the Regular Editor that's used when developing a site in a local IDE.

The Local Editor is a tool for testing code added to a site in a local IDE using Git Integration & Wix CLI. You can use the Local Editor to test your code in real time and make changes to the site's design that you can sync with your IDE. This article explains how to test your code in the Local Editor and sync any design changes you make.

Step 1 | Open the Local Editor

Open the Local Editor from your computer using the Wix CLI.

  1. In a terminal, navigate to the clone of the site's GitHub repository.

  2. Run: wix dev.

    A new tab with the Local Editor opens in your default browser. Notice the Local Editor tag in the top bar on the left.

Note: If you're running the CLI on a cloud provider's IDE, such as GitHub Codespaces, add the --tunnel flag to the wix dev command. This makes the full command wix dev --tunnel.

Reopen a closed Local Editor

The Local Editor needs both the terminal and a browser tab open to run.

If you close the browser tab, your terminal displays a URL you can use to reopen the editor in your browser. You can also do this by pressing e in the terminal.

If you close your terminal, the browser displays an error screen. In this case, you need to open the Local Editor again by running wix dev in your terminal.

Step 2 | Test your code

Once the Local Editor is open, you can use it to test your code in real time.

  1. Edit the site's code in your IDE and save it.

    Copy

    Your code is automatically synced with the Local Editor. You can see it in the editor's code panel.

  2. In the Local Editor, click Preview.

    The site code runs.

Note: Even though you can see your code changes in the Local Editor, they don't appear in the Regular Editor until you push them to GitHub. Changes don't appear on your live site until you publish.

Sync design changes to your IDE

If your testing reveals the need for design changes, you can make the changes directly in the Local Editor. The Local Editor and Regular Editor are synced, so any changes made in one are immediately reflected in the other.

However, they aren't reflected in the code in your IDE. To sync the changes with your IDE, do the following:

  1. Click Save.

    Clicking this button creates a new UI version.

  2. If you see a modal asking you to save changes in the editor to local code, click Continue.

Next steps

When you're happy with the way your code runs, push it to GitHub and publish the site.

Did this help?