Building a Screen Marker: Why I Chose Native over Electron
Building a Screen Marker: Why I Chose Native over Electron
Hi everyone, it’s me again from CatalystPack Studio.
In the previous post, I shared the story of why Spotmark was created. Today, I want to dive a bit deeper into a technical dilemma that anyone building a Desktop App today has to face: Should you choose Native or Electron?
When starting the Spotmark project (a tool that helps you draw, highlight, and spotlight directly on your Desktop), choosing the tech stack was one of the toughest decisions. I don’t want to write a post “bashing” Electron, because it is a fantastic technology in its own right. Instead, I want to share a practical perspective on the strengths and weaknesses of both, and why Native is the best fit for a tool like Spotmark.
The appeal of Electron
It’s no coincidence that Electron has dominated the Desktop App world over the past decade. The software we open every day like VS Code, Slack, Figma, or Discord are all built on it.
When starting the first Proof of Concept (PoC) for Spotmark, I immediately thought of Electron because of its undeniable advantages:
- Write Once, Run Everywhere: Extremely attractive for a small team (or Indie Hacker). You code the UI using HTML/CSS/JS once and package it for Windows, macOS, and Linux.
- Development Speed: The massive NPM ecosystem alongside UI frameworks (React/Vue) helps you spin up a polished interface in days rather than weeks.
- Perfect for Standard Apps: If you’re building a chat application, a task management software, or a note-taking tool, Electron provides a great experience with the lowest development cost.
For a tool like Spotmark, building the Settings UI or License Management using Electron is “fast as the wind”. But the core issue lies in the most important feature: Screen Overlay.
The specific challenge of a Screen Marker
Spotmark is not a standard application window. To allow you to circle a paragraph on Chrome, or draw an arrow pointing to a line of code in an IDE, Spotmark must create an invisible transparent window the size of your entire computer screen and keep it floating on top (always on top).
This is when the weaknesses of Electron for a Niche Task are exposed.
1. Memory Footprint
To create that transparent overlay using Electron, the OS has to maintain a massive background Chromium process. When you’re presenting, your computer is already handling a heavy Excel file, an IDE building code, plus Zoom/Teams streaming video. A “standby” tool like Spotmark (which mostly sits idle in the System Tray and is only called up for 30 seconds) eating an extra 200MB - 300MB of RAM will start causing system lag.
2. Drawing Latency
When you use a stylus or a mouse to draw a curve on the screen, your brain expects the stroke to appear instantly under the cursor.
In an Electron environment, mouse input goes through several layers:
OS -> Node.js/Electron wrapper -> Chromium Engine -> DOM / Canvas -> Screen Render
Although this process takes only a few milliseconds, for real-time graphics operations, this small latency makes the ink feel like it’s “lagging” behind the mouse. Everything feels a bit stiffer than reality.
The difficult but rewarding choice: Native (C++/Qt)
After careful consideration, our team decided to pivot to Native (C++/Qt).
Developing with Native requires much more effort in setup and configuration. You trade the built-in cross-platform convenience for absolute performance. Handling system APIs (Win32 on Windows, Cocoa on macOS, Wayland/X11 on Linux) also requires a much more careful testing and debugging process.
But in return, the reward for the user experience is massive:
- Direct hardware communication: The pipeline is minimized (
OS -> Graphics API -> Screen). The distance from mouse movement to ink appearance is almost zero. Smooth strokes flow at 60FPS+ (I call it Liquid Drawing). - Zero-footprint: By using C++, Spotmark consumes extremely little RAM and CPU. Its existence is completely “invisible” to your computer until you call it up via a hotkey.
- Deep OS integration: Features like Global Hotkeys or Multi-monitor DPI handling work incredibly smoothly and accurately.
Conclusion
Electron is an excellent technology and I will continue to use it for many other projects. But for a tool that requires instant response and continuous background operation like Spotmark, Native is the only path to a perfect experience.
The trade-off in development time is slowly bearing fruit with the v0.4.5 Beta release for Windows. Our engineers are still working hard to solve the “tough problems” on ARM architecture (macOS) and Wayland (Linux) to release them to the community soon.
If you are using Windows and want to experience an ultra-lightweight screen marker, please give it a try:
Download Spotmark v0.4.5 Beta (For Windows) →
See you in future posts, where I’ll get a chance to share how the team solved the problem of safely saving mp4 video files even if the computer crashes!
Build with Native pride. ⚡