Working with Data

Using the CMS

The Framer CMS lets you create structured content like blog posts, team members, products, etc.

How to use it

• Go to the CMS tab in the left sidebar.

• Create a Collection (like “Blog Posts” or “Testimonials”).

• Add Fields (text, image, rich text, links, etc.).

• Bind those fields to your components using the right-hand panel.

Example

• Drag a CMS Collection List onto your canvas.

• Connect it to your collection (e.g., Blog).

• Design the layout using CMS field bindings like Title, Image, and Description.

External APIs or Custom Data

If you need dynamic content from outside Framer (like a headless CMS, Google Sheets, or a custom API), you can fetch data with React and display it.

Steps

• Create a Code Override.

• Use useEffect and useState to fetch data from an API.

• Map the data into Framer components.

Example

import { useEffect, useState } from "react";

export function usePosts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts?_limit=5")
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return {
    children: posts.map(post => (
      <div key={post.id}>{post.title}</div>
    ))
  };
}

Data Overrides (Static Data)

For quick prototyping or dynamic behavior without a backend, you can use overrides to inject data manually.

Use Cases

• Show a different name or image per user.

• Change a value based on user input or interaction.

Example

export function OverrideText() {
  return {
    text: "Hello from Framer override!"
  };
}