Screen capture

Starting a capture

Capture uses the browser's getDisplayMedia(). The browser always asks what to share, and only a person can start a capture: an agent cannot start one from io.eval.js, because getDisplayMedia() needs a user gesture. Where the browser has no getDisplayMedia(), the Capture section of the Code menu and its commands are absent.

Open the command palette with F1, or use the Capture section of the Code menu (the logo button at the far left; its tooltip reads File). The commands, and when each one is available:

Command	Keys	Available when
`🔴 🖥️ Capture: Window…`	-	Not capturing
`🔴 🖥️ Capture (output)`	`Ctrl`+`Alt`+`Shift`+`C` / `⌘`+`⌥`+`⇧`+`C`	Not capturing
`🔴 🪟 Capture: Picture-in-Picture`	-	Capturing, in a browser with picture-in-picture
`🔴 🪟 Capture: Exit Picture-in-Picture`	-	Capturing, in a browser with picture-in-picture
`🔴 ⏹️ Capture: Stop`	-	Capturing
`🔴 🖼️ Image…`	-	Capturing
`🔴 🎞️ ▶️ Video: Start`	-	Capturing, and not recording
`🔴 🎞️ ⏸️ Video: Pause`	-	Recording
`🔴 🎞️ ▶️ Video: Resume`	-	Recording is paused
`🔴 🎞️ ⬇️ Video: Save`	-	Recording
`💾 Save: 📸.png`	`Alt`+`Shift`+`I` / `⌥`+`⇧`+`I` (editor focus)	Sharing a folder and capturing

Every command is also in the Commands reference.

The Capture: Window… dialog

Capture: Window… opens a dialog with the radio choices Window, Playground, Input and Output, and a PiP checkbox where the browser supports picture-in-picture. The OK button is Capture. The playground remembers your last choice and the PiP checkbox. When nothing is stored yet, the default is Output. Hovering Input or Output outlines that panel.

The dialog appears only where the browser has Region Capture (CropTarget). Without it, Capture: Window… goes straight to the browser's own picker and captures a window.

Capture (output)

Capture (output) starts an Output capture directly, with no chooser and no picture-in-picture. While another kind of capture runs, the shortcut is inactive, and other routes to an Output capture warn Capture is already active. Stop it before switching to Output capture. Without screen capture support they warn Screen capture is not available in this browser.

Note: While the output has focus, it forwards Ctrl, Alt and ⌘ key combinations to the playground, except combinations with A, C, X, V, Z, Y, Tab and the arrow keys. (Ctrl+Alt+arrow keys reach the playground through another listener.) So the shortcut above may not reach the playground until focus is outside the output, for example in the editor.

What happens when a capture starts

A toast reads Capture: choose what to share… for up to 60 seconds, while the browser asks. It then reads Capture started., or shows the browser's error message, for example when you cancel the browser's dialog. After a capture starts, the playground also:

refreshes the Pins interface;
recaptures every pin image (Output capture only);
opens picture-in-picture, if you asked for it;
saves 📸.png to the work folder, when a folder is shared;
primes pointer lock once, so that Pins can hold the pointer while you pick Experimental.

Note: Priming pointer lock is experimental and may change.

What you can capture

A capture records one of four things. Every capture is video only; audio is off.

Kind	Records	How
Window	Any window or screen that you pick in the browser's dialog.	No element is involved.
Playground	The whole playground page.	Region Capture.
Input	The input panel only.	Element Capture.
Output	The output panel only: its viewport, or the visible output frame.	Element Capture. This is the default choice.

For Input and Output, the browser's dialog offers the current tab: choose it. These captures record only that panel's own pixels, so overlays that the playground draws over it, such as the Pins panel, pin marks, hover boxes and toasts, should not appear in the image.

While an Input or Output capture runs, a layout swap or an orientation change moves it to the panel's new element. For an Output capture, the images of pins that refresh automatically are then refreshed too.

Note: Pin images and the Pins capture options need an Output capture. A capture of any other kind does not give pins their images.

The Capture section shows Window while no capture runs. While a capture runs, it shows these items instead:

PiP (PiP Exit while active): Only in a browser with picture-in-picture.
Image: Takes a screenshot; see Taking a screenshot.
Video: Starts recording. It shows only while not recording.
Save: Stops recording and downloads the video. It shows only while recording.
Pause and Resume: Pause shows while recording and not paused. Resume shows while paused.
Stop: Ends the capture.

PiP, Image, Video, Save, Pause and Resume keep the menu open after a click. Window and Stop close it. Hover the Capture heading for a live preview of the capture stream. The record icon pulses while a capture runs.

Taking a screenshot

Image… takes one frame of the active capture, at the stream's own resolution, as a PNG named 📸.png. A plain click downloads it. The modifier keys change what happens, and you can combine them:

