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 enables 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 enables 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.
