Velo is a Wix product with a twist. Wix is one of the more popular development platforms on the web. It allows designers (and the average website owner) to build amazing websites without writing a single line of code.

With Velo, Wix is expanding its user base to include developers. Velo is a full-stack development platform that allows users to create great websites using code. The only programming language you need to know to use Velo is JavaScript. The platform supports modern JavaScript features and uses a NodeJS based server-side system.

In this article, you’ll learn about Velo’s unique features and how to use them.

Velo’s Developer Features

The Velo development platform has a built-in IDE, allowing developers to write JavaScript code and see the changes in real-time. Velo runs on a NodeJS server, which means that a developer has access to npm packages and other developer tools. These developer features include:

• The ability to create custom layouts and interactions on a webpage.
• The ability to create collections in a database.
• The ability to create custom APIs for your website.

Creating a Website Using Velo

To use Velo, you’ll need to navigate to its main website. Once there, select the option to start a new project. This will take you through the customary Wix site creation process, where you’ll have to choose the type of website you want to build. You can either select a template on your own or with the aid of Wix ADI.

After you’ve selected the option to edit your template, you’ll see something like the following UI:

To the left of the image above is the website structure sidebar, which gives you access to the various JavaScript files connected to all the pages on your website. The page currently selected is the home page, and if you look at the bottom of the image above, you see a code editor displaying the content of the HOME.js file.

Creating Custom Layout Structure and Interactions

The template selected for this article is the online wellness store. The home page of this website has a “most popular”, which you can see in the following image:

However, if you want to use a different heading for this section, you can achieve this in the Velo editor by inserting the following code into the HOME.js file.

The HOME.js File

$w.onReady(function () {
 $w('#text20').text = 'TRENDING ITEMS'
});

The code above will update the “most popular” heading to “trending items, and you can view this update by clicking the preview button at the top right of the Velo interface. On the home page in the appropriate section, you should see something like the following output:

Working With Velo’s Database

Most dynamic websites have a database that stores data differently, depending on the type. Velo stores its data in collections in its central database. To gain access to this database, you’ll need to navigate to the table of rows and columns to the left of Velo’s developer interface.

As you can see from the image above, each Wix template comes with some default collections, depending on the type of website. The website template selected for this article is a wellness store. Therefore, it has a collection of default products that you can easily replace with your items.

However, if you want to create your collection from scratch, they also have that option.

To create a new collection in your Velo database, simply hover your mouse over the “content collections” section, and a plus icon will appear to the right of the text.

Clicking on the new collection option in the image above will generate the following collection creation form:

Providing a collection name and clicking the create button will take you to the following content manager page:

From the content manager page above, you can start populating your product collection using the relevant plus icons. But before you start to add products to your collection, you’ll need to create the appropriate fields.

Look at the content manager page above; it currently has one field—title. You can’t delete this field because it is the primary field (or unique identifier), which every collection must have. However, you can give it a more appropriate title, such as product name or ID.

To change the name of an existing field in your collection, simply click on the field in question, and you’ll see several options.

Selecting the property option that you can see in the image above will produce the following pop-up form:

The pop-up form above allows you to change the field name by entering the title that you want into the text field labeled “field name” and clicking save.

Adding a New Field

There are two ways to add a new field to your collection. The first option is to click the plus icon to the right of the existing title in the collection. This method will generate the following form:

The new field form allows you to provide a field name, a field key (to integrate into your code), and a field type. The field type can be any one of the following:

• Text
• Image
• Boolean
• Number
• Date and Time
• Time
• Rich Text
• Reference
• Multi-Reference
• URL

The second way to add a new field to your collection is by clicking the “hidden fields” section and selecting the “Add Field” option from the pop-up field list. You should see something like the image below:

Adding Items to the Collection To add a new item to your collection, you can click the “Add Item” button at the right of the content Manager page or click the plus sign below the field titles. After you add your first item to your collection, it should look like this:

You can now add as many items as possible to your collection using either of the methods above. However, to update your website with any collection, you’ll need first to publish the site.

What Makes Velo Exciting

Now you know how to customize your website using JavaScript code in the Velo IDE. You can also create custom collections with as many items as you’ll like in the Velo database. But what is quite possibly be the best thing about Velo is the ability to import and use npm packages.