Sharing Code

To share code across projects you can copy & paste components or add them to the Team Library so every Code Component you create is readily available to your whole team via the Insert Menu.

Another way to share code directly between projects is by using the Copy Import action in the code editor toolbar since every code file in Framer is shareable right away. This will copy an ES modules URL import that you can post into any project or ES modules compatible code setup.

Here's an example of importing a shared hook from a Framer project into a code file:

import { useFriendData } from "https://framer.com/m/useFriendData-KsqW.js"

export default function Friends(props) {
    const friends = useFriendData()

    return (
        <div>
            {friends.map((friend) => (
              <div>{friend.name}</div>
            ))}
        </div>
    )
}