You just signed up to use Velo by Wix, or maybe you’re a long time Wix user and you just turned on Dev Mode and now you’re ready to build your first web application with Velo. Or perhaps you’re just getting your feet wet or want to add a few lines of code. Maybe you want to implement one of the many features you can find in the code examples and video tutorials featured on this site.
Whatever it is you want to do, the very first thing you encounter when you open up Velo’s IDE is this:
So, what is this $w all about? In short, this is the selector you will use to access all of the Velo APIs that let your code interact with the visual editor. So if you want your application to have a UI your users can interact with, and not just look at, you need to be familiar with $w.
Any code you write that needs to interact with any of the visual elements on your site will use the $w selector. What does that look like? For example: you can change the text of a visual element using code; you can add actions that will happen after the user clicks on a button, or you can replace an image source using $w. And those are just a few examples.
Just remember; code that interacts with a visual element uses the $w selector.
To fully understand how this works, you can read all the details about the Velo APIs in our reference site. There you will find info about all the ways your code can interact with Wix’s visual builder and other services.
As you familiarize yourself with the APIs, their syntax, and the full capabilities they enable, there’s an important tip to help you jump head-first into using Velo:
Get Ready for $w.onReady()
This function is added by default to every page you create with Velo. It runs when all of the page’s elements have finished loading. Learn to love this function, because it plays an important role in the way your code can interact with visual elements on the page.
What’s most important to remember, is that you can only use the $w selector to interact with visual elements once the $w.onReady() function runs. What this means practically, is that you will use the $w selector either: within the onReady function; within a function that is initiated within the onReady function; or within a UI event such as the click of a button.
This is just a super quick intro to help you avoid some beginners' stumbling blocks. Remember to check out the API reference as you move along to see how much you can do with Velo.
You can register for Velo, or if you already have a Wix site click Dev Mode and click Turn on Dev Mode.