About npm Packages

Node Package Manager (npm) is a popular registry of reusable JavaScript code. In npm, each reusable library of code is referred to as a package. When developing Wix websites, you can save time and install public npm packages from the npm registry on your site, instead of writing code that already exists.

Once an npm package is installed, you can import it in your site's code and use it.

Here are some examples of npm packages you could use:

• lodash: Manipulate strings, arrays, and optimize common operations.
• @sendgrid/mail: Easily send emails using the SendGrid service.
• axios: Make HTTP requests from a browser or Node.js environment.

Supported IDEs

You can use npm packages with:

• The editor (Wix Studio and Wix Editor)
• The Wix IDE (Wix Studio)
• Your local IDE (Wix Studio and Wix Editor)

Package examples

You can find example sites that integrate npm packages on our examples page. Open an example and view the code used to work with the package.

Package support

When you install an npm package on your site, it's important that you understand the package's functionality, appropriate use cases, and limitations. Note that certain types of packages are not supported, including private packages, packages requiring specific hardware, and packages that may pose a security risk.

Here are some important considerations for using public npm packages in your code:

• Package security: Packages are 3rd-party code and are not verified by Wix. Therefore, installing them can put your site and users at risk. It is your responsibility to make sure that packages are safe before installing them on your site.
• Frontend vs backend code: Make sure you use packages in the context they were designed to be used. Some packages are intended exclusively for frontend code, while others are meant for backend code.
• DOM interactions: With Wix, you use $w APIs to interact with page elements instead of directly manipulating the DOM. Therefore, some packages that include interaction with the DOM may have limited use in your site.
• React compatibility: Some packages are designed to work with React. Currently, you can only use these packages in conjunction with custom elements.
• Error handling: Errors that originate from a package's functionality are reflected in the browser console. These errors are generated by the implementation of the package itself, and not from Wix. Refer to the package's documentation for more information on resolving these errors.

Performance considerations

• Importing npm packages in frontend code increases the page's payload and may adversely affect your site's performance.

Package limitations

The packages you install and use on your site must be compatible with Wix's runtime environment or they may not run properly.

• ES modules and packages containing native modules are incompatible with Wix.
• A package won't execute during runtime unless it aligns with Wix's current Node.js version.
• Wix has runtime limitations: terminal commands are not supported.
• For a package to be compatible with Wix, all its dependent packages must also be compatible. Otherwise, the package may not run.

See also

• About packages
• Work with npm packages in the editor
• Work with npm packages with the Wix CLI