Unless you turn on Screenshots only, AtriumKit saves every page you record twice: as a screenshot, and as a copy of the page’s HTML and styles exactly as they looked at that moment. Screens with an HTML copy play as real web pages in the editor and in your published demo. The screenshot stays as the fallback, the thumbnail and the preview image.
HTML capture is on every plan, including Free.
Why it helps
- Edit text in place. Click any text on the page and retype it, in the page’s own fonts. Fix a typo, rename a customer, change a number.
- Find & replace across the demo. Change a word on every HTML screen at once, such as an old product name.
- Hide and swap. Hide cookie banners, chat bubbles and promos (their space is kept, so steps and hotspots stay in place), and replace images, logos and avatars.
- Blur by element. Click an element to blur it on the page and on its screenshot.
- Sharp at any size. Text and icons are drawn by the viewer’s browser, so they stay sharp when the camera zooms in or the demo plays on a large screen.
- Personalize inside the screen. Text edits can hold variables like
{{company|your team}}, so the captured page itself shows the viewer’s company. Personalization is on Pro and Team.
How to tell if a screen has HTML
Select a step or a screen in the editor. If the tools above the canvas include Hide and Image, the screen has an HTML copy.
Screens without one keep the screenshot tools: Blur, Crop and Edit text, which paints your new text over the picture in a matching font.
Turn it off with Screenshots only
In the extension’s window, turn on Screenshots only before you record. Pages are then captured as images. The setting is remembered for later recordings.
Use it if HTML screens from a particular page look different from the screenshot and you’d rather show the picture. You can switch it back on for the next recording.
What’s in the copy
Kept:
- the page’s markup and styles, including shadow DOM, frames from your own site and styles added from script (CSS-in-JS),
- the images it shows and the fonts it loaded,
- the state of the page at that moment: form values, open menus and dialogs, focus, scroll positions, and hover styles (a menu held open by the pointer stays open).
Left out:
- Every script. The copy is a still picture of the page made of HTML. Nothing in it runs and its links go nowhere. Viewers move through the demo with the steps and hotspots you set.
- Secrets. Passwords (shown masked), hidden fields, and card-number and one-time-code values.
- Anything blurred while recording. Auto-blurred text and text under a Blur area become placeholder text, and their images are dropped, before the copy leaves your browser.
Security
Captured pages come from your app, but AtriumKit treats them as untrusted:
- the copy is cleaned again when it’s uploaded, removing scripts, event handlers and references to outside addresses,
- it’s served from a separate, cookieless address with a strict content security policy,
- the editor and player show it in a sandboxed frame, cut off from the page around it.
A captured page never runs any of its own code, never contacts your app or anyone else, and can’t read cookies.
Limits
- Size. A page whose HTML is larger than 12 MB, or whose images and fonts add up to more than 40 MB, is saved as a screenshot only. A single image or font over 8 MB is left out.
- Embedded content. Frames from other sites (a video player, a payment form) and canvases appear as pictures cropped from the screenshot.
- Fonts. Fonts your app adds from script, and fonts installed only on your computer, show in the viewer’s fonts instead.
- Shadow DOM. Closed shadow roots are captured only on custom elements.
- Lots of personal data. A page with more auto-blur matches than the copy can redact (around 5,000) is saved as a screenshot only.
- Translations. AI translations cover your tooltips, cards and buttons, not the text inside captured screens.