DEV Community: Somaraj

Building a cross-platform "quick capture" app for Notion with Electron, Vue 3 and TypeScript

Somaraj — Sun, 01 Nov 2026 02:43:50 +0000

I write a lot in Notion, but getting a thought into Notion was always slower than the thought itself. Switch apps, find the page, wait for it to load, and the idea is gone.

So I built Notion Quick Capture: a tray app for Windows, macOS and Linux. Press Ctrl+Shift+N anywhere, type, press Ctrl+Enter, and the note lands in a Notion page or database.

This post covers the parts that turned out to be more interesting than I expected.

The architecture in one picture

src/
├── main/        Electron main process
│   ├── auth/    Token storage (safeStorage)
│   ├── notion/  API client + rate limiting, schema cache, search, capture
│   ├── drafts/  Offline queue (sql.js) and background sync
│   ├── ipc/     IPC handlers (Zod-validated)
│   ├── hotkey/  Global shortcut
│   └── tray/    Tray icon and menu
├── preload/     contextBridge API exposed to the renderer
├── renderer/    Vue 3 UI
└── shared/      Types and the Markdown → Notion converter

The renderer never touches the network or the file system. It asks the main process for everything through a small, typed contextBridge API.

1. Markdown in, native Notion blocks out

Notion's API doesn't accept Markdown. It wants a tree of block objects (heading_2, bulleted_list_item, to_do, code, table…) with rich-text arrays for inline formatting.

