How to add NPM packages

Install NPM packages like React, Vue, or any library from the NPM registry directly in PlayCode.

Method 1: Using the NPM Packages panel

1. Look for the NPM PACKAGES section in the left sidebar.
2. Click the plus (+) icon next to "NPM PACKAGES".
3. Type the package name (for example, canvas-confetti or react).
4. Choose the version you want to install.
5. The package will be installed automatically.
6. You can now import and use it in your code.

Method 2: Auto-install on import

You don't need to manually install packages before using them. Just start writing your code and import the package you need:

import confetti from 'canvas-confetti'

PlayCode will automatically detect the missing package and suggest installing it.

Managing packages

To view or remove installed packages:

1. Open the NPM PACKAGES section in the sidebar.
2. You'll see all installed packages with their versions.
3. To remove a package, click the three dots (...) next to it and select Delete.

Important notes

• PlayCode uses a UI-based package manager instead of a terminal with npm install
• Dependencies from package.json are not automatically installed
• You need to manually install each package using the NPM PACKAGES panel
• Most NPM packages are supported and work out of the box

Common packages

Popular packages that work well in PlayCode:

• react - React library
• vue - Vue.js framework
• three - Three.js 3D library
• canvas-confetti - Confetti animations
• axios - HTTP client
• lodash - Utility functions