Fetch

Harness the power of APIs on your Framer site, without code. Learn how in the video.

Harness the power of APIs on your Framer site, without code. Learn how in the video.

Status

Location

Sunset

Views

Status

Location

Sunset

Views

+ Current weather

+ LISTENING STATUS

+ LIVE INVENTORY

Gradients

Gradients

+ ASTRONOMY

Sunrise

Sunset

Moon

Sunrise

Sunset

Moon

intro

Fundamentally, Fetch enables you to retrieve data from an API and use it on your Framer site.

Everything on the web works by requesting data from a server via a URL. This is called making a ‘request’ to a backend. These servers can have one or many URLs that are setup to send data, these are the API endpoints.

1

1

Someone visits your website

Someone visits your website

2

2

Fetch gets data from an API

Fetch gets data from an API

3

3

Your site displays the data

Your site displays the data

endpoints

A basic example of an API endpoint is a view counter. With Fetch, Framer asks the server for data by making a request the URL. The server then responds with the new data, which Framer integrates into your site via your Fetch setup.

Response

{ url: "fetch.tools",

{

count:

000

}

This website is also a collection of example API endpoints to provide various functionality that you commonly see APIs used for on the web. You can find a list of them at api.fetch.tools.

widgets

By using Fetch within Components, you can build powerful isolated widgets with dynamic data that are easy to customise and share.

Component features like Variables and the new Loading/Error variants offer your more control over how Fetches load and display on your site. Learn more about these features in the video.

custom

The true power comes when you utilise custom APIs endpoints from you, your company, or the Framer community. These can range from APIs with a few lines of code, to production setups.

If you want to get started making your own API endpoint for Fetch, the easiest way is to use a function-as-a-service platform. These let you define a backend as a single function. A popular option is Clouldflare Workers. For smaller quick experiments another fun option is Val Town.

export async function (request) {
  return Response.json({ data: "Hello!" })
}

Like with all static websites, any API endpoints that are used with Fetch need to be configured to be safely accessed from the public internet. Many APIs support this already, but in some cases with specific authentication methods, we recommend using a small backend to securely serve only essential data for your site.