Using NPM packages in Framer

This article uses Framer’s code features. Find out how to enable code features in your project.

Framer uses NPM with Yarn to manage all dependencies. You can easily install any external dependency as you would with other JavaScript projects.

Adding packages with Yarn

Make sure you're using a folder-backed project. Alternatively, you can open a .framerx file’s temporary location while the project is opened in Framer by selecting File Show Project Folder.

Use the terminal to navigate to your project location:

~ $ cd project.framerfx

Now you can install any NPM package using Yarn.

~/project.framerfx $ yarn add lodash @types/lodash

From here, the package will be added to the node_modules and package.json file. It will be available in all your code components and automatically installed as a dependency whenever a project gets opened.

Learn more

Head over to the Learn page to find out more about installing external packages.

Private packages

To install packages from a private NPM registry, you can leverage your system-wide ~/.npmrc to set up the details of your registry.

As an example; let's assume the private registry is set up at https://registry.acme.corp and all packages are prefixed using the @acme scope. To set up the private registry, run the following commands in your terminal:

npm config set registry https://registry.acme.corp/ --scope=@acme

npm login --scope=@acme

After logging in, your private registry is set up and you will be able to install packages from your private registry:

~/project.framerfx $ yarn add @acme/library

Framer Web

It is currently not yet possible to install external dependencies from NPM using the web version of Framer.

For now we recommend working with the Framer desktop app, available under the Pro plan, to use NPM packages.

You can discuss th and other, requested features over at Canny.