Framer X fully supports JSON data.

To use JSON data in your code, you’ll need to first import  the data from its file.

  1. In the menu, select File > Show Project Folder
  2. Open the folder named code.
  3. Put your .json file in this folder.
  4. Next, open your Framer X code component or overrides file. 
  5. At the top of the file, import  your data from ./yourFile.json as shown below.


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, UserComponent .

// data.json

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

Your first step would be to put this file in your project's code folder. Next, you would open your code component's .tsx  file and include the following line at the top of your file:

// UserComponent.tsx

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

Did this answer your question?