Code-on-Canvas. Develop and Design at the same time.

Koen Bok — Thu, 08 Jul 2021 16:45:07 +0000

Code plus canvas are a match made in heaven. Code lets you express any complex idea, using logic, state, etc. And a canvas for visual design lets you compose, layout, and experiment quickly with different interfaces — Framer lets you combine both.

Framer is a no-code tool for interactive design. It has a performant free-form canvas for direct manipulation like many other design tools. But the canvas was made in React, so it can render any React Component, including the ones you code yourself right inside the tool. You can even add custom UI for your component props and instantly share your components with anyone.

Code in Framer lets you extend the tools capabilities. By using Code Components (React components) or Code Overrides (Higher-Order Components) you can create advanced interactions on top of your designs, share state, load real data from an API, and pretty much anything else you can think of. It’s a truly hackable design tool.

And with a major update to the editor and compiler to build components, the experience just got a whole lot smoother. The editor now uses swc and wasm to instantly preview your changes (or show errors). It’s a pretty nice way to build components directly in Framer, but of course you can also use external code from npm or other tools like CodeSandbox.

Framer code is fully built on ES modules. That means that every module you make in Framer automatically becomes an ES module. That way it’s instantly shareable across your projects and your team member’s. But it’s technically even how they’re rendered on the canvas.

Because we integrated ES modules fully in the in-app editor, you can import any http based ES module and use it in Framer directly, even from npm. No more yarn install, just import the full http URL where the ES module lives:

import _ from "lodash" // Old way (need to install)
import _ from "https://jspm.dev/lodash" // ESM way

Get started

You’ll be able to pioneer new ideas faster than ever before, create custom code solutions to uplevel your whole team, and share with the whole world with a simple link.

Explore our all-new Framer for Developers site to get started. Find cool examples or start playing immediately with our code playground. And finally, join us on Discord for help or questions from a community of 6,000.

Forem: Koen Bok

Code-on-Canvas. Develop and Design at the same time.

Get started