The Problem

Screen sharing and presentations lack a lightweight way to annotate over live content without switching applications. DrawPen solves this by overlaying a transparent whiteboard on top of the screen, letting users draw, highlight, or point at anything visible—without leaving the presentation or recording session.

What This Does

DrawPen is an Electron-based screen annotation tool for macOS, Windows, and Linux. It provides a pen, highlighter, laser pointer, shape tools, text input, and an eraser, all controlled via global keyboard shortcuts. The app runs as a tray application and can show/hide the whiteboard overlay on demand.

The core logic lives in src/renderer/app_page/components/Application.js (1334 lines, 53 functions) and src/main/index.js (60 functions). The main process handles window management, tray actions, and global shortcuts, while the renderer process handles drawing, figure detection, and the toolbar UI.

How It Is Wired

Execution starts in src/main/index.js. The main process creates the tray icon, registers global shortcuts (via registerTrayActions), and manages window creation (createMainWindow, createExtendedToolbarWindow, createSettingsWindow). The renderer communicates via preload scripts in src/renderer/app_page/preload.js.

The drawing pipeline flows through Application.js → DrawDesk.js → drawer/figures.js. figures.js handles primitive rendering (drawDot, createGradient), while figureDetection.js (33 functions) handles hit-testing for shape selection. The ToolBar.js component manages the UI and calls back into Application.js via handleChangeTool.

The most critical functions by call count are rawLog (15 call sites), findActiveFigure (10), and withThrottle (8). Application.js is the hub—it imports 11 modules and is the single point where most UI state changes converge. constants.js is the most-imported module (11 importers) with zero dependencies, making it a stable leaf.

The app has no circular dependencies, which keeps the module graph acyclic. The main risk is Application.js and src/main/index.js being oversized—any change there ripples across the entire application.

How To Use It

Setup (from package.json and package-lock.json):

git clone https://github.com/moses-y/DrawPen
cd DrawPen
npm install

Running:

npm start

Configuration: No environment variables are required. Settings are managed through the in-app settings page (src/renderer/settings_page/), which persists user preferences for shortcuts, colors, and toolbar position. The src/main/index.js file handles tray icon and global shortcut registration—there is no external config file.

Real-World Use

A consultant presenting a code review to a distributed team can invoke DrawPen via the global shortcut (CMD/CTRL + SHIFT + A), draw a red rectangle around a problematic code block in the shared screen, then switch to the laser pointer to walk through the fix. The annotation stays on top of the IDE, and clearing the desk (CMD/CTRL + K) resets for the next topic.

Code Health & Issues

Static analysis (not opinion) found the following:

  • High - Oversized files - src/renderer/app_page/components/Application.js (1334 lines) and src/main/index.js (60 functions). High cognitive load; changes ripple widely.
  • High - Deep nesting - src/renderer/settings_page/components/Settings.js has max indentation depth 8; control flow is hard to follow.
  • Medium - Empty catch block - src/main/index.js has a catch {} that silently discards errors.
  • High - No test suite - 30 source files, zero test files. Regressions reach production undetected.
  • High - Pinned dependency with published advisory - electron@40.4.0 has CVE-2026-34774 and 33+ other advisories. Upgrade to the fixed version.
  • Medium - CI issues - .github/workflows/make.yml lacks least-privilege token permissions, uses npm install instead of npm ci, has no dependency scan, and no job timeouts.
  • Medium - Large binaries in git - assets/static/pointer-mode.gif (29.5MB) and main.gif (28.9MB) bloat every clone.
  • Medium - Generated build output committed - 7 generated files in assets/.
  • Medium - No Dependabot/Renovate configured.
  • Medium - persist-credentials: false not set on checkout in CI.

The Bottom Line

DrawPen is a functional, well-structured Electron app with a clean module graph—no circular dependencies and a sensible separation between main and renderer processes. The lack of tests and the oversized core files are the main technical debts. The pinned Electron version with known advisories should be addressed before production use. It is a solid choice for anyone needing a free, cross-platform screen annotation tool, but it is not ready for security-sensitive environments without the dependency upgrade.