Velo: Working with the Local Editor

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 use the Local Editor.

Terminology

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.

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.

   

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.

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

   1
   $w.onReady(function () {
   2
       console.log("Hello World!");
   3
   });

   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.

Make changes to site design

The Local Editor allows you to make changes to your site's design such as adding or modifying elements and pages. These changes generate a new UI version for your site which you need to sync with your IDE. Once the UI version is synced with your IDE, code files for newly added pages appear in your repo. Autocomplete is also enabled for any newly added page elements.

About UI versions

UI versions are snapshots of a site's design. Saving any design changes to a site including adding a new page or adding or modifying elements generates a new UI version. UI versions are generated in both the Local Editor and the Regular Editor. Wix uses UI versions to match the code in your IDE with your site's design. The current UI version for the code in your site's repo is indicated in the wix.config.json file.

Sync design changes to your IDE

To sync design changes made in the Local Editor 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.

   

   Changes to your site such as element names and code files for site pages are synced to your IDE.

Changes in the Local Editor

Working in the Local Editor is different from working in the Regular Editor. Please note the following changes:

• The Publish button is replaced with the Save button.
• Code files are read-only. To make changes to your site's code, use your local IDE.
• Packages & Apps are read-only. To add, update, or delete packages and apps, use your local IDE.
• The Wix IDE is disabled, use your local IDE instead.
• If you duplicate a page on your site, the page's code isn't included in the copy.
• Changes to collection fields are immediately reflected on your live site, even before you publish.
• You can't add static event handlers to page elements using the Properties & Events panel. Instead, add dynamic event handlers to elements using code. To see the event handlers supported by each element, check the Velo API Reference.

Next steps

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