Introduction to Fetch in Framer
Fetch is a new feature in Framer that allows you to use APIs to show content on your site without needing any code. This keeps your site fast while integrating dynamic data from a backend.
Using Fetch for a View Counter
We start with a basic example: a view counter. Select the text layer with the view count and navigate to the content property where you’ll find the option to add a fetch. In the Fetch UI, you can input any API endpoint URL. Framer offers built-in example endpoints that showcase the power of fetch, ideal for dynamic data unique to users or content that cannot be known at the time of publishing. We select the views endpoint, and Framer builds a list of available data from the API. We then select the `count` value. The view count is heavily cached on the canvas, but if you preview and reload, you’ll see the view count updating dynamically.
Using Fetch for Location Data
Another common API use case is fetching the visitor’s approximate city or country. We use the built-in location endpoint and select `city` from the available data, which shows “Amsterdam” as expected. If the API is slow or expensive, you can add a cache to prevent refetching for a set amount of time, such as one hour. This ensures the data is reused, improving performance.
Building a Weather Widget with Fetch
For a travel website, we create a weather widget that fetches and displays real-time weather information for different cities. Using the weather endpoint, we set up the fetch to use a variable for the city, allowing the widget to dynamically update when the city property changes. After setting up the fetch for temperature and description, we preview the component, which shows live weather data with a smooth loading experience.
Using Loading & Error Variants
Framer allows you to define loading and error variants for fetch components. This gives you control over the loading state’s appearance, ensuring the user sees appropriate feedback while the data loads. For example, you might display gray placeholders where content will appear once loaded. You can enhance this further by adding fade-in effects for a smooth transition from the loading state to the final content display.
Advanced Use: Custom API Endpoints
Fetch truly shines when using custom API endpoints. For example, you can display server status on your Framer site by connecting to a backend endpoint. It’s recommended to use a small backend, like a Cloudflare worker, to clean up data and manage any sensitive information securely. Once the backend is set up, you simply paste the API URL into Fetch, select the relevant data path, and Framer handles the rest.
Additional Fetch Features and Examples
Framer’s Fetch feature includes several advanced options. For instance, in a stock price example, you can set the fetch to refresh every 10 seconds to display the latest data. Another example includes dynamically updating an image frame's fill property based on an album's cover art, which waits for the image to load before transitioning smoothly.
Fetch opens up many possibilities for integrating live data into your Framer projects. From simple view counters to complex custom data displays, it enables dynamic, responsive designs with ease.
