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 Asset button to the bottom left
5. Create a new code file by choosing either a code override or code 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

Example

Let's say you have a JSON file called data.json, and that this JSON file includes an object, User, that you'd like to use inside of a code component. Your JSON file could look like this:

{
  "User": {
    "firstName": "Koen",
    "lastName": "Bok"
  }
}

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

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

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

Learn more

One of the cool things about using JSON data in Framer is that it allows you to override text elements and images in design components with data from JSON files. Head over to our Learn platform to learn more about this.

For instance, by reading the guide on creating an interactive accordion design where these techniques are all applied.