Test Your 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 your site in your local IDE.

The Local Editor is a tool for testing code added to your site in your local IDE using Git Integration & Wix CLI. You can use the Local Editor to test your code in real time and make changes to your 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. Open your computer's terminal and navigate to the clone of your site's GitHub repository.

  2. Run this command: wix dev.

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

    Local Editor

Note: If you're running the CLI on a cloud provider's IDE, such GitHub Code Spaces, 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 this screen:

In this case, you need to open the Local Editor again.

Step 2 | Test your code

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

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

    Copy

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

  2. In the Local Editor, click Preview.

    Your 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 this modal, click Continue.

Next steps

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

Did this help?