Why Markpad exists

Built to fix 3 specific problems

No frameworks, no fluff — just the story, the design decisions, and the stack behind Markpad.

Problem → Solution

Three real problems, three focused tools

Every feature exists to solve exactly one pain point — no more, no less. No existing extension combines all three, and none of them work fully offline with no account required.

Snippets

Problem

Developer Alex retypes the same PR comment dozens of times a week. TextExpander costs $40/year; Notion is too heavy for a quick copy-paste.

Solution

Save a snippet with a short alias. Open the popup, type two characters, click copy. Done in 3 seconds.

Vocabulary

Problem

Researcher Bình runs into "LoRA" for the fourth time and still can't recall the definition. Google Dictionary only covers common words; Anki is overkill for saving one term.

Solution

Highlight the word on the page → right-click → Add. Your own definition, one second away.

Notes

Problem

PM Chi researches 20 competitor sites. Two weeks later, she's forgotten the insight she had. Bookmarks only save the URL — not the thought.

Solution

Notes are pinned to the URL itself. Revisit the page and the note is right there — you save the insight, not just the link.

See it in action

What Markpad actually looks like

Real product screenshots — captured straight from the current build. No mockup fakery.

Markpad open in a full browser tab, showing snippets, vocabulary and notes on one timeline
Full tab

Snippets, vocabulary and notes on one timeline, tag colours in the sidebar.

Markpad Notes in the full tab, a note anchored to a site with a link back to the exact page
Notes

Anchored to the site — revisit any page of it, the note is right there.

Markpad's in-page capture popover with actions for Vocabulary, Snippet, Note, and Translate
Capture on selection

Highlight any text on any page — save as vocabulary, snippet, note, or translate.

Markpad Vocabulary review stats — due today, mastered, and streak
Vocabulary

Spaced-repetition review — what's due, what you know, your streak.

Markpad popup in dark mode, opened from the toolbar
Popup

One click from the toolbar. Light and dark, your choice.

Markpad Trash showing two deleted items with Restore and Delete forever actions, and the auto-purge date
Trash

Deleting moves it to Trash first — restore it, or it clears itself out after 30 days.

Design Language

Minimal, functional, let the content speak

Warm paper background, near-black text (never pure black), near-invisible borders. One accent blue, used sparingly — interactive states and tags only. Auto/Light/Dark, all following the same palette.

canvas
#f5f2eb
surface
#fffdf8
ink
#1c1917
brand
#f5b931

Content-first

Chrome — nav, tabs, borders — recedes; content comes forward. Hierarchy is built with size and weight, never color.

Soft, not sharp

Multi-layer soft shadows instead of one hard drop-shadow — cards and toasts feel gently lifted, never harsh.

Fast, not flashy

Soft multi-layer shadows instead of hard drop-shadows, no gradients, no glow. A power tool should feel quick, not decorative.

Tech Stack

The stack, settled early and left alone

Chosen in the first week and never revisited — one less decision to make on every release.

UI Framework
Vue 3 + Composition API
Pinia for state, Vue Router for the options page
Build Tool
Vite + crxjs
HMR for extension dev, fast refresh
Styling
Tailwind CSS v4
CSS variables for light/dark theming
Language
TypeScript
Strict mode, vue-tsc typecheck
Icons
Lucide
Tree-shaken, consistent stroke
Sync (planned)
Firebase Firestore
Chrome Identity API for auth
Payment (planned)
Markpad Pro subscription
Not live yet — pricing announced when Google Sync ships
Platform
Chrome first
Firefox planned later · MV3 manifest

Made by thanhtrung.ep — built solo, in public. Questions or feedback? thanhtrung.ep.work@gmail.com