Turn your phone sideways

AlphaGrab shows a 16:9 broadcast frame. Landscape gives it the whole screen — upright it is a letterbox too small to judge an edge or a matte on.

AlphaGrabKnight AI+AV
BG
Fit
Any URL in. A transparent frame out.

Paste a link to an image, an SVG, or a live HTML graphics template. AlphaGrab renders it at broadcast resolution, keeps the alpha channel honest, and hands you a frame you can drop straight onto a timeline or a switcher.

Ctrl+V paste · O open file · drag a file anywhere · ? help
No graphics loaded.

Paste an HTML template URL above and press Grab — it opens as a running instance you can watch, hold and pull frames from. Up to at once, all rendering locally in this browser.

Drop an image, SVG or HTML file
Working…
1920 × 1080
nextclip_001.png
Q
—

AlphaGrab — what it does and where it stops

The idea

Point it at a URL. It fetches the bytes, renders them at the resolution you choose, keeps or creates a real alpha channel, and hands you a frame. Images, SVGs and HTML graphics templates all go in the same box.

Honest limits — read this once

  • CORS. A browser may only read pixels a server agrees to share. If a host does not send Access-Control-Allow-Origin, AlphaGrab says so plainly instead of exporting an empty frame. Drop the file in, or route it through a proxy you run.
  • HTML templates. The page really runs — its scripts execute in a same-origin frame — and the settled DOM is then repainted as native SVG, so the frame is vector and scales to 8K without a single enlarged pixel. Boxes, gradients, borders, radii, opacity, images, inline SVG and text all survive with their layout intact. Box shadows, CSS filters, blend modes, clipping and rotate/scale transforms do not, and every one that is actually present is named in a warning rather than quietly dropped. Assets from servers without CORS cannot be embedded and are reported as missing. Anything painted after the settle delay is not in the frame.
  • Upscaling. Vectors and HTML are rendered natively at the size you ask for, so 8K is genuinely 8K. A bitmap enlarged past its own resolution is interpolation — AlphaGrab labels it rather than calling it detail.
  • Canvas ceiling. Browsers differ, and an over-sized canvas fails silently — it reads back empty. AlphaGrab writes and reads a probe pixel at start-up and shows the real ceiling in About.

Which key

UseWhen
ChromaGreen or blue screen. Keys on hue, so a lit backdrop with a brightness falloff still keys clean. Spill suppression pulls the backdrop out of the edges.
LumaGraphics delivered on flat black or flat white with nothing to key on but brightness.
Colour→αA logo or title on a flat colour. It removes the colour and unmixes it out of anti-aliased edges, so type keeps its softness instead of a halo.

Why the HTML frame is vector

The obvious way to snapshot a live DOM is to wrap it in an SVG <foreignObject>. It is one line, and it is a dead end: Chromium marks any canvas that touches such an image as tainted, so the frame renders on screen and then cannot be read back or exported — silently, with no error of its own. AlphaGrab repaints the DOM into real SVG shapes and text instead. It is more work and it buys two things: the frame can actually be exported, and an HTML lower third re-renders at any resolution instead of being enlarged.

Fill and key

Fill + Key writes two files: an opaque RGB fill and a greyscale key. That is what a switcher or a playout server wants over two paths. Premultiply output is for engines that composite over black — leave it off for PNG, After Effects and most switchers.

Filename tokens

{text} {name} {w} {h} {ext} {date} {time} {host} {n} {key}

{text} is the largest line of text on the graphic right now — the name on a lower third, the title on a card. It falls back to clip when there is nothing readable.

Shortcuts

EnterGrab the URL in the bar
1 – 5Result · Fill · Key · Fill|Key · Source
Ctrl/⌘ + SDownload the frame
Ctrl/⌘ + CCopy the frame as a PNG
Ctrl/⌘ + VPaste an image or a URL
OOpen a local file
GSafe-area guides
KEyedropper — pick the key colour off the frame
0 · +/−Fit · zoom
Tab · IHide the controls · hide the inspector

Running your own proxy

Anything routed through someone else's proxy is visible to whoever runs it. One file, no dependencies, on the machine you already trust:

// cors-proxy.mjs — node cors-proxy.mjs   (then use http://localhost:8787/{url})
import http from 'node:http';
http.createServer(async (req, res) => {
  const target = decodeURIComponent(req.url.slice(1));
  res.setHeader('access-control-allow-origin', '*');
  if (!/^https?:\/\//.test(target)) return res.end();
  const up = await fetch(target);
  res.setHeader('content-type', up.headers.get('content-type') || 'application/octet-stream');
  res.end(Buffer.from(await up.arrayBuffer()));
}).listen(8787);

Privacy

There is no account and no server. Files never leave the machine — decoding, keying and encoding all happen in this tab. The only request AlphaGrab makes is for the URL you type. Save this page to disk and it keeps working with no network at all.