title: Remote Data page: remote-data fetch.dog_facts = "https://dogapi.dog/api/v2/facts?limit=3" fetch.dog_breeds = "https://dogapi.dog/api/v2/breeds?page[number]=#query.breeds_page|1#&page[size]=6" fetch.dog_images = "https://dog.ceo/api/breeds/image/random/4"

Remote Data

Fetch and display data from external APIs. What can load remote JSON data during render and make it available in your templates.

Dog Facts

Random facts about dogs from the Dog API.

#fact.attributes.body#

Failed: #fetch_errors.dog_facts#

Failed to load facts
Load (server side)
// Dog API endpoint GET https://dogapi.dog/api/v2/facts?limit=3 // Response structure { "data": [ { "attributes": { "body": "Fact text here..." } } ] }

Dog Breeds

Browse dog breeds with details like lifespan, weight, and characteristics.

#breed.attributes.name#

#breed.attributes.description#

Life: #breed.attributes.life.min#-#breed.attributes.life.max# yrs

Failed: #fetch_errors.dog_breeds#

Failed to load breeds
Page #dog_breeds.meta.pagination.current_page# of #dog_breeds.meta.pagination.total_pages# (#dog_breeds.meta.pagination.total_count# total)
Load (server side)
// Paginated API request GET https://dogapi.dog/api/v2/breeds ?page[number]=1 &page[size]=6 // Response includes pagination meta { "data": [...], "meta": { "pagination": { "current_page": 1, "total_pages": 10, "total_count": 60 } } }

Random Dog Images

Random dog images from Dog CEO API.

Failed: #fetch_errors.dog_images#

Failed to load images
Load (server side)
// Dog CEO API endpoint GET https://dog.ceo/api/breeds/image/random/4 // Response structure { "message": [ "https://images.dog.ceo/...", "https://images.dog.ceo/...", "https://images.dog.ceo/...", "https://images.dog.ceo/..." ], "status": "success" }

API Resources

Find more free APIs to use in your projects.

<!-- Fetch data in What templates --> <what> fetch.dogs = "https://dogapi.dog/api/v2/breeds" </what> <loop data="#dogs.data#" as="breed"> <h3>#breed.attributes.name#</h3> </loop>