How to work with real dynamic data

Framer excels at working with various types of data to transform a layout into a template that can be used with different inputs. This page provides an overview of your options:

Content Management System

The CMS is the easiest and most powerful option. It allows you to add collections of items with properties you define. You can easily add data in a spreadsheet-like interface and render the items on separate pages or in repeating elements like Stack or Grid. However, the CMS cannot work with external data, such as an API, at this moment.

Dynamic Content from an API (Code)

Framer's code escape hatch allows you to create a simple code component that fetches data from a source and displays the results as you like.

You can import both Smart Components and other Code components into your code by clicking the “Import” button on the top left of the toolbar. This way, you can use components from your canvas in code to mix and match for dynamic results.

Application State (Code)

Application state refers to the data flow within your app, specifically how elements communicate with each other. In this example, we'll use overrides to connect a button to a counter. Create an override file with the following code and set up a similar layout.

import type { ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^0.3.0"

const useStore = createStore({ count: 0 })

export const withCount = (Component): ComponentType => {
    return (props) => {
        const [store, setStore] = useStore()
        return <Component {...props} text={`${store.count}`} />
    }
}

export const withIncrement = (Component): ComponentType => {
    return (props) => {
        const [store, setStore] = useStore()
        const onTap = () => setStore({ count: store.count + 1 })
        return <Component {...props} onTap={onTap} />
    }
}

Now, connect the two overrides: attach withIncrement to the button and withCount to the text field of the counter. Then preview it, and it will start working.

Please note that if you want to build a "real app" that creates, updates, and lists dynamic data, consider using a simple React application or a no-code app builder if you don't know how to code.