The editor is Milkdown, so you get live formatting while you type (# becomes a heading, [] becomes a to-do, / opens a block menu). On save, the Markdown goes through markdown-it. I walk its token stream and build Notion blocks: nested lists become children, bold/italic/strikethrough/code/links become rich-text annotations, and tables become table + table_row blocks.

The converter lives in src/shared/ and is pure TypeScript with no Electron dependency, which makes it easy to unit test with Vitest.

2. Database-aware forms

If your destination is a database, the app fetches its schema and renders a field for each property: select, multi-select, status, date, people, relation, checkbox, number, URL, email, phone, files. Schemas are cached, so the panel opens instantly the next time.

3. Offline first, with no native modules

Captures go into a local queue before they're sent. If you're offline, or Notion returns a 5xx or rate-limit error, the note stays queued and a background sync retries later. Captures that can never succeed (say the destination was deleted) are surfaced in the tray menu so you can discard them.

For storage I used sql.js, SQLite compiled to WebAssembly. That means no better-sqlite3, no node-gyp, and no "please install Visual Studio Build Tools" for contributors. npm install && npm run dev works the same on all three OSes.

4. Security: a small app still holds a powerful token

A Notion integration token can read and write whatever you've shared with it, so I treated it accordingly:

The token is encrypted with Electron's safeStorage: DPAPI on Windows, Keychain on macOS, libsecret on Linux. It's never logged.
Renderer windows are sandboxed, use context isolation, have a strict CSP, and have no Node.js access.
Every IPC message is validated with Zod in the main process. The renderer is treated as untrusted input.
The only hosts the app talks to are api.notion.com and GitHub Releases (for updates). No telemetry.

5. Why there's no "Sign in with Notion" button

OAuth would be friendlier than asking users to create an internal integration. But Notion's OAuth flow needs a client secret, and anything shipped inside a desktop binary that anyone can download isn't secret. Rather than pretend otherwise, public builds use integration tokens, and I wrote a step-by-step guide with screenshots. OAuth is still in the code for anyone running a private build with their own public integration.

6. Cross-platform CI, and two bugs that only happened on Linux and macOS

GitHub Actions runs lint, typecheck, unit tests and UI smoke tests on Windows, macOS and Linux for every push, and builds installers for all three. The smoke tests launch the real Electron app against a stubbed Notion API, so no token is needed.

Windows was green from the start. Linux and macOS weren't, and the causes were worth writing down:

ELECTRON_RUN_AS_NODE was set in the test environment. When it is, Electron starts as plain Node.js, require('electron') doesn't give you the app API, and you get a confusing Cannot read properties of undefined (reading 'on'). Explicitly unsetting it for the test run fixed it.
Offscreen windows get throttled. The tests render offscreen, and Chromium throttles background windows, so CSS transitions and timers stalled until the tests timed out. Setting webPreferences.backgroundThrottling: false on the test windows fixed it.

What's next

Code signing for Windows and macOS (current builds trigger SmartScreen/Gatekeeper warnings)
More capture sources, such as sending the current clipboard or selected text

The project is MIT licensed and contributions are welcome:
👉 Website: https://notioncapture.somaraj.com
👉 Source: https://github.com/somaraj/notion-quick-capture

If you try it, I'd love to hear what breaks and what's missing.

Not affiliated with or endorsed by Notion Labs, Inc.

Building a TickTick extension for Visual Studio: five API surprises

Somaraj — Tue, 29 Sep 2026 18:05:38 +0000

I just shipped a preview of TickTick for Visual Studio, an unofficial extension that puts your TickTick tasks in a Visual Studio tool window. You can add tasks with TickTick's quick-add syntax, turn selected code into a task, and complete, snooze and edit tasks without leaving the IDE.

It started as a fork of a Todoist extension I'd already built: I kept the UI and replaced the API layer. I expected the new API layer to be the easy part. Here are the five things that surprised me.

1. The API doesn't parse quick-add syntax

In the TickTick apps you can type Review PR #code ^Work !high tomorrow and get a tagged, prioritised, scheduled task. I assumed the API would do the same. It doesn't. Given that title, the API:

adds the tag code, but leaves #code in the title
ignores ^Work, !high and tomorrow entirely

So the extension parses the text itself, then sends a clean title plus real fields. Two details mattered:

Project names contain emoji. TickTick's default projects are named like "💼Work", so ^work is matched on letters and digits only.
A trailing number is not a time. "Read chapter 5" must stay "Read chapter 5", not become a task due today at 5:00. "Meeting at 3" does become 3:00.

2. The Inbox isn't a project, until it is

GET /project doesn't include the Inbox. Tasks in it have a project id like inbox123456789 (your user id). There's also an inbox alias that works on some endpoints. The extension shows a synthetic "Inbox" entry and normalises those ids, but keeps each task's real project id, because endpoints such as complete and comments need it.

3. `GET /tag` doesn't return all your tags

It only lists tags you created explicitly. A tag that exists only because a task uses it doesn't appear. Tag suggestions therefore merge /tag with every tag seen on loaded tasks.

4. All-day dates are midnight UTC... in someone's time zone

An all-day task on 2 October, created in India, comes back as 2026-10-01T18:30:00.000+0000: local midnight, converted to UTC. Read it naively in UTC and you get the wrong day.

The obvious fix is to convert with the task's timeZone field (e.g. Asia/Calcutta). But a Visual Studio extension runs on .NET Framework, which can't resolve IANA zone names on Windows. So the extension:

reads the date in the machine's own zone, and uses it if the result is exactly midnight;
otherwise rounds the UTC time to the nearest midnight, which is correct for any zone within ±12 hours of UTC.

I tested it with the machine set to India, Shanghai, Pacific, Tokyo, UTC, New Zealand and Hawaii.

5. The Marketplace, `System.Text.Json` and Visual Studio 2022

My first upload was rejected: an installation-target lower bound of 18.0 (Visual Studio 2026) counts as an experimental API version, and the Marketplace asked for 17.14. That admits Visual Studio 2022, which raised a hidden problem.

VSIX packages don't carry System.Text.Json, because Visual Studio supplies it. Visual Studio 2026 supplies 10.0, but Visual Studio 2022 17.14 supplies 9.0, and my SDK referenced 10.0. On Visual Studio 2022 the extension would have failed to load. Pinning System.Text.Json to 9.0.x fixed it: Visual Studio 2022 is satisfied, and Visual Studio 2026 redirects any version up to 10.0 to its own copy.

If you ship Visual Studio extensions, check which versions your dependencies expect against what each Visual Studio version actually ships.

Security choices

Personal API token, not OAuth. The user pastes a token from TickTick's settings. It's checked against the API before it's saved.
Encrypted locally. The token is stored with Windows DPAPI for the current Windows user, never in Visual Studio's settings, which roam between machines.
Host-checked. The HTTP handler refuses to attach the token to any host other than ticktick.com.
Revocation handled. A 401 clears the token and asks you to sign in again.
No telemetry, no logs.

Try it

It's a preview. Repeating dates can't be set yet, and descriptions show as plain text. Feedback is very welcome.

👉 TickTick for Visual Studio on the Marketplace (Visual Studio 2022 17.14+ and Visual Studio 2026)

Unofficial integration, not affiliated with Appest Inc. TickTick is a trademark of Appest Inc.

Todoist extension for Visual Studio

Somaraj — Fri, 18 Sep 2026 17:24:03 +0000

Ever spot a bug or improvement while working on something else and think, “I'll come back to this later”?

I built a Visual Studio extension that lets you manage your Todoist tasks without leaving the IDE.

The feature I personally find most useful:

Select a line of code → press a shortcut → create a Todoist task with the file and line number attached.

Later, you can jump directly back to that exact location.

It also includes:

📋 Todoist tasks in a dockable Visual Studio tool window
➕ Quick task creation using Todoist syntax
✏️ Edit task name, description and due date
✅ Complete or reschedule tasks
💬 View Todoist comments and attachments
🔎 Filter tasks by text, project or label
📁 Attach each Visual Studio window to a different Todoist project
🔐 OAuth 2.0 + PKCE
🔒 Tokens encrypted locally using Windows DPAPI
🚫 No telemetry
🆓 Works with free Todoist accounts

It's free and currently in preview.

Visual Studio Marketplace

I'd love to hear from other Visual Studio + Todoist users — especially what you'd want to see added.

Unofficial extension. Not affiliated with or endorsed by Doist.

Bookmark +

Somaraj — Thu, 30 Jul 2026 07:46:33 +0000

Are you tired of the cluttered bookmark bar and endless scrolling to find that one important link you saved? Do you struggle to manage a growing library of bookmarks that seem impossible to organize? Meet Bookmark +, the browser extension designed to bring order, speed, and power to your bookmark management.

Get Bookmark+ for your browser:
Google Chrome
Microsoft Edge

Whether you’re a researcher managing large collections of links, a developer juggling multiple projects, or just someone who wants a clean, organized browsing experience, Bookmark + adapts to your needs and streamlines the way you interact with bookmarks. Say goodbye to chaos and hello to a beautifully structured and highly efficient way to manage your web life.

Why Bookmark +?

Bookmark + isn’t just about saving links—it’s about transforming the way you organize and access them. This premium bookmark manager provides a rich set of features to help you stay productive, organized, and focused:

Nested Folders: Create unlimited folders and subfolders to build a hierarchy that reflects your workflow. Categorize your bookmarks by project, theme, or priority to keep everything in order.
Smart Tagging System: Add relevant tags to your bookmarks for easy cross-folder organization. Instantly retrieve related links by their tags—without duplicating bookmarks in multiple places.
Instant Search: Need a bookmark fast? The smart search bar provides real-time results as you type, scanning through titles, URLs, and tags. You’ll be able to find what you need in seconds, even if you have hundreds of bookmarks.
Cloud Sync: For users who work across devices, an optional cloud sync feature ensures that your bookmarks, folders, and tags stay up-to-date everywhere. Syncing is seamless and secure, giving you access to your organized bookmarks on any device.
Drag-and-Drop Management: Organizing your bookmarks is as easy as dragging and dropping. The intuitive sidebar allows you to quickly rearrange, move, and edit your bookmarks and folders with a few clicks.
Context Menu Integration: Add bookmarks quickly with the right-click menu, so you can keep your workflow uninterrupted while browsing.
Keyboard Shortcuts: Save time by managing your bookmarks with customizable keyboard shortcuts, ensuring you have quick access to search and organization whenever you need it.

Key Features

Deeply Nested Folders: Organize bookmarks into unlimited nested folders to mirror your projects, themes, or interests.
Smart Tagging System: Tag bookmarks with relevant keywords for easy cross-folder access. Retrieve your links in an instant using the tagging system.
Instant, Intelligent Search: Find any bookmark in seconds with real-time search results, even when your collection is large.
Cloud Sync: Keep your bookmarks, folders, and tags in sync across multiple devices for seamless access.
Drag-and-Drop Management: Effortlessly organize your bookmarks by dragging them into different folders or reordering them within the sidebar.
Context Menu Integration: Quickly add a bookmark from the right-click menu while browsing—no need to interrupt your flow.
Keyboard Shortcuts: Access and manage your bookmarks using fully customizable keyboard shortcuts.
Tag Filtering & Management: Filter bookmarks by clicking on Tag Chips, or manage all tags globally from the Settings panel.
Backup & Restore: Export and import your bookmarks using JSON files to back up or restore your entire collection.

How It Works

Install Bookmark + from your browser’s extension store (Microsoft Edge/Google Chrome).
Once installed, open the sidebar by clicking the Bookmark + icon or use the default keyboard shortcut (Alt+Shift+B), which can be customized.
To add a bookmark, click the + icon in the header or footer, then enter a title, select or create folders, and add tags to categorize it.
Organize your bookmarks by creating nested folders, editing tags, and dragging and dropping items within the sidebar.
Need to find something quickly? Use the smart search bar to get real-time search results from titles, URLs, or tags.
Filter your bookmarks by clicking on Tag Chips to display only items related to specific categories.
Use the right-click context menu to add bookmarks instantly while browsing, and take full advantage of keyboard shortcuts to manage your bookmarks without interrupting your work.
Enable cloud sync for secure backup and synchronization of your bookmarks across devices.
Manage your tags, export or import bookmark data, and back up your collection via the Settings panel.

Privacy-First Design

At Bookmark +, we respect your privacy. No personal data is collected—all your bookmarks, folders, and tags are stored locally within your browser. We ensure that all your information remains private and secure, without ever transmitting any of your data externally. Whether you’re using the extension to organize a small collection or an extensive library, you can rely on Bookmark + to keep your data safe.

Get Started with Bookmark + Today!

Don’t let your bookmarks become a chaotic mess—take control with Bookmark + and enjoy a clean, organized, and efficient browsing experience. Whether you’re a researcher, developer, or casual user, Bookmark + has everything you need to manage your web life with ease.