Work with npm Packages

Wix allows you to install public npm packages directly from the npm registry to your site. This article explains how to install, use, and uninstall npm packages, which can be done in the editor (Wix Studio and Wix Editor), or by using the Wix CLI (Wix Studio) in your local IDE. Note that it's not possible to install npm packages directly to your site using the Wix IDE.

Install an npm package

Important: By installing an npm package, you agree to that npm module's license agreement.

Install an npm package in the editor

  1. Navigate to Packages & Apps in the Code sidebar.

  2. Hover over npm in Packages & Apps, click the plus icon , and then select Install npm package.

    This action opens the Package Manager. Note that the 10 most popular npm packages used on Wix sites are displayed in the Package Manager.

  3. In the npm section of the Package Manager, search for the package you want to add to your site. Instructions for how to use the package are displayed on the right side of the Package Manager.

  4. Click Install next to the package of your choice. Once installed, you can find the package under npm in the Packages & Apps section of the Code sidebar.

Install an npm package locally with the Wix CLI

To install an npm package with the Wix CLI, make sure that your site is connected to Github and that the Wix CLI is installed in your local IDE.

  1. Open the terminal in your local IDE.

  2. Install the package of your choice by running the following command:

    Copy

  3. Open the package.json file in your project to see the installed package.

Use an installed package

To use an installed package, open your package's README file from the editor. In the Packages & Apps section of the Code sidebar, click on the npm package to view the README file in the Code editor. Alternatively, hover over the package, click the Show More  icon, and then select View Documentation to view the npm package documentation in a new browser. Follow the instructions on how to use the package in your code.

You can also search for your package's README file at npmjs.cpm.

Change a package's version

Important: After applying a package update, make sure that the code on your site is compatible with the updated version of the package.

Change a package's version in the editor

In the editor, you can update a package to its latest version, or you can change it to a previous version.

  1. Open the Package Manager and select Installed Packages. To open the Package manager, hover over npm in Packages & Apps, click the plus icon , and then select Install npm package.

  2. Hover over the package and click the button, and then select Choose a version.

  3. Look for the version you want and click Install.

Update a package's version with the Wix CLI

To update a package to its latest version using the Wix CLI, run the following command:

Copy

Note: Currently, you can't switch to older versions of your package using the Wix CLI.

Uninstall a package

Warning: When you uninstall a package, you may inadvertently break code that relies on that package.

Uninstall a package in the editor

  1. Hover over the package you want to uninstall located under npm of the Packages & Apps section, click the Show More icon, and select Uninstall.

  2. The package is removed from the npm section in Packages & Apps of the Code sidebar.

Uninstall a package using the Wix CLI

To uninstall a package installed on your site using the Wix CLI, run the following command:

Copy

See also

Was this helpful?
Yes
No