How to display data from an external API endpoint in Webflow
By Prakash ChandranFebruary 2, 2021
Click on an item in the list and see the individual page for that item
Filter API data list by category
We are going to cover #1 – Get API data and list it in Webflow in this blog.
Step by step tutorial
In this example, we’ll send a list of restaurants to Webflow from an API endpoint hosted by Xano (No code backend). So, for each restaurant, we’ll create a card that displays the name and description and when you click on the card, it takes you to a page with more detail.
STEP 1 In Webflow, create a page and select an Element (like a Div) that you would like to have your API endpoint results listed into. So, in this example, we’ll create a Grid that the restaurant cards will live in.
STEP 3 Inside the Cards-Container Grid, we’ll create another Div and add a class to it called Sample Card.
STEP 4 In the Sample CardDiv, add an Image, Heading (H3) and Paragraph element (P). You can style it the way you want. You’ll also want to add the IDsamplestyle to it. This will be the example card that we’ll use to load the API endpoint results into.
STEP 6 Click on your Page settings and scroll to the Custom code section Before </body> tag.
NOTE: You’ll need a paid Webflow account to enable this section.