You edit the code for your site in the code panel, which is displayed at the bottom of the Wix editor.

Code panel tabs

The code panel displays your site’s code files in tabs.

How code files open in tabs depends on the type of file you are opening.

  • Which files can I open in a new tab?

    • Page Code files: Because you can’t select more than one page at a time to view in the editor, you also can’t have multiple page code tabs open simultaneously. There is one tab that displays the page code for the currently selected page. Selecting a page in the Page Code section opens that page’s code in this tab. When you select a different page, this same tab will display the newly selected page’s code.

      • masterPage.js. You can open masterPage.js alongside page code files.

    • Code Files: All the files in the Code Files section can be opened in their own tab.

  • How do I open a new tab?

    When you click a file in the Velo Sidebar, it opens in a new tab in the code panel. When you first open a file, you’ll notice that its name is italicized in the tab.

The italics mean that the file has not yet been modified. That also means that if you click another file in the Velo Sidebar, it will open in the same tab, replacing the file you first clicked.

The file name will change to being un-italicized when you either:

  • Modify the file
  • Double click the filename in the tab or the Velo Sidebar

Once the filename is unitalicized, clicking another file in the Sidebar will open it in a new tab.

Velo syntax and autocomplete

Let’s start learning the basics of Velo syntax and its autocomplete features.

Selecting a specific element

Velo lets you code using standard JavaScript. It also has a specific syntax, or set of rules, for selecting an element on your page, which is:

Press + to interact
$w('#elementName')

If you know jQuery, this should look familiar. If you don’t, the following is what you need to know:

To select an element:

  1. Type $w.
  2. Enclose the name of the element in parentheses and quotes.
  3. Add a hashtag before the element name.

Note: You can use either single quotes or double quotes.

To make things even easier, Velo includes code completion. When you type the $, a pop-up window opens, listing the elements on your page and the relevant Wix APIs.

Use the up and down arrow keys to select the element you want, and then press Enter. Alternatively, you can click the element in the list. The reference to the element is added to your code with all the necessary syntax.

You can find the name of any element by hovering over it or selecting it. You can rename any element in the Properties & Events panel.

JavaScript templates

In addition to autocomplete that relates directly to Velo, the code panel also includes autocomplete for standard JavaScript templates and keywords. For example, if you type the word “for,” the autocomplete list includes templates for “for statements” as well as the keyword “for.” Each template includes a link to a standard JavaScript API where you can read more information.

When you select a JavaScript template, the full syntax for the template is added to the Ccde panel. For example, if you select the “for statement,” the following template gets added to your code:

for (var i = 0; i < array.length; i++) {

}

All you need to do is add the code you want to run in the loop.

Making sure the element has loaded before you reference it

When a page loads in a browser, it’s possible for the code on the page to run before the page finishes loading. This can cause an error if your code tries to reference an element in the page before it is loaded.

Because of this, you need to make sure that all the elements on your page have loaded before you try to access them using code. You do this is by including all your code that uses the $w selector in the following function:

Press + to interact
$w.onReady(function() {
    //TODO: write your page related code here...
});

This is only required if you add code on your own using the $w selector. Any code you add to a function using the Properties & Events panel runs only after the page loads.

Working with page elements

All of the elements in the Wix editor have properties, methods, and event handlers that you can use to work with your elements and add functionality to your site.

After you select an element, type a period to see the full list of these items.

Use the up and down arrow keys to select the item you want, and then press Enter. The necessary syntax is added to the end of your element selector. As you move through the options, a brief description of the functionality is displayed. Click the “Read more” link for more information.

The autocomplete pop-up also includes standard Javascript methods that you can call on your element.

Properties

Properties contain information about your elements. Some of these are read-only, while others have values you can also set. For example, the text element has an isVisible property that returns whether the element is actually visible on-screen. This property is read-only. The text element also has the text property that contains the current text in the text element. This is a property you can both read and set.

Methods

Methods perform actions on your elements. For example, the button element has a hide method that causes the button to not appear on your site.

Some methods have additional options that affect how the action occurs. For example, you can add animation to the hide method by specifying it in the parenthesis, like this:

$w("#button1").hide("FlyOut");

Event handlers

Event handlers let your elements respond to user actions (events). When you add an event handler to an element, you also need to specify what you want to happen when the event occurs. You do this in the callback function for your event.

For example, let’s say you have a button that says “Take the Tour” on it. You want to add functionality so that when a visitor hovers over the button, the text changes to “Let’s Go!”. You would add code to your site that looks like this (comments have been added to explain each part of the code):

Press + to interact
$w("#button1").onMouseIn(()=> //onMouseIn is the event handler.
   // The callback function starts here.
    {                         
        $w("#button1").label = "Let's Go!";
        //This is the code that runs when the event occurs.
    }
  // The callback function ends here.
);

Don’t forget that you can also add event handlers to your elements using the Properties & Events panel. Unless you have a specific reason for wanting to add event handlers manually, we recommend using the Properties & Events panel.

Note: Event code that you add to your site using the Properties and Events panel will not work if you copy/paste it to any other page or site, even if you copy the associated element.