One button turns any part of your app into a file. Users can draw on it before it goes. You get a URL and your own metadata back, and you never write a line of blob-wrangling code.
The playground is all client-side. Nothing you capture there leaves your machine.
Most libraries read your stylesheets and lay the page out again from scratch. Dark mode, CSS variables, container queries, whatever your third-party widgets are doing — some of it survives the round trip and some of it does not. We read the computed style of every node instead. That is the browser telling us what it already decided, so there is nothing left to guess at.
Give it a selector and you get that element: an invoice, a chart, a single card. If a panel inside it is scrolled halfway down, the capture is scrolled halfway down too. You can also grab just the visible window, or the whole page from top to bottom.
Switch the editor on and they get arrows, boxes, a highlighter, freehand, text, crop, and a redaction tool that genuinely destroys the pixels underneath. Plus a caption box, which is usually the part that tells you what they were actually complaining about.
The SDK gets a signed URL and uploads straight to storage. Then we POST you the finished file URLs with whatever context you attached at the call site — an invoice id, a ticket number, a user. Nothing to decode, nothing to convert, no multipart parser to maintain.
Point it at a selector, pick your formats, and attach whatever your backend will need to make sense of the file when it arrives.
import { createClient } from '@screen2api/sdk'
const s2a = createClient({ publishableKey: 'pk_live_…' })
// The whole page
await s2a.capture()
// Or just the invoice, as three files
await s2a.capture({
target: '#invoice',
formats: ['png', 'pdf', 'svg'],
params: { invoiceId: 'inv_1042', userId: 'usr_77' },
})Signed, resendable from the dashboard when your endpoint was down, and your params come back word for word — so you know which record the file belongs to.
{
"event": "capture.completed",
"capture": {
"id": "cap_9f3c…",
"caption": "The VAT line looks wrong",
"params": { "invoiceId": "inv_1042", "userId": "usr_77" },
"files": [
{ "format": "png", "url": "https://…/capture.png", "bytes": 481203 },
{ "format": "pdf", "url": "https://…/capture.pdf", "bytes": 262144 }
]
}
}A capture starts from the screen. A file starts from something your user already had — a contract, a scan, a photo of a receipt — and takes the same path out: mark it up, export it, have it delivered.
A black box drawn over text leaves the text sitting underneath, readable by anyone who copies and pastes it. That is how most “redaction” tools work, and it is how newspapers and government agencies have leaked documents.
We rebuild the affected pages from pixels instead — then read the result back and confirm the content is gone before handing it over. Every other page keeps its text layer.
original "SENSITIVE: 123-45-6789"
black box drawn on "SENSITIVE: 123-45-6789" ← still extractable
screen2api "" ← actually gone
"redaction_verified": truePDFs, photos, scans, SVG and plain text. Upload it, post a blob, send base64, or hand us a URL and we fetch it server-side. You never touch bytes.
Ask a file what it can become and you get the real answer for that file, so nobody discovers a limit halfway through a workflow. An SVG built from a raster says so rather than pretending to be vector art.
It is your customer’s own document. We convert it, we don’t keep it — the file and everything exported from it are deleted after 24 hours.
The slow part — working out the styles, pulling in the fonts and images, drawing the thing — only happens once. PNG plus PDF plus SVG costs barely more than PNG on its own. And point it at a table with csv to get the data itself, not a picture of it.