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 or app 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:
You can add packages to your site in the Package Manager, which you can access from the Packages & Apps section of the Velo Sidebar (Wix Editor) or the Code sidebar (Wix Studio). To add a package, click Install Velo Package or Install packages from npm. Then select the package you want and click Install. For more information, see the articles for each package type.
If there isn't already a package that meets your needs, you can also create your own custom app.
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 a package. You can import the functions and use them in your site code just like you import and use exported functions that you write in .js and .web.js files.
Note If a Velo package includes an npm package, you won't see the npm package in the npm section of the Velo sidebar (Wix Editor) or Code sidebar (Wix Studio).
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 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 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.
npm is the most popular registry of pre-built packages. The packages are built and maintained by npm developers. Velo allows you to install public npm packages in your site directly from the npm registry. 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.
You can build your own custom apps using Wix Blocks. These apps are private and only appear in sites where you are the site owner. Like Velo packages, custom apps can include functionality for use through exported functions which you can import and use in your site code.
After you create a custom app in Wix Blocks, the app is available for installation under Custom Apps when you click App Market in the Editor. Once installed on your site, the app is visible to site contributors. They can then see the app under Custom Apps in the Packages & Apps section of the Velo Sidebar (Wix Editor) or the Code sidebar (Wix Studio). However, site contributors can't make any changes to custom apps built by others.
Building a custom app is a convenient way to reuse your code across multiple sites. Simply write your code in Wix Blocks, build the app, and import your app on each site where you want to add the code’s specific functionality. You can also update your custom app whenever you like. To learn more, see Working With Custom Apps.