Velo: Working in the Code Panel
- You can just drag the Code Panel up from the bottom of the page to open it.
- See our list of keyboard shortcuts.
Code Panel Tabs

Code Panel Toolbar


Right-Click Menu

Velo Syntax and Autocomplete
Selecting a specific element
1$w('#elementID')
To select an element:
- Type $w.
- Enclose the ID of the element in parentheses and quotes.
- Add a hashtag before the element ID.

- You can press Ctrl+space at any time to view the code completion pop-up.
- Element IDs are case sensitive. '#Button1' is not the same as '#button1'.
- If you add a new .js file in Public, code completion lists the elements from the last page you were on.
Selecting multiple elements
1$w('#elementID1, #elementID2, #elementID3')
Selecting all elements of a specific type
1$w('Button')
JavaScript Templates

When you select a JavaScript template, the full syntax for the template is added to the Code Panel. For example, if you select the "for statement," the following template gets added to your code:
for (let index = 0; index < array.length; index++) {
const element = array[index];
}
All you need to do is to add the code you want to run in the loop.
Making Sure the Element Has Loaded Before You Reference It
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:
1$w.onReady(function() {
2 //TODO: write your page related code here...
3});
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.
Learn more about $w.onReady
here.
Working with Your Elements

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

Properties
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
For example, the button element has a hide
method that causes the button not to 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
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 (we've added comments to explain each part of the code):
1$w("#button1").onMouseIn(()=> //onMouseIn is the event handler.
2 // The callback function starts here.
3 {
4 $w("#button1").label = "Let's Go!";
5 //This is the code that runs when the event occurs.
6 }
7 // The callback function ends here.
8);
Warnings and Errors
To view the warning or error message, hover over the icon.
Warnings

A common warning message occurs when you have an unnecessary 'else' after 'return'. This most often occurs when you use the following coding pattern:
function myFunction() {
if(someCondition) {
//do some stuff
return 0;
}
else {
//do other stuff
return 1;
}
}
If someCondition
is true, the function will return. That means that we don't need the else
to stop the code from executing when someCondition
is true
.
You can safely ignore this warning or change your code to the following pattern:
function myFunction() {
if(someCondition) {
//do some stuff
return 0;
}
//do other stuff
return 1;
}
Errors

-
Error message: "#text1" is not a valid selector (see image above)
If you change the ID of an element that you are using in some of your page code, the
$w()
selections in your code will cause errors. For example, if you have a text element with the ID text1 and you change the ID to statusMessage, all instances where you selected the element using$w('#text1')
will now be errors.
Note: you can use the Search and Replace functionality to fix this error throughout your code. -
Error message: 'import' and 'export' may only appear at the top level
When you import an API module, the
import
statement must appear at the top level of your code before the module is used. That means you cannot import the module inside a function as shown below. In general, it is recommended that you place allimport
statements on the first lines of your code, before any variable declarations and function definitions.

- In certain cases, the error indication does not appear at the point of your actual mistake, but occurs on the first line on which your mistake causes an error. For example, if you leave out the closing curly brace (
}
) in one of the functions of your page code, an error will most probably occur on whatever the next line of code happens to be. In the code shown below, a closing curly brace is missing from line 6, but the error does not occur until line 8.

Media Manager Integration
Velo allows you to use images that you've stored in the Wix Media Manager in your code. When you work with elements that include an image property, such as src
, a pop-up window opens, giving you the option to use an image from the Media Manager. This window appears automatically as you type "src".

Testing Your Code
You can test your code before you publish by previewing your site. Any code in your site runs exactly the same in Preview Mode as it will in the published version. You may also want to debug your code in your published site.