Velo: About Packages

When writing code, you often need to build some complex feature or functionality. Sometimes you discover that someone else already wrote and implemented the functionality that you need. Instead of reinventing the wheel and writing the same code over again, you can find a pre-built package written by others and incorporate it into your own code. Using pre-built packages, also known as code libraries, is a great way to minimize your development time and the amount of code you need to write.

There are 2 types of pre-built packages available to add to your Velo site:

Velo packages can be divided into 2 categories:

You can add packages to your site in the Package Manager, which you can access from the Code Files section of the Velo Sidebar. To add a package, hover over @velo or npm in the Packages section of your Code Files, click the plus icon, select the package, and click Install. For more information, see the articles for each package type.

Built using the Velo APIs, Velo packages are created specifically for Wix websites and work seamlessly with Wix elements and apps. Unlike npm packages, Velo package use cases are very specific to your Wix site.

A Velo package can include backend code files, public code files, and npm packages. A Velo package's functionality is available for use through its exported functions. An editable config.json file may also be included for defining specific settings for your package. You can import the functions and use them in your code just like you import and use exported functions that you write in .js and .jsw files.

Velo packages built by Wix allow you to add popular complex functionality to your site without spending hours writing code. Choose the Velo package you want, and import it on each site where you want to add the specific functionality. You can view all the code used to implement a package.
 

Each Velo package built by Wix contains a detailed readme file explaining the package's functionality and the steps required for implementation. Some package functions are internal and can't be used directly in your site. See the package's readme for the list of exposed functions available for use.

To help you understand how to use specific Velo packages built by Wix on your site, we added some examples to the Velo Examples page that integrate Velo packages. Look for the Velo package tag in the example.

If you have an idea for a Velo package that is not yet in our registry, you can request it in the Velo Wishlist. To learn more, see Working with Velo Packages.  

You can build your own Velo packages using Wix Blocks. These packages are private, and will only appear in sites where you are the site owner, in the My Packages section of your Package Manager. 

After you create a package in Wix Blocks, the package is available for installation in the Velo Package Manager. Once installed on your site, the package is visible to site contributors. They can then see the package in the Velo Sidebar, and in the Package Manager under Installed Packages > Packages Built by Others. However, site contributors can't make any changes to packages built by others.

Building a package is a convenient way to reuse your code across multiple sites. Simply write your code in Wix Blocks, build the package, and import your package on each site where you want to add the code’s specific functionality. You can also update your package whenever you like. To learn more, see Working with Your Velo Packages.

npm is the most popular registry of pre-built packages. The packages are built and maintained by npm developers. Velo allows you to install approved npm packages in your site. Most npm packages that are useful in Velo sites have already been approved. If you would like to use an npm package that has not yet been approved, you can request that it be added to the list. Note that even though an npm package has been approved, it is your responsibility to follow the npm package's developer guidelines to understand the package's functionality, in what situations it can be used, and in what situations it should not be used. Once installed, you can import the package and use it in your code. To learn more, see Working with npm Packages.