CSS & JS Injection

Sometimes the page needs small tweaks before you screenshot it. Maybe you want to hide a sidebar, change a font, remove an animation, expand a collapsed section, or fill in a form field. The API lets you inject custom CSS and JavaScript into any page before the screenshot is taken.

Custom CSS

The css parameter injects a <style> tag into the page. Your styles apply on top of the page's existing CSS, so you can override anything.

Parameter	Type	Description
`css`	string	Custom CSS injected into the page before capture. Max 10,000 characters.

Example: Hide sidebar and expand content

const response = await fetch('https://api.screenshotrun.com/v1/screenshots', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    url: 'https://example.com/article',
    css: '.sidebar { display: none; } .main-content { width: 100%; max-width: 100%; }',
  }),
});

const { data } = await response.json();
console.log(data.links.image);

import requests

response = requests.post(
    "https://api.screenshotrun.com/v1/screenshots",
    headers={"Authorization": "Bearer YOUR_API_KEY"},
    json={
        "url": "https://example.com/article",
        "css": ".sidebar { display: none; } .main-content { width: 100%; max-width: 100%; }",
    },
)

data = response.json()["data"]
print(data["links"]["image"])

$response = Http::withToken('YOUR_API_KEY')
    ->post('https://api.screenshotrun.com/v1/screenshots', [
        'url' => 'https://example.com/article',
        'css' => '.sidebar { display: none; } .main-content { width: 100%; max-width: 100%; }',
    ]);

$data = $response->json('data');

curl -X POST https://api.screenshotrun.com/v1/screenshots \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/article",
    "css": ".sidebar { display: none; } .main-content { width: 100%; max-width: 100%; }"
  }'

require "net/http"
require "json"

uri = URI("https://api.screenshotrun.com/v1/screenshots")
http = Net::HTTP.new(uri.host, uri.port)
http.use_ssl = true

request = Net::HTTP::Post.new(uri)
request["Authorization"] = "Bearer YOUR_API_KEY"
request["Content-Type"] = "application/json"
request.body = {
  url: "https://example.com/article",
  css: ".sidebar { display: none; } .main-content { width: 100%; max-width: 100%; }",
}.to_json

response = http.request(request)
data = JSON.parse(response.body)["data"]

body, _ := json.Marshal(map[string]any{
        "url": "https://example.com/article",
        "css": ".sidebar { display: none; } .main-content { width: 100%; max-width: 100%; }",
    })

req, _ := http.NewRequest("POST",
    "https://api.screenshotrun.com/v1/screenshots",
    bytes.NewBuffer(body))
req.Header.Set("Authorization", "Bearer YOUR_API_KEY")
req.Header.Set("Content-Type", "application/json")

resp, _ := http.DefaultClient.Do(req)
defer resp.Body.Close()

var result map[string]any
json.NewDecoder(resp.Body).Decode(&result)
fmt.Println(result["data"])

var client = HttpClient.newHttpClient();

var body = """
    {
        "url": "https://example.com/article",
        "css": ".sidebar { display: none; } .main-content { width: 100%; max-width: 100%; }"
    }
    """;

var request = HttpRequest.newBuilder()
    .uri(URI.create("https://api.screenshotrun.com/v1/screenshots"))
    .header("Authorization", "Bearer YOUR_API_KEY")
    .header("Content-Type", "application/json")
    .POST(HttpRequest.BodyPublishers.ofString(body))
    .build();

var response = client.send(
    request, HttpResponse.BodyHandlers.ofString());
System.out.println(response.body());

Example: Consistent font rendering

Different pages use different fonts. If you're generating thumbnails for multiple sites and want visual consistency, override the font.

curl -X POST https://api.screenshotrun.com/v1/screenshots \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "css": "body { font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif; }"
  }'

Example: Remove all animations

Animations can cause screenshots to capture mid-transition, resulting in partially faded elements or elements in the wrong position. This CSS stops everything in place.

