Retrieve the popular Dribbble feed for one category as a page of shot cards: position, title, canonical shot URL, full-resolution image URL, the numeric shot id, like and view counts, and the designer name, username and profile URL. List counts come from rounded labels such as 5.4k; counts_approximate is true on cards where a count was rounded, and the shot detail endpoint returns exact counts. The feed serves 24 cards per page and honours page and per_page; has_more follows the full-page rule, so a short page is the last one. Valid categories are animation, branding, illustration, mobile, print, product-design, typography and web-design. An empty category page is a valid empty result; an unknown category answers 422 and is never charged.
Run this endpoint
Endpoint
Parameters
Start with the required fields, then add optional filters only when your use case needs them.
Runnable path
1 required parameter needed before sending a request.
2 optional filters available.
string
Required
One of animation, branding, illustration, mobile, print, product-design, typography, web-design.
animation
integer
Optional
1-based page number. Defaults to 1.
1
integer
Optional
Shots per page, 1-24. Defaults to 24.
10
Request Examples
<?php
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://scrappa.co/api/dribbble/popular?category=animation",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => [
"x-api-key: YOUR_API_KEY_HERE"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}
<?php
use Illuminate\Support\Facades\Http;
$response = Http::timeout(30)
->withHeaders(['x-api-key' => 'YOUR_API_KEY_HERE'])
->get('https://scrappa.co/api/dribbble/popular?category=animation');
if ($response->successful()) {
echo $response->body();
} else {
echo "Error: " . $response->status();
}
const options = {
method: 'GET',
headers: {
'x-api-key': 'YOUR_API_KEY_HERE'
}
};
fetch('https://scrappa.co/api/dribbble/popular?category=animation', options)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.text();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
const axios = require('axios');
const options = {
method: 'GET',
url: 'https://scrappa.co/api/dribbble/popular?category=animation',
headers: {
x-api-key: 'YOUR_API_KEY_HERE',
}
};
try {
const response = await axios(options);
console.log(response.data);
} catch (error) {
console.error('Error:', error.message);
}
require 'net/http'
require 'uri'
uri = URI.parse("https://scrappa.co/api/dribbble/popular?category=animation")
http = Net::HTTP.new(uri.host, uri.port)
http.use_ssl = uri.scheme == 'https'
request = Net::HTTP::Get.new(uri.request_uri)
request['x-api-key'] = 'YOUR_API_KEY_HERE'
begin
response = http.request(request)
puts response.body
rescue => e
puts "Error: #{e.message}"
end
import http.client
import json
conn = http.client.HTTPSConnection("scrappa.co")
headers = {
'x-api-key': 'YOUR_API_KEY_HERE',
}
try:
conn.request("GET", "/api/dribbble/popular?category=animation", headers=headers)
res = conn.getresponse()
data = res.read()
print(data.decode("utf-8"))
except Exception as e:
print(f"Error: {e}")
finally:
conn.close()
import requests
headers = {
'x-api-key': 'YOUR_API_KEY_HERE',
}
try:
response = requests.get('https://scrappa.co/api/dribbble/popular?category=animation', headers=headers)
response.raise_for_status()
print(response.text)
except requests.exceptions.RequestException as e:
print(f"Error: {e}")
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;
import java.io.IOException;
public class ApiExample {
public static void main(String[] args) {
OkHttpClient client = new OkHttpClient();
Request request = new Request.Builder()
.url("https://scrappa.co/api/dribbble/popular?category=animation")
.addHeader("x-api-key", "YOUR_API_KEY_HERE")
.build();
try (Response response = client.newCall(request).execute()) {
if (response.isSuccessful()) {
System.out.println(response.body().string());
} else {
System.out.println("Error: " + response.code());
}
} catch (IOException e) {
System.out.println("Error: " + e.getMessage());
}
}
}
package main
import (
"fmt"
"net/http"
"io/ioutil"
)
func main() {
client := &http.Client{}
req, err := http.NewRequest("GET", "https://scrappa.co/api/dribbble/popular?category=animation", nil)
if err != nil {
fmt.Println("Error creating request:", err)
return
}
req.Header.Set("x-api-key", "YOUR_API_KEY_HERE")
resp, err := client.Do(req)
if err != nil {
fmt.Println("Error making request:", err)
return
}
defer resp.Body.Close()
body, err := ioutil.ReadAll(resp.Body)
if err != nil {
fmt.Println("Error reading response:", err)
return
}
fmt.Println(string(body))
}
#!/bin/bash
curl -X GET \
-H "x-api-key: YOUR_API_KEY_HERE" \
"https://scrappa.co/api/dribbble/popular?category=animation"
using System;
using System.Net.Http;
using System.Threading.Tasks;
class Program
{
static async Task Main()
{
using var client = new HttpClient();
client.DefaultRequestHeaders.Add("x-api-key", "YOUR_API_KEY_HERE");
try
{
var response = await client.SendAsync(new HttpRequestMessage(HttpMethod.Get, "https://scrappa.co/api/dribbble/popular?category=animation"));
var content = await response.Content.ReadAsStringAsync();
Console.WriteLine(content);
}
catch (Exception ex)
{
Console.WriteLine($"Error: {ex.Message}");
}
}
}
import axios from 'axios';
async function run(): Promise<void> {
try {
const response = await axios({
method: 'GET',
url: 'https://scrappa.co/api/dribbble/popular?category=animation',
headers: {
'x-api-key': 'YOUR_API_KEY_HERE',
},
});
console.log(response.data);
} catch (error) {
console.error('Error:', error);
}
}
void run();
use reqwest::Client;
#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
let client = Client::new();
let response = client
.get("https://scrappa.co/api/dribbble/popular?category=animation")
.header("x-api-key", "YOUR_API_KEY_HERE")
.send()
.await?;
println!("{}", response.text().await?);
Ok(())
}
Response Schema
Example response fields are illustrative; inspect the JSON before integrating.
Example response fields
Scan these fields before integrating.
success
data
meta
{
"success": true,
"data": {
"category": "animation",
"page": 1,
"per_page": 24,
"results": [
{
"position": 1,
"id": 27807153,
"title": "Animated Icon Set \u2014 Micro-Interactions",
"url": "https://dribbble.com/shots/27807153-Animated-Icon-Set-Micro-Interactions",
"image_url": "https://cdn.dribbble.com/userupload/49308381/file/still-45c78b6c09e33de539b96a5c4b9ae44c.png",
"likes": 26,
"views": 7100,
"counts_approximate": true,
"designer_name": "Dimitrije Mikovic",
"designer_username": "Dimitry_Mikovic",
"designer_url": "https://dribbble.com/Dimitry_Mikovic"
}
],
"has_more": true
},
"meta": {
"endpoint_family": "popular_feed",
"billable": true
}
}
Errors
Handle these documented responses before retrying or showing customer-facing failures.
Dribbble Upstream Unavailable
The upstream service is temporarily unavailable. Please retry shortly.
{
"success": false,
"error": {
"code": "UPSTREAM_UNAVAILABLE",
"message": "The Dribbble upstream is temporarily unavailable. Please retry."
},
"meta": {
"endpoint_family": "search",
"billable": false,
"retryable": true
}
}Parser Drift
Dribbble returned a page shape this parser does not recognise. The incident has been reported; retrying returns the same result.
{
"success": false,
"error": {
"code": "PARSER_DRIFT",
"message": "Dribbble response shape changed unexpectedly. The incident has been reported."
},
"meta": {
"endpoint_family": "search",
"billable": false,
"retryable": false
}
}Invalid Parameter
A query parameter is missing or not one of the accepted values. Never charged.
{
"success": false,
"error": {
"code": "INVALID_PARAMETER",
"message": "The request parameters are invalid."
},
"meta": {
"endpoint_family": "popular_feed",
"billable": false,
"retryable": false
}
}Generate Code with AI
Copy a ready-made prompt with all the endpoint details, parameters, and example responses. Paste it into ChatGPT, Claude, or any AI assistant to instantly generate working code.
Try It Live
Test this endpoint in our interactive playground with real data.