Why Markpad exists

Small tools for the things you lose while browsing

Why Markpad exists, the design decisions behind it, and what it is built with.

Problem → Solution

Real problems, focused tools

Markpad started with three everyday frustrations. Each tab exists to solve one of them — and it all works offline, with no account required. A daily task list (Today) and in-context translation came later, for the same reason.

Snippets

Problem

Developer Alex retypes the same review comment dozens of times a week. A full note app is too heavy for a quick paste, and a dedicated text expander is one more subscription.

Solution

Save it once with a short alias. In any text box, type #alias and press Ctrl+Shift+K — the full text appears.

Vocabulary

Problem

Researcher Bình runs into "LoRA" for the fourth time and still can't recall the definition. A dictionary lookup is gone the moment the tab closes; a flashcard app is overkill for saving one term.

Solution

Select the word → right-click → Add to Vocabulary. Your own definition, saved — and brought back for review before you forget it.

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 site 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

Every window below is the real extension, captured from the current build.

Snippets: type #alias in any text box and it expands to the saved text
Vocabulary: save a word from any page and review it with spaced repetition
Notes: notes anchored to a site come back when you revisit it
Today: a daily task list with a calendar, repeating tasks and a summary of time spent
Design Language

Minimal, functional, let the content speak

Warm paper background, near-black text (never pure black), quiet borders. Blue marks what you can act on — selection and focus; the brand yellow is kept for the logo and highlights. Light and dark follow 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

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

Fast, not flashy

Motion only where it explains something, and never in the way of typing. A tool you open fifty times a day should feel instant, 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
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
Firebase Firestore
Google sign-in, offline persistence built in
Payments
Lemon Squeezy
Merchant of Record for Markpad Pro — card details never reach Markpad
Platform
Chrome first
Firefox planned later · MV3 manifest

Markpad is made by thanhtrung.ep, an independent developer, under T-ep Studio. Questions or feedback? support@t-epstudio.com