How to Blur VS Code for the Web When Screen Sharing (vscode.dev & github.dev)
Doing a code walkthrough in the browser editor? Here's how to hide .env files, API keys, the terminal, and private repo names in vscode.dev and github.dev before you share your screen.
To hide secrets and code in VS Code for the Web while you screen-share, use a browser blur extension like BlurFirst to blur .env values, tokens, the terminal, and the Explorer before you present. This applies to the browser-based editor — vscode.dev and github.dev — where the entire IDE runs inside a Chrome tab. The blur is painted in as real pixels, so it survives Zoom, Microsoft Teams, Google Meet, Loom, OBS, and screenshots.
Which VS Code this covers (browser only)
BlurFirst covers vscode.dev and github.dev because those run entirely inside a browser tab — the editor, the integrated terminal, and the Explorer are all web content. The VS Code desktop app is native software outside the browser, so no browser extension can blur it; to protect a desktop session, share a single window, close sensitive files, and use your OS notification controls. If you're presenting from the web editor, the gestures below apply directly.
What's risky to show in vscode.dev / github.dev
- .env files and secrets in open editors — the moment a tab holding
DATABASE_URLorSTRIPE_SECRET_KEYgets focus, the value is on screen. - API keys and tokens in code — hard-coded credentials, bearer tokens, and connection strings in source files and example snippets.
- The integrated terminal — command output that echoes environment variables, deploy logs, or a printed token.
- Private repo and file names in the Explorer — the file tree and the editor tab strip name private repositories, internal modules, and client projects.
- Source-control diffs — the Source Control view shows added and removed lines, which can surface a secret you're about to commit.
- Search results — a project-wide search for
keyortokenlists matching lines across every file in one panel.
How to blur VS Code for the Web
Secrets in a code editor are almost always pattern-shaped — keys, tokens, connection strings — which is exactly what automatic detection is good at. Lead with a Scan, then hide the structural panels by hand.
- 1
Arrange your editor before the call
Open the files and panels you'll show, and get the terminal and Explorer into position, so nothing new appears mid-share. Start BlurFirst with Ctrl/⌘ ⇧ Y.
- 2
Scan for keys first
Run Scan (a Pro gesture). It's strong at exactly this: it finds and blurs API-key and token patterns, emails, credit-card numbers, and SSNs locally, so a hard-coded key in an open file or a printed token in the terminal is frosted in one click. It matches patterns, not free-text, so a project name won't be caught.
- 3
Box- or element-blur the Explorer
Hide the file tree and the editor tab strip so private repo, module, and client names don't leak.
- 4
Box-blur the terminal and diffs
Drag a rectangle over the integrated terminal and over the Source Control diff. The box stays anchored as output scrolls or you page through a long diff.
- 5
Keep the panic shortcut ready
If you open a
.envby reflex or a search surfaces a secret, press Ctrl/⌘ ⇧ H to blur the whole editor instantly, then reveal what's safe.
Blur the demo, still rotate the key
Blurring stops a key from being seen on the call or in a recording, but if a secret was ever committed to a repo or run in a real terminal, treat it as compromised and rotate it. The in-page blur protects your live walkthrough; it isn't a substitute for secret hygiene like environment variables, a secrets manager, and pre-commit scanning.