Void: Secure Screen Blur

Inspiration

I have felt that specific moment of panic: you are sharing your screen during a standup or a live stream, and you accidentally open a .env file. Suddenly, your API keys and database credentials are broadcast to the world.

As a developer who believes in "building in public," I realized that current privacy tools were clunky. They either blurred everything (making code unreadable) or required tedious manual configuration. I wanted a "zero-trust" presentation mode, a tool that protects secrets by default without slowing down my workflow.

What it does

Void is a high-performance privacy layer for VS Code. It automatically detects and obscures sensitive data in configuration files (.env, .json, .yaml) while keeping the rest of your code visible.

• Smart Auto-Blur: Instantly identifies and blurs values in KEY=VALUE pairs using Regex decorators.
• The Secure Vault: A unique architecture that allows you to copy a blurred secret to your clipboard without ever revealing it on screen.
• Zero-Leak Startup: Activates before the editor UI fully renders to prevent "flash" leaks.
• Stealth Mode: A minimalist, distraction-free UI designed for streamers and professional presenters.

How I built it

I built Void entirely on my own using TypeScript and the VS Code Extension API. Since this was my first time ever creating a VS Code extension, I spent the first few hours deep in documentation and research to understand the engine.

• Core Engine: I utilized the TextEditorDecorationType API to apply CSS-based blurring filters directly to specific text ranges.
• The Vault Pattern: Instead of storing secrets in standard variables, I architected a "Vault" system. When a document opens, secrets are indexed in a secure memory store.
• Interaction: I overrode the standard "Hover" provider. When a user hovers over a blurred key, instead of showing the text, I display a secure "Copy" button. This triggers a command to fetch the value from the Vault and inject it directly into the clipboard.

Challenges I ran into

The Steep Learning Curve: Being my first extension, I had to learn the VS Code API from scratch during the hackathon. Figuring out how to manipulate text decorations without corrupting the actual file buffer took significant research and trial-and-error.

The "Usability vs. Security" Paradox: I needed users to be able to use their keys (copy-paste them) without seeing them. Standard VS Code behavior is to reveal text on selection. I had to engineer a way to intercept the copy command to redirect to my secure Vault rather than the visual selection—a complex hurdle I solved through persistent debugging.

Accomplishments that I'm proud of

• Solo Development: I went from zero knowledge of extension development to a fully functioning, published tool in just one weekend.
• Marketplace Launch: I didn't just build a demo; I shipped a production-ready extension that is live on the VS Code Marketplace right now.
• The Vault Architecture: Successfully implementing a secure way to copy data without rendering it to the DOM.

What I learned

Building this alone taught me the importance of defensive coding. When building security tools, you cannot rely on "obscurity." I learned the deep internals of the VS Code rendering engine and how to publish and license open-source software for the global developer community.

What's next for Void: Secure Screen Blur

• AI-Powered Detection (Gemini API): Moving beyond Regex, I plan to integrate the Google Gemini API to contextually understand what a "secret" looks like in non-standard files (like comments or hardcoded strings in Python/JS files).
• Cross-IDE Support: Porting the core logic to IntelliJ and generic web-based editors.
• Stream Deck Integration: Adding a physical "Panic Button" integration to toggle the blur instantly from hardware devices.

Built With

• node.js
• typescript
• vscodeapi