The video provides a step‑by‑step walkthrough of Wix’s Velo development environment. It begins by showing how to enable Dev Mode, then introduces the Velo workspace layout, including the left sidebar for navigating site files and the bottom code panel for writing JavaScript. The presenter explains the $W selector as the primary way to reference page elements, and demonstrates the Properties & Events panel for editing element IDs, default values, and event handlers. The tutorial distinguishes between Page Code (page‑specific) and Site Code (global), and describes the three main code file types—Public, Backend, and NPM packages—accessible via the Code Files section. It covers the global Search tool, the Databases section for managing collections and dynamic content, and the Velo Tools suite for versioning, API key management, and debugging. The Help section is highlighted for API references, forums, and documentation. Finally, the video shows how to preview a site, use the developer console, and begin debugging, encouraging viewers to explore further resources linked in the description.
Chapters
Today we're going to have a look around the Velo interface. Let's get into it first things first, to start working with code, you need to turn on Dev Mode. Just hover over the Dev Mode button in the top bar and click Turn on Dev Mode. And here it is, your Velo workspace. Here on the left is the Velo sidebar where you can navigate between all the files that make up your site. We'll get back to that in a second. Here at the bottom is the Code panel. This is where you'll write and edit code to add custom functionality to your project. Depending on how you like to work, you can keep it as is so you can see elements on your page or expand it to focus just on your code. Now I want you to meet $W. This is a selector you use in Velo to interact with any of the visual elements on your site. We won't go into more details about it now, but if you want to find out more about $W, check out the video linked in the description below. For now, let's move on to the Properties and Events panel on the right. Here you can click on an element in the editor to view or edit its element id, and you can also set default values or add some event handlers to the element. Ok, let's go back to the Velo sidebar and its different sections. In the Page Code section, you can view and edit your page code, which applies to individual site pages. You can also view your site code, which runs globally, meaning on every page of your site. Click on any page code file to go to that page in the editor and see its corresponding code in the code panel. You can double click on site files like your sitecode file here to open them up in a new tab. This lets you work on both your page code and your site code at the same time. You can use the same trick in the Code Files section, where you can have access to three essential file types. You have public files, which are JavaScript files that contain code you can use anywhere on your site, Backend files, and NPM packages. Double click on any of the code files to open them up as additional tabs. In the Code panel, the leftmost tab will always show the page you're currently working on. In the Search section, you can perform a global search through your page code, Public files, and Backend files. In the Databases section, you can manage your collections. Here you can connect your content to dynamic pages or spice up your site with a whole bunch of dynamic elements to choose from whenever you need production tools. You can access them straight from the Velo sidebar. In the Velo Tools section, you'll find features for releasing site versions, storing API keys, and monitoring and debugging your site. Jump over to the Help section to discover more cool resources like direct access to Velo API, reference, the Velo forum, and documentation. Send us your feedback and tell us about anything else you'd like to see in Velo, from features to resources. To test out your code, all you have to do is go into preview mode and use the developer console at the bottom, and you're ready to start debugging. Now you're ready to dive in and put your coding skills to work. To learn more about getting started with Velo, check out the link in the description below.
