Using JSON data in Framer

Note: This article uses Framer's code features. Find out how to enable code features in your project.

Framer fully supports JSON data. To use JSON data in your code, you’ll need to first create a file to contain your JSON data:

1. From the Framer menu settings, enable Code in your project as described here
2. On the left panel in your interface, you should see a code tab
3. Toggle to open the Code menu
4. Click the Create Code file button to the bottom left
5. Create a new code file by choosing either a new override or component
6. Name your file and add the .json extension, e.g. data.json
7. Framer will recognise you are trying to make a .json file and create one accordingly

Importing your JSON file

Let’s say we have a JSON file called data.json, and that this JSON file includes an object, users, that you'd like to use with code. Our JSON file could look like this:

{
  "users": [
    {
      "name": "Tim Apple",
      "color": "#F2BF42"
    },
    {
      "name": "John Doe",
      "color": "#D85140"
    }
  ]
}

The next step would be to import the data object from our JSON file with the following import line:

import { users } from "./data.json";

From here, we’ll have access to the data in data.json, and can simply reference it to use it.

Continue reading to see how to do this with either a code component or code override.

Example: code component

To use our users data in a code component, we could for instance render a Stack component and in it, map over our JSON data and display one Frame for each object we find.

We can then also use the name and color values to determine what we show in each Frame.

Open this example as a Framer project

import * as React from "react"
  import { Frame, Stack } from "framer"
  import { users } from "./data.json"
  
  export function JSONComponent(props) {
      return (
          <Stack gap={10} alignment="center" distribution="center" center>
              {users.map((user) => {
                  return (
                      <Frame
                          width={200}
                          height={50}
                          background={user.color}
                          color="white"
                          radius={4}
                          style={{ fontWeight: "bold" }}
                      >
                          My name is {user.name}
                      </Frame>
                  )
              })}
          </Stack>
      )
  }
   
JSONComponent.defaultProps = {
    width: 250,
    height: 200,
}

Example: code override

We can also use JSON data to override existing elements. For instance, we can take a look at the Handoff panel and override any of the existing properties with data from our JSON file by using a code override.

Using the example below, we can apply these overrides to text and Frame layers on the canvas.

In our project, once we preview our screen, we will see that we have succesfully overridden two things:

1. The text layers have been overridden with the names from the JSON file
2. The color of the border around the user avatar has been replaced with the colors based on HEX codes in the JSON file

Open this example as a Framer project

import { Data, Override } from "framer"
  import { users } from "./data.json"
  
  export function JSONName1(): Override {
    return {
        text: users[0].name,
    }
  }
  
  export function JSONColor1(): Override {
    return {
        border: `2px solid ${users[0].color}`,
    }
  }  
  
  export function JSONName2(): Override {
    return {
        text: users[1].name,
    }
}
   
  export function JSONColor2(): Override {
    return {
        border: `2px solid ${users[1].color}`,
    }
  }