When part of a recording replays blank
A Rendemo demo replays the recorded DOM, so canvas charts, video players and cross-origin embeds come back as empty boxes. What causes it, what Rendemo tells you, and how to record around it.
Why an area is blank
A Rendemo demo is not a screen recording. It replays the actual DOM of the page you captured, which is what lets a viewer click real controls, read real text and have the layout reflow at their own screen size.
The trade-off is that anything whose appearance is not described by the DOM cannot come back. The element is still there — same size, same position — but there is nothing inside it, so it renders as an empty box.
| What you recorded | Why it cannot replay |
|---|---|
<canvas> charts and maps | The picture lives in pixels the browser drew, not in markup. Most charting libraries (Chart.js, most of D3, Highcharts in canvas mode) draw this way. |
<video> players | The frames are a media stream, and the recording holds none of it. |
| Cross-origin embeds | A Stripe, YouTube or Intercom iframe belongs to another origin, so its contents were never readable to the recorder. |
Images held as blob: URLs | A blob URL only exists inside the tab that made it — usually a just-uploaded file. Nothing can fetch it later, so it replays as a broken image. |
What Rendemo tells you
You do not have to spot this yourself. The replay scans each frame as it loads and reports what it could not reproduce, so the Studio shows a notice on the stage naming the specific cause — canvas/graphics, video, embedded content or images held as temporary blob URLs.
The notice is the same in the Video studio, where it also offers Show raw recording: a video export can use the original screen capture, which has no such limitation.
A blank box is not a failed capture
The rest of the recording is intact and the demo will publish normally. Only the areas named in the notice are affected.Recording around it
- Prefer an SVG chart. Most charting libraries can render SVG instead of canvas (Recharts, Victory, and D3 in its default mode). SVG is markup, so it replays exactly.
- Frame the step around what does replay. If the chart is context rather than the point of the step, zoom the step onto the table, filter or summary beside it.
- Screenshot the chart into the card. A step card can carry an image. A still of the chart in the card beside live product UI reads better than an empty box in the middle of the page.
- Re-upload from a URL rather than a file. For the
blob:case, an image served over http(s) replays; one picked from the file system in that session does not.
When to ship a video instead
If the thing you are demonstrating is the chart, the map or the video player, the interactive demo is the wrong artifact for that workflow. The same recording exports as a product video from the Video studio, and a video reproduces everything on screen because it is pixels all the way down.
You can ship both from one capture — see Put a demo on a page for the interactive route.