Element Capture

Screenshot specific elements, not the whole page

Describe what you want in plain English or pass a CSS selector. The API finds the element, crops to its bounds, and applies your styling. Pricing tables, hero sections, navigation bars, testimonial blocks — isolated and rendered in seconds.

Two ways to target elements

  • Natural language — pass element: "pricing table" and the API uses a two-pass process: DOM analysis to find the right selector, with vision fallback if needed. Costs +2 credits (DOM) or +3 credits (vision).
  • CSS selector — pass selector: ".pricing-grid" for exact control. No AI involved, no extra cost. Clips to the element's bounding box directly.

Common element descriptions

  • "pricing table" — finds and crops to the pricing grid on any landing page.
  • "hero section" — captures the above-the-fold hero block.
  • "navigation bar" — isolates the top nav.
  • "footer" — captures the site footer.

API example

Capture just the pricing table

curl -X POST https://screenframed.com/v1/capture \
  -H "Authorization: Bearer sf_live_your_key" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://tailwindcss.com/plus",
    "element": "pricing table",
    "background_preset": "aurora",
    "shadow": "soft",
    "padding": 60
  }'