Recently, I started a new job where one of the requirements was working with Electron.js — a framework I hadn’t touched before. Coming from a web development background (React, TypeScript, etc.), the idea of building desktop apps with web technologies felt both exciting and a bit daunting.
To speed up my learning and get comfortable with Electron’s ecosystem, I decided to build a side project: a floating, draggable webcam overlay for creators.
🎥Floating Webcam — A Lightweight Camera Overlay App
If you’ve ever recorded tutorials, walkthroughs, or gameplay, you know how tedious it can be to position and overlay your webcam footage during post-production. I wanted to eliminate that step entirely.
So I built Floating Webcam, a minimal desktop tool that lets you keep your webcam feed on top of other windows — no editing needed. Just launch the app, drag the camera feed where you want it, and start your screen recording software.
No overlays. No clutter. Just record.
🛠️ What It’s Built With
Electron.js – For creating a native-feeling cross-platform desktop app.
React – To structure the UI and manage component state.
TypeScript – For better DX and safer code.
TailwindCSS – For rapid and responsive styling.
Watch the demo on LinkedIn
Demo
You can view the full source code and try it yourself on GitHub:
GitHub
💡 Why I Built It
At work, I inherited an old Electron-based project that needed some serious improvements. Rather than dive straight into the legacy code, I figured the best way to understand how Electron works was to build something new and practical from the ground up.
Floating Webcam became the perfect sandbox — not too simple, not overly complex, and aligned with real-world use cases.
🔍 What I Learned About Electron
Before this project, my mental model was: "Electron just wraps a web app in a desktop shell."
But once I got into it, I quickly realized Electron has its own architecture and design considerations.
Here’s a breakdown of key concepts I picked up:
🧵 Main vs Renderer Process
Electron apps run two types of processes:
Main process – Manages the app’s lifecycle, windows, and system-level interactions.
Renderer process – Runs inside each window (like a browser tab) and handles the UI.
Understanding how they work together — and when to separate logic between them — was a foundational step.
🔐 Context Isolation + IPC
Because of security risks, Electron enforces context isolation between the main and renderer. So if you want to pass data (like media devices, window state, etc.), you need to use IPC (inter-process communication) via the contextBridge API.
I learned how to expose safe APIs from the main process to the renderer, which allowed React to control Electron-native behavior without direct access to Node.js.
🎥 Accessing Media Devices
Electron gives you access to the same Web APIs you’d use in the browser — like
navigator.mediaDevices.getUserMedia.
This meant I could handle webcam streams just as I would in a regular React app — but now within a persistent desktop environment.
👨💻 Final Thoughts
Electron can be intimidating at first, especially if you're coming from a web-only background. But once you get the hang of its architecture and build flow, it’s surprisingly powerful.
If you’ve ever wanted to turn a web app into a desktop app — or need native system access without learning a whole new language — Electron is absolutely worth exploring.
This project gave me the hands-on experience I needed to start contributing confidently to Electron-based projects at work.
Top comments (0)