Modifier	Effect
`Shift`	Saves the image to the work folder as `📸.png`. Only while a folder is shared: the tooltip row Save to Folder appears only then.
`Ctrl`	Copies the image to the clipboard as `image/png`. A toast, Image with a check or a cross, reports the result.
`Alt`	No download.

So Ctrl+Alt copies a still to the clipboard without downloading it, and Shift+Alt saves it to the folder without downloading it. Run from the command palette, Image… opens the Code menu with the Image item focused.

💾 Save: 📸.png (Alt+Shift+I / ⌥+⇧+I in the editor) refreshes the screenshot in the folder. It needs a shared folder and a running capture.

Recording video

Video: Start records the capture stream with MediaRecorder, as video/mp4 when the browser supports it and as video/webm otherwise. Video: Pause and Video: Resume control the recorder. Video: Save stops the recording and downloads it as 📸.mp4.

While recording, a Video badge on the toolbar shows a pulsing red record icon, or a pause icon while the recording is paused. Videos are never written to the shared folder, even though 📸.mp4 is a reserved name there. Stopping the capture ends a recording that you did not save first.

Picture-in-picture

Picture-in-Picture puts the capture preview into a floating picture-in-picture window, so you can keep an eye on a capture while you work in another window. It needs HTMLVideoElement.requestPictureInPicture and document.pictureInPictureEnabled. Tick PiP in the Capture: Window… dialog to open it when the capture starts, or use the commands above later. On Safari the preview is first docked invisibly, 160 px wide.

The possible errors are Screen capture is not active., Picture-in-Picture is not supported in this browser. and Another Picture-in-Picture element is active.

Stopping a capture

Stop, or the browser's own Stop sharing button, ends the capture. It also:

stops any recording. Use Video: Save first if you want to keep it;
exits picture-in-picture and clears the preview;
deletes all pin images (📍.<N>.png) when a folder is shared, and refreshes the Pins interface.

Screenshots for agents

With a folder shared through Agent 📂 Share™, a running capture lets the agent see the result: the playground writes the current frame to 📸.png, and the agent reads the image with its own image understanding.

The 📸.png file

📸.png sits at the root of the work folder. It is written only while a folder is shared and a capture runs, and it holds the current frame of whichever capture is active: Window, Playground, Input or Output. The file is a PNG of the whole captured frame at the capture's native pixel size, so it shows the region being captured, which is not always the output.

A share that starts without a capture first deletes a stale 📸.png. If a capture was already running, a fresh one is written.
A capture that starts during a share writes 📸.png at once.
When the capture stops, the file stays on disk but stops updating. It also stays after Unshare.
Overwriting 📸.png does nothing. Deleting it asks for a new one.

The deployment screenshot that RTEdge.net keeps for each deploy is a separate feature; see Social previews.

When 📸.png refreshes

While a share and a capture are both active, these events refresh 📸.png:

an input change that reaches the output: typing in the editor, or an agent's edit to 📄.html, an exported file or ⚙️.js, after the output update succeeds;
each successful io.eval.js or o.eval.js run (failed runs do not refresh it);
deleting 📸.png;
scrolling the output (after a 200 ms debounce);
F5, which forces a full refresh of the output from the input;
💾 Save: 📄.html (Alt+B / ⌥+B) and 💾 Save: 📸.png;
Image… with Shift.

Each refresh waits first, so the picture shows a settled page. It debounces for 100 ms, then waits for the output document to be complete (up to 5 seconds), for fonts (up to 1.5 seconds) and for pending images (up to 1.5 seconds), and for the layout to stay the same across animation frames. For an Output capture it also waits for a fresh frame and for any pin image work to end. A newer request supersedes an older one, and a failed grab leaves the previous file in place.

Starting a capture together with a share

Ctrl+click on Code menu ▸ Agent ▸ Share shares and opens the capture chooser. Its cancel button reads Skip, which continues the share without a screenshot.
✨ Agent: 📂 Share + 🔴 Output… (Ctrl+Alt+A / ⌘+⌥+A) shares with a direct Output capture.
✨ Agent: 📍 Pins + 🔴 Output… (Ctrl+Alt+P / ⌘+⌥+P) shares with an Output capture if needed and starts picking pins.

Unshare stops a capture only when that share started it. See Share with a screenshot.

Availability

Feature	Playground	RTEdge.net	Notes
Capture menu and commands	Yes	No	Needs `navigator.mediaDevices.getDisplayMedia`.
Target chooser	Partly	No	Needs Region Capture (`CropTarget`). Without it, the command captures a window directly.
Picture-in-picture	Partly	No	Needs `HTMLVideoElement.requestPictureInPicture` and `document.pictureInPictureEnabled`.
`📸.png` in a folder	Yes	No	Needs Agent Folder Share: Chrome or Edge on a desktop.

See Browser support for the browsers that run the playground.