Render live Google Sheet data in Framer

Why a code component beats a static design

Framer is fast for layout, but the content you paste into a frame is frozen at design time. The moment your data changes — a new listing, an updated price, a fresh roster — you are back in the editor nudging text. That does not scale for anything that updates on its own schedule.

Because Framer code components are just React, they can fetch data at runtime and render it live. PasteSheet gives that component a clean, cached JSON endpoint over any Google Sheet, so a non-technical teammate edits a spreadsheet and your published site reflects it — no plugin, no backend to stand up.

Good fits for a live component

Anything a spreadsheet models cleanly and that changes after you ship:

• Listings, job boards, and directories.
• Pricing tables and product catalogs.
• Team grids, testimonials, and changelogs.
• A leaderboard or any feed that should stay current on its own.

Fetch the API in a code component

Add a code component and fetch your endpoint in an effect. The rows come back typed, so numbers and dates are ready to render — filter and sort in the URL:

import { useEffect, useState } from "react"

export function Listings() {
    const [rows, setRows] = useState([])

    useEffect(() => {
        fetch("https://pastesheet.com/your-endpoint/Listings?sort=-date")
            .then((r) => r.json())
            .then(({ data }) => setRows(data))
    }, [])

    return (
        <ul>
            {rows.map((row) => (
                <li key={row.slug}>{row.title}</li>
            ))}
        </ul>
    )
}

Read-only, so it is safe to ship

Because the endpoint is read-only by design, it is safe to expose publicly or hand to a teammate: consumers can read and query the data but can never change the sheet. And there is no Google Cloud project, OAuth screen, or service account to set up — you paste a share URL and get a live API.

What it costs

Frequently asked questions

Sources

• Files you can store in Google Drive (size limits) — Google

Related use cases