Working with NPM in Framer Web and the new Framer desktop app
This is currently in beta and you will run into issues (documented below), but you are free to play and try. We know how to fix them and will be working on them over the next few weeks. You’re welcome to experiement and follow along, just don’t build anything important with it yet as some things might change.
NPM packages that import libraries that cannot deal with two instances won’t work. Most notably this is React (or Framer). Right now this only works if all packages relying on React import using "react". If they do a module URL import, another version of React will get loaded and things will break. We are making import map improvements to solve this structurally.
There are cool CDNs that expose every NPM package as an ES Module. You can for example use jspm. This would be how you would use lodash for example:
import * as _ from "https://firstname.lastname@example.org"// Use lodash code here...
Working with NPM in the legacy Framer Desktop
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
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
package.json file. It will be available in all your code components and automatically installed as a dependency whenever a project gets opened.
TypeScript might require you to import modules into components different from what you’re used to. As a rule of thumb, you can try to import the entire module into your component by using the asterisk symbol:
import * as debounce from "lodash.debounce";
Head over to the Learn page to find out more about installing external 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
You can run the following commands in your terminal to then set up the private registry:
yarn config set registry https://registry.acme.corp/ --scope=@acme
yarn login --scope=@acme
Tip: we recommend using Yarn. If you do use npm, you may be asked to set a Framer Token. Find out more about this in this article.
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
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 or Enterprise plan, to use NPM packages.
You can discuss this and other requested features over at Canny.