DEV Community

Cover image for How I blur sensitive UI before recording a SaaS demo (a simple Chrome workflow)
gong junhao
gong junhao

Posted on

How I blur sensitive UI before recording a SaaS demo (a simple Chrome workflow)

I nearly shipped a product demo recording that had a customer’s email address sitting in the UI.

Not because I’m reckless. Because I was rushing, I had 10 tabs open, and “I’ll blur it later” felt easier than doing it right.

Here’s the simple Chrome workflow I use now when I’m recording SaaS demos (Loom, Meet, OBS, whatever). It’s designed to prevent the common leaks: names, emails, IDs, internal URLs, and random notifications.

Step 1: Make the demo screen boring

  • Use a dedicated Chrome profile for demos.
  • Keep the bookmarks bar clean.
  • Keep only the extensions you need.
  • Pin only the tabs you will actually show.

If you share your full desktop, you’re one notification away from an awkward moment. I prefer sharing a single window when possible.

Step 2: Kill notifications everywhere

  • OS Focus / Do Not Disturb.
  • Slack/Teams/Discord DND.
  • Browser extension popups.

This is the fastest “risk reduction per minute” step.

Step 3: Blur sensitive regions before you hit record

Some sensitive info can’t be removed without breaking the flow (think: account dropdowns, invoices, user tables, admin pages).

So I blur it before recording. Not in post.

Step 4: Do a 5-second dry run

Record 5 seconds, click through the first two screens, stop, rewatch.

This catches the stuff you don’t notice while presenting: tab titles, autocomplete suggestions, recent files dialogs, and tiny popups.

A small tool that helped me

I built a Chrome extension called BlurMate to make the “blur first” step less error-prone. It lets you place blur overlays on top of the page (no upload required).

Product site: https://blurmate.devstorex.top

Top comments (0)