What is Velo?

Velo is a full-stack development platform that empowers you to rapidly build, manage, and deploy professional web apps. It is an open development platform that accelerates the way you build web applications.

You can work in Wix’s visual builder, add custom functionality and interactions using Velo’s APIs, use your own tools, and enjoy serverless coding in both the front-end and backend, all in an open, extendable platform.

Velo features

Velo brings together all the tools you need to turn your ideas into professional web apps in a short amount of time. You can use the drag and drop Editor to create your UI, then add custom functionality using standard JavaScript and Velo APIs in the built-in IDE. It also lets you instantly build dynamic sites and collaborate on any type of content. Additionally, it’s all secured and maintained for you.

The following Velo features make your web app development hassle free:

Coding

Add your own JavaScript code to a Wix site and work with Velo’s APIs to add custom functionality and interactions to your site.

Velo also provides a full server-side runtime system based on Node.js. You can export functions from the backend to the client-side using ES2019 modules and Velo’s web modules. Velo serves all your files for you.

You can work with front-end and backend events created by many of Wix’s Apps and their elements. You can also work with your site’s contacts, enhance your site’s SEO, work with APIs that interact with your visitors’ browsers, and schedule jobs to run code at specified intervals.

Databases

When you enable Velo, you also automatically add Wix Data to your site. This lets you work with Velo’s built-in databases. Wix Apps are powerful services and offer amazing features that can enhance your site and grow your business. As you add Wix Apps to your site, their data is also automatically added as new collections on your site.

Once you’ve got databases enabled on your site, you can use Wix’s visual builder to connect your data to elements on your site, capture user input, and create dynamic pages. You can also define your own dynamic pages with Velo’s custom routers.

Velo also lets you connect your site to any external database using its External Database SPI. You can then work with that database in your site just as you would with its built-in collections.

Serverless, secure & maintained

All the work you do is hosted on Wix’s cloud services. That means you never have to worry about your server’s initial setup or long term maintenance. Wix automatically scales your site’s resources as needed, and you benefit from its lock-tight security.

Open platform

Velo lets you extend your site’s functionality to other services. You can install NPM packages, use fetch to call external APIs, and expose your site’s functionality as an API with the http functions.

You can also utilize third-party APIs like SendGrid, Twilio or Stripe to send automated SMS, allow payment processing and more. Use the Velo Fetch API or install packages from npm to add the functionality you need.

Built-in IDE

Velo adds a built-in IDE to your Wix site so you can code directly in the Wix Editor.

The IDE:

  • Minifies your CSS.
  • Minifies your JavaScript.
  • Bundles your JavaScript files.
  • Transpiles your modern JavaScript code to ES2019 so it can run on legacy browsers.
  • Lets you manage your databases.

Release candidates

As you develop your site’s functionality, you may want to test a version of your site on a percentage of your visitors. You can do this by creating a release candidate. Then you can use Velo’s site monitoring tool to track how it’s working before opening it to more site visitors.

Site monitoring

Velo’s site monitoring feature lets you gather information about Wix site events, such as console logs, HTTP functions, and web module functions. You can examine live site events in real time, easily integrate site events with Google Operations, and connect site events to an external monitoring tool to generate event metrics and perform error log analysis.

Secrets manager

Velo’s Secrets Manager lets you securely store secrets such as API keys. The value of each secret is safely stored and encrypted in the Secrets Manager in your site’s dashboard so that only you can access it.

You choose a name for each secret, which is then used in your site’s code.

Local development (Apha)

Working with a local version of your site means you can work in your preferred IDE to edit your site’s code. You can also develop your site simultaneously with another developer and use your own version control system to coordinate development across team members. More information about local development can be found here.

Javascript support

Velo supports working in JavaScript and some special features, including:

  • Support for JavaScript features
  • Support for modules
  • Support for the JavaScript Fetch API
  • Sharing of JavaScript code naturally between the backend and front-end using web modules

Module support (ECMAScript 2019)

Velo supports the native module functionality included in the ES2019 release of JavaScript.

To use the ES2019 module functionality, you need to follow the ES2019 Module Syntax. Only those items specifically exported in a module are exposed to other files. All other items in your module are internal to the module only.

For example:

Press + to interact
// Filename - public/amodule.js
export function aFunction() {
// Only this function is exposed to other files.
    return doSomething() + " or other";
}
function doSomething() {
// This function is internal to the amodule.js module.
    return "Do something";
}

To refer to an item in a module, you first need to import it:

Press + to interact
import {aFunction} from 'public/amodule.js';

Then you can refer to it:

Press + to interact
console.log(aFunction());
// Logs: "Do something or other"

You can export an item as default from a module:

Press + to interact
// Filename - public/amodule.js
export default function aFunction() {
    return "Do Something";
}

To import a default item, use import with no curly braces, { }. You can assign the default function any name when importing it. In this case, doSome is assigned to aFunction because aFunction is the default exported item in amodule.js.

Press + to interact
import doSome from 'public/amodule.js';

When you import an item from a module, the entire module file is executed. This means that if you have code that is not part of a function or variable declaration in your module, it will execute the first time you import a function from your module. For example, if you have this code in your module:

Press + to interact
// Filename - public/lib.js
export function aFunction() {
};
export function bFunction() {
};
console.log("Hi");

When you import aFunction from lib.js, your code will also log “Hi” to the console. This will run only once regardless of how many times you import a function from a .js file. So if you import bFunction, “Hi” is not logged to the console again.

Exporting Objects

You can export an object from a module. For example:

Press + to interact
// Filename - public/amodule.js
export let myObject = {
           prop1: "Here",
           prop2: "There"
       }

You can then import it and refer to its properties:

Press + to interact
import {myObject} from 'public/amodule.js';
console.log(myObject.prop1)
// Logs: "Here"

Module Scope

The following is a list of guidelines that define how you can share modules and functions between, and within, the backend and public scopes:

  • A JavaScript file or script in the backend can import a module from any file in the backend or public.
  • A file in public can import a module from any file in public.
  • You can import functions from the backend and use them in public, using a web module.
  • You can use relative paths to refer to files with the “.” prefix.
  • You can import a module from backend with the backend/ prefix.
  • You can import a module from public with the public/ prefix.
  • Modules can import other modules.

Wix Fetch

Wix Fetch is an implementation of the standard JavaScript Fetch API and you work with it the same way by using standard Fetch syntax. You can see examples of using Fetch here, or check out the Standard Fetch specification.

You should use Fetch whenever you need an http/s request. You can use Fetch in both backend and front-end code. To use Fetch in your JavaScript code, add import {fetch} from 'wix-fetch' to the beginning of your JavaScript file.

One of the benefits of Fetch is its use of promises to handle asynchronous requests, which allows for easier handling of results and errors.

Velo by Wix opens up endless possibilities for customization of your application. To get the most out of Velo, you should familiarize yourself with all of its features. You can then decide how to “mix-and-match” the different functionalities to make them work for you.

To enable Velo on your site

Click Dev Mode in your site’s top bar and enable Velo in the dropdown.