curl -X POST https://api.screenshotrun.com/v1/screenshots \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "css": "*, *::before, *::after { animation: none !important; transition: none !important; }"
  }'

Tip

You can also use the reduced_motion parameter in Browser Emulation to disable CSS animations through the browser's media query preference.

Custom JavaScript

The js parameter runs JavaScript on the page before the screenshot. You have full access to the DOM and can use async/await for operations that need time.

Parameter	Type	Description
`js`	string	Custom JavaScript executed on the page before capture. Supports async/await. Max 10,000 characters.

Example: Pause all videos

curl -X POST https://api.screenshotrun.com/v1/screenshots \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "js": "document.querySelectorAll(\"video\").forEach(v => v.pause());"
  }'

Example: Remove a banner

curl -X POST https://api.screenshotrun.com/v1/screenshots \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "js": "document.querySelector(\"#promo-banner\")?.remove();"
  }'

Example: Expand all accordion sections

Documentation pages and FAQs often use collapsible sections. Open them all to capture the full content.

curl -X POST https://api.screenshotrun.com/v1/screenshots \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/faq",
    "js": "document.querySelectorAll(\"details\").forEach(d => d.open = true);",
    "full_page": true
  }'

Example: Fill a form field

curl -X POST https://api.screenshotrun.com/v1/screenshots \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/search",
    "js": "const input = document.querySelector(\"#search-input\"); input.value = \"screenshot api\"; input.dispatchEvent(new Event(\"input\", { bubbles: true }));"
  }'

Custom HTTP headers

The headers parameter sends custom HTTP headers with the page request. This is useful for accessing pages that require authentication tokens, or for setting the Accept-Language header to get localized content.

Parameter	Type	Description
`headers`	object	Key-value pairs of HTTP headers. Max 20 headers, each value max 2,048 characters.

Example: Localized content

curl -X POST https://api.screenshotrun.com/v1/screenshots \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "headers": {
      "Accept-Language": "de-DE,de;q=0.9"
    }
  }'

Example: Custom authentication header

curl -X POST https://api.screenshotrun.com/v1/screenshots \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://internal.example.com/dashboard",
    "headers": {
      "X-Internal-Auth": "token-abc123"
    }
  }'

Custom cookies

The cookies parameter sets cookies in the browser before loading the page. This is the most common way to access authenticated content — session cookies, auth tokens, or any cookie-based state.

Parameter	Type	Description
`cookies`	array	Array of cookie objects with `name`, `value`, and optional `domain`. Max 20 cookies.

Example: Authenticated session

curl -X POST https://api.screenshotrun.com/v1/screenshots \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/dashboard",
    "cookies": [
      {"name": "session_id", "value": "abc123def456", "domain": "example.com"}
    ]
  }'

Example: Dark theme via cookie

curl -X POST https://api.screenshotrun.com/v1/screenshots \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "cookies": [
      {"name": "theme", "value": "dark"}
    ]
  }'

Practical recipes

Authenticated dashboard with clean layout

Combine cookies for authentication, CSS to hide navigation, and JS to expand a collapsed panel.

curl -X POST https://api.screenshotrun.com/v1/screenshots \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://app.example.com/dashboard",
    "cookies": [
      {"name": "session", "value": "your-session-token", "domain": "app.example.com"}
    ],
    "css": "nav, footer, .announcement-bar { display: none; } .content { margin: 0; }",
    "js": "document.querySelector(\".collapsed-panel .expand-btn\")?.click();",
    "delay": 1,
    "full_page": true
  }'

Clean documentation screenshot

Capture a documentation page without the navigation, footer, and ads — just the content.

curl -X POST https://api.screenshotrun.com/v1/screenshots \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://docs.example.com/api",
    "css": ".nav-sidebar, .site-footer, .ad-banner { display: none; } .doc-content { margin: 0 auto; max-width: 800px; }",
    "full_page": true,
    "format": "png"
  }'