In this 20‑minute walkthrough, front‑end developer and Velo advocate Meredith Hassett introduces Velo, Wix’s full‑stack development platform built on top of the Wix drag‑and‑drop editor. She demonstrates how to enable Dev Mode, use the built‑in IDE, work with integrated databases (collections) and dynamic pages, and manipulate UI elements via the $w selector and front‑end APIs. The tutorial covers Wix Data CRUD operations, creating backend files and exportable web modules (jsw), leveraging the package manager to install NPM packages, and accessing pre‑built Velo packages and Wix Fetch for third‑party integrations. Hassett also showcases developer tools such as Secrets Manager, Site Monitoring, Release Manager, and functional testing, before showing how to publish a Velo‑enabled site. Throughout, she emphasizes speed, reduced maintenance, and the ability to build complex, data‑driven web apps on Wix.
Chapters
Hi, thank you for joining me today. My name is Meredith Hassett. I'm a front end developer and a developer advocate for Velo. Today I'd like to show you more about developing with Velo by wix, so you're probably curious about what Velo is and how you can use it with your wix site. Let's dive in to see how Velo is the fastest option available today for developers to build complex web apps. Velo is a full stack web development platform on top of wix's Drag and Drop UI editor. It has a robust set of tools to minimize site maintenance while speeding up your development efforts. Velo offers a built in IDE that lets you write code on the page for easy code maintenance, an integrated database to reduce setup time to create a data driven site, and front end APIs that allow you access to your UI elements so you can adapt them. It's running on a Node JS server which means you get access to all of your favorite NPM tools with an easy to use GUI package manager. Velo also opens up a set of developer tools on wix such as Site Monitoring and a Secrets Manager to make sure your site is healthy and secure. Let's take a look at how all of these features help you develop faster while reducing your maintenance costs. To get started and enable Velo on your site when you're editing your wix site, go to the top menu bar. Here you'll see Dev mode. Go ahead and select Dev mode and you can turn on Velo. This will enable your wix editor to showcase all of the additional tooling Velo enables. It's easy to add code in the IDE you now will see at the bottom of your page. Now it's time to take a tour of all of the new features you see. Having an integrated database means no additional setup steps or cost to connect your site to a database and make it data driven. Wix's integrated databases, also called collections, are easily accessible from your site's dashboard or from your Velo enabled site. Clicking on the Databases icon on the Velo left side toolbar will open up your list of collections for your site. You may already see some collections here. If you've added a vertical to your site or created a form here, you can also create new collections, set their user permission levels, and add fields to the database. Once a database is created, you can create a dynamic page which will automatically create the correct number of pages for the number of rows in your database. This is an easy way to make a page template and bind the template to data even without any code. Creating your own database is also helpful for creating custom forms and enabling user of user data entry on your site. You can add front end code to your site using the built in page ide. It's easy to manage code associated with your UI by writing it on the page using Velo APIs. When you look at your page now, you'll see a new IDE at the bottom of the screen. This is where you add code for the page. You'll also notice a new properties panel on the right side of the IDE that becomes available when you click on a UI element on your page. This properties pane is where you can change the ID for an element, have it hidden or collapsed on load, and see the list of available event handlers for that element. Giving your UI elements meaningful names can help with code maintenance so your code is easier to read and understand. Events can make your site more interactive and as you can see, you can also add anything from an on click to a mouse event to pretty much any UI element. To work with the UI elements in code, you'll use the WIX Editor element selector we call $w. When you select a UI element using the $w notation, you are able to update properties for that element. For example, you are able to get the value of one field like an input field and use it to set the value of another field like a text field. You can have access to many properties and functions for each UI element. You can also update the visibility of an element using the showhide functions and add event listeners beyond the UI elements. Velo also gives you access to APIs for Wix verticals, page navigation, site interaction, and WIX Data. Velo has APIs to add animations to your site and APIs to create a custom navigation experience. WIX Window will give you the current context of the browser window and enables you to open Lightbox and pass data from your site to those lightboxes. You can also access some of your WIX vertical data and functionality in your site. APIs like WIX Users gives you access to the members app so you can get the context of the current logged in user. It also has functions to send emails to users and login logout functions to create a custom sign in experience. You also have APIs for booking stores, pay CRM and events. You'll find functions and properties of the related WIX app to help you customize the vertical experience on your site to fit your business's need. Wix Data is a handy API that is available on the front end of your site to work with your databases. WIX Data allows you to perform crud that is Create, read, update, and delete operations on your database. You can perform WIX Data queries to add data to any page and use $W to set the data as the value of a UI element. To make your site even more data driven, the Velo APIs not only give you access to the front end of your application, you can access your site's backend and some WIX verticals backends for further customization. When we click code files in the left icon bar, we get access to the back end of our application. Here we'll see a couple areas where we can either add code or tools. Additionally, many of the WIX apps have additional functionality available via their backend. Those backend APIs can only be used in your backend code files. When you create a new backend file, you're able to still access some of the APIs we were using in the front end like WIX Data and new tools APIs like Wix Secrets Manager. It's easy to create a function that is accessible via the front end. By exporting our functions, we're able to use them in other code files, including front end code files by importing them like the APIs we've already been using. However, the code does need to be in a web module or a file with the type jsw. This is all running on a Node JS server that you don't have to maintain, so you can still have access to your favorite packages. Using the built in Package manager, you can easily search for and install tools like Twilio to add text messaging capabilities to your site. You can even find code snippets and samples to help you get started. If the third party tool doesn't currently have an NPM module, there are two other places to look. New Velo packages include pre built packages with common functionality we see on many Velo sites. Integrations like Google Sheets are something we see a lot of, so you'll find that pre built functionality in our Velo packages. It is a new tool so keep checking back as that list of available packages is growing and your last option is to use WIX Fetch. This allows you to access any REST API from your third party tool. Enabling Velo for your site opens up extra developer tooling. These tools help simplify your development process and get access to site health information without any additional setup. Velo is all about developer velocity, so we have built in tooling for site security and health you'll get access to a release manager where you can create test versions to do AB testing of your site. You'll find a Secrets manager to store your API keys from your third parties or other sensitive information for added security. And you'll see site monitoring tools where you can use Velo's logging tools to see site events for on the spot debugging or Google's cloud operation for long term site health metrics. Another tool you'll find is functional testing. You can test your functions without having to leave your development environment by clicking the Play icon that appears next to a function declaration. This means no more setting up fake buttons on your UI and moving into preview mode to test your backend functionality. Once your site is ready to go with all the new features you've added with Velo, it's easy to add that functionality to your live site. Publishing your changes works just like publishing your site on wix. Go to the Publish button in the top right corner and click it Ta da. Your Velo enabled wix site is now live. So what do you think? Do you feel ready to take your site up a notch with all of the extra value Velo adds? Well, check out our resources on the Velo website, such as video tutorials, technical blogs, the API reference examples, showcases, and so much more. Find out the latest features from Velo by keeping track of our roadmap and releases, and stay tuned to our video series to learn more about working with Velo to enhance your web app.
