Framer’s Fetch feature enables you to pull data from any API endpoint and use it directly on your website—without writing a single line of code. From simple JSON endpoints to full-fledged backends, Fetch gives designers and marketers the power to display dynamic, real-time information while keeping Framer’s performance and SEO benefits intact.

This guide covers everything you need to know: how Fetch works, when to use it, best practices, and how to build a backend that plays nicely with Framer.

What Is Fetch?

Fetch is Framer’s built-in, no-code API data layer. It lets you:

• Pull JSON from any API endpoint

• Bind live data directly to text, images, colors, and components

• Update content dynamically based on user context

• Power personalization and real-time experiences

• Use server data without losing speed or SEO integrity

All without touching custom scripts, external hosting, or complex integration workflows.

Fetch works entirely visually: select a layer → connect Fetch → map fields.

Why Use Fetch?

Fetch unlocks powerful dynamic features that previously required engineering support.

Ideal use cases include:

• Real-time stock or price data

• Weather conditions based on location

• Location-aware personalization

• Showing content based on login state

• Displaying inventory or live availability

• Time-sensitive announcements

• User-adaptive UI elements

• Data dashboards or metrics

• Smart banners that react to conditions

• Multi-region content variance

Fetch brings “live UX” to Framer—bridging the gap between static design and dynamic experiences.

When Not To Use Fetch

Fetch is powerful, but that doesn’t mean everything should use it.

Framer recommends avoiding Fetch when:

✔ the data is static
✔ the data rarely changes
✔ the content belongs in your CMS
✔ the page must be indexed for SEO
✔ you want the best possible performance

Rule of thumb:
If you can type it, put it in the CMS or directly on the page. If it must be live, use Fetch.

How Fetch Works

Fetch calls an external API from the client and returns JSON. Framer then maps each JSON field to design properties.

Supported data types

• String

• Number

• Boolean

• Image URL

• Color value

These types can be connected to text layers, images, styles, visibility rules, conditions, and components.

Non-supported types

Arrays cannot be looped inside Framer (no iteration), but their values can be individually selected inside the Fetch UI.

Building API Endpoints for Fetch

You can use any API that returns valid JSON, but for full control, many users build a small backend.

Recommended approaches:

• Cloudflare Workers (production-ready, fast)

• Val Town (perfect for quick prototypes)

• Vercel serverless functions

• Supabase edge functions

• Netlify functions

Anything that returns JSON with correct headers works.

Starter Templates

Framer recommends using these one-click starting points:

• Cloudflare Workers (JavaScript)

• Val Town (TypeScript, Deno)

These templates include:

• CORS already configured

• Standardized JSON return shape

• Ready-to-use endpoints for Fetch

Return Shape Requirements

Fetch expects a JSON object, not a primitive value.

✔ Valid:

✘ Not valid:

Rules:

• Must return a JSON object

• Must have CORS enabled

• Fields should use simple JSON types

• Arrays may be included, but not looped

Framer validates every field to ensure safety and correct mapping.

Examples of What You Can Build With Fetch

1. Location-aware banners

Show:

• “Free shipping to Berlin!”

• “Your local currency: €”

• “Weather today: 14°C and sunny”

2. Live pricing widgets

Perfect for:

• SaaS pricing variants

• Crypto prices

• Ticket or event availability

3. Inventory-driven CTAs

EXAMPLE:
“Only 3 left—Order now!”

4. Real-time schedule or countdowns

Using time-based APIs or your own backend.

5. Smart personalization

Logged-in vs logged-out users, based on tokens or headers.

Best Practices for Using Fetch

1. Use CMS + Fetch together

CMS for stable content
Fetch for dynamic variables

2. Cache on your backend when possible

Fast response = smoother UX.

3. Validate your data types

Use the same naming structure across endpoints.

4. Don’t block SEO-critical content

Because Fetch loads after the page, Google won't see this data.

5. Use Fetch only where it matters

Save it for interactive, personalized, or dynamic features.

Example: A Clean Cloudflare Worker Endpoint

Ready for Fetch.

How Fetch Appears in Framer

Once you connect your endpoint, you’ll see:

You can then bind:

• temperature → text layer

• condition → subtitle

• color → background color

• visibility → based on condition

• thresholds → conditional logic

When To Add a Backend Layer

Some APIs need more than simple GET requests.

Add a backend when you need:

• authentication

• rate limiting

• secure keys

• data transformation

• complex JSON structures

• caching

• user-based queries

Your backend becomes the “clean API layer” for Framer.

Summary

Fetch unlocks a new class of dynamic, real-time, personalized experiences in Framer. It gives designers and marketers instant access to API data—without code, without development cycles, and without sacrificing SEO or performance.

With Fetch you can:

✔ pull live data from any API
✔ personalize content based on user context
✔ create dynamic UI variations
✔ trigger reactive states
✔ build smarter, more adaptive websites

All within Framer’s visual design environment.