Fetch
Fetch enables your to get data from APIs and use them on your Framer site without needing any code. These can range from APIs with a few lines of code, to full scale production backends. For many endpoints this works out of the box, however for APIs with complex needs or authentication, you'll often want a small backend in-between Fetch and the API. These docs focus on helping you create backends that work great with Fetch. To learn more about the Fetch feature itself, see the video below.
Getting Started
If you want to get started making your own JSON 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 small quick experiments another fun option is Val Town.
Starter Templates
One-click templates to get started with your own API endpoint. These have CORS already configured and can be used with Fetch right away.
Cloudflare Workers (Javascript)
Val Town (Typescript, Deno)
Returning Data
Framer supports the rendering and usage of basic JSON data types of String, Boolean, and Number as well as additional types that we validate inside of Framer such as Image URLs or Colors. Arrays cannot be iterated over, but the values within them can be manually accessed from within the Fetch UI. The returned value must be a JSON object, returning a single value directly will not be picked up in the Path selector.
When to use Fetch
A good rule of thumb for using Fetch is that if information can be typed onto your site manually or into your CMS, then you should do that, as Framer better optimised static information like that for SEO. Fetch is optimised for data that is naturally very dynamic or personalised to the person using the site. This could be anything from Location and Login state, to live inventory count and stock values.