#Data & Overrides

A way to share data between components within Framer, using code overrides.

The Data objects behaves like a simple JavaScript object in which you can store anything. It updates the user interface of your project on every change, and can be used to share data between components and Frames. In this example, we’re simply changing the text property of any text layer the override gets applied to. Learn more about Overrides.


Data objects are intended for Overrides only and not for use in components in Framer X.
import { Override, Data } from "framer"

const data = Data({ name: "Ben" })

export function setName(): Override {
  return {
    text: data.name,
  }
}

#Incrementing Values

You can also use the Data object to increment numeric values. Here, we’re storing the rotate value as 0 by default. Then, we’re setting animate to always set rotate to said value. Finally, the data.rotate value gets incremented by 90 on every tap.

import { Data, Override } from "framer"

const data = Data({ rotate: 0 })

export function Rotate(): Override {
  return {
    animate: { rotate: data.rotate },
    onTap() {
      data.rotate = data.rotate + 90
    },
  }
}

#Data(initial): T

Allows data to be shared between Frames using Code Overrides. Any changes to the Data instance will cause the preview to update and code overrides will re-render. In this example, we’re updating the scale property on press, setting it to 0.5.

import { Data, Override } from "framer"

const data = Data({
   scale: 0.5,
})

export function WhileTap(): Override {
   return {
       whileTap: {
           scale: data.scale,
       },
   }
}
initial: Partial<T> | object

The initial value of the data to be set.

returns: T

the data object for use across components.