Code Modules is an advanced Framer feature targeted at technical users to extend Framers capabilities. If you are a regular user, you won’t need them unless you feel very adventurous.
Maybe the new site. We will brand code modules as Framer for Developers.
What are Code Modules?
We have rebuilt how code works in Framer. Code in Framer is used by developers to extend the tool with custom components or overrides. You can share these with an entire team. The main parts code modules improves are:
Writing code is now much faster and more reliable. We completely rewritten our compiler infrastructure so editing, auto complete and feedback and preview is nearly instant.
We now compile your code in-browser with wasm so we save a trip to our server. We also process in the background so Framer stays very responsive while compiling.
Code sharing is now instant and works both inside and outside of Framer so you can share between projects(with the team library) or bring in external code(for example via npm). We built this on top of the standard es modules meaning that every code file simply becomes an http link.
We improved how to work building things in code in Framer. From making the insert menu work in the code editor to quickly add design components to an improved preview setup to simplifying the library to making overrides true React Higher Order Components.
If you are a current Framer user that enjoys code and wrote packages, it’s important to realize that we did not change how code works, just how it’s distributed, so you’ll be able to use this new system with everything you already built by simply moving it over(but you don’t have to).
What can I use code for in Framer?
You can use code in Framer to accomplish the following:
Control other components so they can communicate and share state in the preview.
Typically used for sharing application state, working with real data or advanced gestures and animations.
How do I get Code Modules?
It’s enabled for newly created projects only, making sure that none of the old projects can break. A project can only use code modules or packages(not at the same time).
If you don’t have code modules enabled, you will see a legacy badge on top of your editor. You can create a new project and move over your code to convert.
How do I use NPM?
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 play and follow along, just don’t build anything important with it yet as some things might change.
Issues
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.
What are Code Modules?
What can I use code for in Framer?
How do I get Code Modules?
How do I use NPM?