PARNii.DE

Websites & Mobile Apps featuring unique design and varying levels of functionality for micro, small, and medium-sized businesses, created by an official Wix Legend Partner.

How to install npm packages in Wix Studio Two

parnii

4 days ago

3 min read

Updated: 2 days ago

In the Studio Two editor, open the Code tab, open the terminal and run npm install with the package name. The editor then saves the change to package.json and package-lock.json. There is no separate package manager UI, so the terminal is the only place to manage packages.

Before you start

A Studio Two site with access to the Code tab.
The name of the package, found on npmjs.com.
A check that the package is safe. Wix does not verify 3rd-party packages.
A package that works with Node.js 22, is not an ES module and has no native modules.

Step by step

Check the package first. Read the package's page on npmjs.com for its purpose and limits. Private packages, packages that need specific hardware and packages with security risks are not supported.
Skip packages that are already installed. react, react-dom, typescript, @wix/data, @wix/stores and @wix/editor come pre-installed. Import them directly without installing anything.
Open the Code tab and the terminal. Switch to the Code tab in the Studio Two editor. Press Cmd+J on Mac or Ctrl+J on Windows and Linux. You can also use the panel toggle button in the top-right toolbar of the Code tab.
Run the install command. Run npm install followed by the package name. Installing a package means you accept its license agreement. When the install finishes, the editor saves package.json and package-lock.json for you.
Pin a version if you need one. Add @ and the version number right after the package name to install that exact version. The available versions are listed on the package's page on npmjs.com.
Confirm the install. Open package.json in the project and look for the package under dependencies. The README on npmjs.com explains how to use it.
Import the package in your code. Import the package in frontend components, including ERCs, or in backend code. Use it only where it is supported, since some packages work only in the frontend and others only in the backend.
Update or remove packages later. Update and uninstall also run from the same terminal. After either one, open package.json to confirm the result. Then review any code that depends on the package, because a new version or a removal can break it.

Good to know

Packages imported in frontend code increase the page's response size and can affect site performance.
ES modules and packages with native modules are not compatible with Wix.
A package only runs if it matches the site's Node.js version, currently Node.js 22. Check it in .nvmrc in the Code tab or run node --version in the terminal.
All dependencies of a package must also be compatible with Wix. If one is not, the package may not run correctly.
Errors that come from a package's own code show up in the browser console. They come from the package, so use its documentation to fix them.

parnii note

Check a package's module format, Node.js support and dependencies before you install it, especially if you plan to import it in frontend code. Try new packages on a copy of the site first.

FAQ

Where do I install npm packages in Studio Two?

Install them in the terminal of the Code tab. Open it with Cmd+J on Mac or Ctrl+J on Windows and Linux. Studio Two has no separate package manager UI.

Do I need to install @wix/data or react in Studio Two?

No, they are pre-installed. The same applies to react-dom, typescript, @wix/stores and @wix/editor. You can import them directly.

Why does an npm package not work on my Studio Two site?

It may be incompatible with the runtime. ES modules, native modules and packages that need a different Node.js version than 22 do not work. A dependency that is incompatible can also break the package.