Onboarding to Velo by Wix

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.

The Basics

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.

Codecademy Velo Course

Take our online course at Codecademy to learn everything Wix and Velo. In this course you'll:

  • Master Wix’s drag-and-drop editor
  • Learn foundational JavaScript
  • Use JavaScript to power features of your own creation
  • 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

Coding in Velo

Introducing Velo by Wix (video 2:56)

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.

Velo by Wix (article ~5 min)

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.

"Hello World": Adding Custom Interactivity to Your Site (video 6:27 with accompanying article)

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:

Working with Databases

About Wix Data (article ~5 min)

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.

How to Collect & Display User-Generated Content on Your Website (video 3:59)

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:

If you like diving into the deep end when you learn, this video is for you.

Next Steps

Velo API Overview (article ~2 min)

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. The introduction to the Velo API Reference gives you a high-level introduction to what Velo's APIs enable you to do.

Working in the Code Editor (article ~10 min)

The code editor 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 editor 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

Learn More

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.

Working with the Velo Sidebar (article ~6 min)

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.

Working with the Properties & Events Panel (article ~3 min)

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.

Working in the Mobile Editor (article ~2 min)

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.

JavaScript Support (article ~3.5 min)

This article explains Velo's support of JavaScript features, including:

  • Promises
  • Arrow functions
  • Destructuring assignments
  • let and const declarations
  • async/await
  • Module support

Velo Examples

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. 

Coding Community

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.

Velo Glossary

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.

Was this helpful?
Yes
No