Note: The resources in this article are based on a Wix Editor site. While most of the content also applies to a Wix Studio site, any differing content can be adapted for a Wix Studio site by using the equivalent Wix Studio features.
Welcome to Velo by Wix! Below you’ll find a list of resources we’ve put together to help you onboard and get started creating advanced web applications with Velo. We know people learn in different ways, so we’ve put together a mix of videos, articles, and tutorials for you. For each resource, we also let you know approximately how long it will take to complete, and give you an overview of what you’ll learn. If you like seeing the whole picture and then backing up to learn the details, feel free to look at the more comprehensive material first.
You can use Velo with either the Wix Studio or the Wix Editor platform. While most features are available in both, the new Wix Studio offers additional features, including full CSS customization capabilities, the Wix IDE, and the Wix AI Assistant. There are also some features in Wix Editor that are currently unavailable in Wix Studio, such as, functional testing and dashboard pages.
Take our online course at Codecademy to learn everything Wix and Velo. In this course you'll:
- Master Wix’s drag-and-drop editor
- Streamline development with Wix’s built-in methods
- Create a backend to store and interact with data
- Make API calls to external resources
- Build a fullstack application on Wix
A quick introduction to the capabilities that Velo adds to Wix sites. This gives you a taste of what you can do without getting into implementation details. After watching this video, you can decide what you want to learn about next.
Similar to the video above, this article gives you a high-level introduction to all of Velo's capabilities. You get some more technical details here, plus links to all of our learning resources.
Velo's APIs let you control your Wix site in ways you couldn’t before. This tutorial and video shows you how to add logic to your site so that it responds in specific ways to different user actions. This tutorial is also code-focused and works with:
Wix Data adds database capabilities to Wix sites. When data is combined with Velo, you’re able to customize your site and create a truly unique user experience that meets you and your visitors’ needs. This article introduces you to creating collections, connecting them to the elements in your site, and creating dynamic pages.
You really feel the power of Velo when you combine all of its various capabilities to get the most out of your site. In this video, we build a travel site that lets visitors add and view user reviews. It includes the following features:
- Wix Data
- User Input elements
- Datasets (connecting your site elements to data)
- Repeaters (display unlimited content from a collection on a single page)
- The Properties & Events panel
If you like diving into the deep end when you learn, this video is for you.
Velo's APIs empower you to take full control of your site’s functionality. You use the APIs to interact with page elements, your site’s database content, and external services. The APIs also give you access to information about your site, its users, and more. This article gives you a high-level introduction to all of Velo's APIs and what they enable you to do.
- The Properties & Events panel
- The Code panel
- The $w.onReady function (running code when your page loads)
- Code that customizes dropdowns
- The getJSON() function, which retrieves a JSON resource from the network
If you want to cut your teeth on the full development capabilities of Velo, this is the place to start.
The Code panel is where all the coding action happens in Velo, and it will help if you fully understand its capabilities. This article introduces you to:
- Code files
- Properties & Events panel
- Code panel toolbar
- Velo syntax and autocomplete
- How to make sure an element has loaded before you reference it
- Working with your elements
- Warnings and errors
- Media Manager integration
- Testing your code
- Saving versions of your code
After you’ve looked at the resources above to help you onboard, we have more recommendations for further learning. Of course you can always browse and search our full list of resources here.
The Velo Sidebar displays all of the files that make up your site, including pages, lightboxes, folders, files, packages, and database collections. Learn more about it here.
The Properties & Events panel makes it easier to work with the elements in your site with Velo. You can use Velo with the elements on your site, including the page itself, the header and footer, and datasets.
If you edit your site in the Mobile Editor with Velo Dev Mode enabled, some capabilities are different than the Desktop Editor. Learn all about it here.
- Arrow functions
- Destructuring assignments
- let and const declarations
- Module support
We’ve created a lot of examples to demonstrate how you can use Velo to implement custom solutions on your sites. You can browse our examples to find one that matches what you want to do, or one that is close enough so you can easily modify it for your needs. Looking through the examples is also a good way to help you think of creative ways you might want to use Velo that you might not have considered.
Visit our community channels for additional resources and to get help with your coding challenges:
- Discord Server: The discord server is a dedicated space for Velo developers to engage with each other, share valuable insights, show off their successes, get help with their challenges, ask each other questions, and get advice from each other.
- Studio Code Forum: In the Code category of the Studio Forum you can get quick help with your code and share examples with others.
The Velo Glossary defines all the terms we use when we talk about Velo. It includes Velo-specific terminology as well as basic programming concepts.