Elements and Selectors
Capture one component, card, chart, hero, or section instead of an entire page.
Element capture is for assets where a full page is too noisy. You can target elements deterministically with selector or describe them with element.
CSS selector capture
Use selector when you can add stable capture hooks to your app.
json{ "url": "https://example.com/pricing", "selector": "[data-capture='pricing-table']", "background_style": "transparent", "inset": 24, "output": { "format": "png" }}
Prefer capture-specific attributes like data-capture="pricing-table" over brittle class names generated by a CSS framework.
Natural-language element capture
Use element when the page is external, you do not control selectors, or the target is easier to describe.
json{ "url": "https://example.com", "element": "the pricing cards section", "background_preset": "arctic", "shadow": "soft", "aspect_ratio": "16:9"}
The response can include element_resolved:
json{ "element_resolved": { "description": "the pricing cards section", "method": "dom-analysis", "selector": "section[data-pricing]", "bounds": { "x": 120, "y": 480, "width": 1080, "height": 520 } }}
Inset and background balance
| Field | Description |
|---|---|
inset | Adds internal padding around the captured element. |
inset_balance | Uses detected element background where helpful. |
auto_balance | Allows ScreenFramed to pick helpful default styling when you have not specified a visual direction. |
Patterns that work well
Debugging selector captures
If a selector capture fails:
- Confirm the selector exists after the page finishes loading.
- Try
wait_for: "networkidle"or a numeric delay. - Hide overlays that may cover the target element.
- Use
show_resolved_params: truewhile debugging request construction.