Skip to main content
Important: NPM packages are only available for apps using the new infrastructure.

​
What are NPM packages?

NPM packages let you add powerful features and tools to your Base44 applications without having to build everything yourself. You can access reliable, up-to-date code libraries for things like animations, data formatting, and charts, all created by expert developers. When you use NPM packages, you can add advanced features in minutes, rely on well-tested code, and focus on creating what makes your app unique.
Think of NPM packages as little boxes of ready-made code you can plug into your app. Someone else already wrote the code. You just need to install the package and can use all its abilities instantly.
Base44 makes it simple to add NPM packages to your app. You can request to add NPM packages, review the request, and approve installation, all from the AI chat inside your app editor.

Examples of NPM packages

  • Animation libraries (for example, anime.js)
  • Chart and graph utilities
  • Date and time helpers
  • UI components
  • Drag and drop logic
Important:NPM packages are created and maintained by third parties. Base44 can’t guarantee the quality, reliability, or security of any external package you install. Always test and validate packages carefully to make sure they work correctly in your app. You are responsible for ensuring that any third-party packages you use meet your project’s needs.

​
Browsing NPM packages

You can find NPM packages in the public registry. Each package README includes detailed instructions, usage examples, and peer dependency details, so you can get started right away. To browse Base44 NPM packages:
  1. Go to npmjs.com to see all available public packages.
  2. Click the package you want to use to open its details page.

​
Adding an NPM package to your app

In Base44, you can add NPM packages by chatting with the AI. No terminal or manual install commands required. To add an NPM package to your app:
  1. Go to your app editor.
  2. Type in the AI chat the NPM package you want to install.
  3. When prompted, click Approve in the chat.
The approval window in the AI chat when installing an NPM package

The approval window in the AI chat when installing an NPM package

​
Example of using an NPM package

You can use anime.js to create polished entrance animations for your app’s pages and elements. For example, you might want to animate cards, buttons, or charts when a page loads to make your site feel more engaging. Simply add a prompt such as: 
Install the NPM anime.js and make my app beautiful
The AI chat will ask you to approve the installation and the package is installed right into your app.
Installing an NPM package to your app in Base44

Installing an NPM package to your app in Base44

Once it is installed, you can use anime.js to animate page sections, icons, and more.

​
FAQs

Click a question below to learn more.
If your NPM package does not install or gets stuck on pending, try these steps:
  1. Check the chat messages for error details. Sometimes, the AI chat will explain about dependency or compatibility issues with the package you are requesting to install.
  2. Make sure your request matches the exact package name and version.
  3. If install requires approval, verify that you have approved the request in the chat panel.
  4. If the install fails, try re-requesting the package using the chat.
Once you have added an NPM package, you cannot remove it from your app. However, if you are not using an NPM package in the code but have it installed, it has no affect on your app. If an NPM package needs updating, you can simply ask the AI chat to do it for you.
To find out which NPM packages you have installed on your app, you can ask the AI chat.
Choose the right NPM packages by following the recommendations below. Doing a little research on each package, instead of installing it immediately, can help you find reliable options and prevent issues down the line.
  • Download statistics: Look up how many downloads the package has on npm. Packages with a strong download history are generally seen as dependable within the development community.
  • Documentation quality: Well-documented packages usually make setup and troubleshooting much easier. Look for clear usage instructions, examples, and API references.
  • License type: Make sure the package’s license fits your project’s requirements, especially if you’re building something commercial or open-source.
  • Bundle size and dependencies: Consider how the package will affect your app’s performance and whether it adds many new dependencies. Lightweight, focused packages reduce potential conflicts and bloat.
  • Update activity: Review the project’s repository, such as on GitHub, to see if updates are recent and if maintainers are addressing questions or bug reports. Packages that are kept up to date are usually safer and more compatible with modern tools.
  • Community input: Explore comments, ratings, and discussions from npm, GitHub, or programming forums. Other developers’ experiences can alert you to potential issues or give you a better sense of how the package performs in practice.