DEV Community: Vigor Guy

How browser encryption actually works in a private notepad

Vigor Guy — Mon, 09 Nov 2026 07:07:59 +0000

How browser encryption actually works in a private notepad

Disclosure: I built the notepad this article is about — Outsmart Notes. It comes up once, at the end, because the encryption design below is the one I shipped.

Most notes apps encrypt your notes "in transit and at rest", which sounds thorough until you ask the obvious question: at rest where, and who holds the key? If the server holds the key, the server can read your notes. The encryption protects you from everyone except the people running the service — which is exactly the party a private notepad should protect you from.

There is a stricter design: encrypt in the browser, with a key the server never sees. Here is how that actually works, and where it breaks.

1. The key never leaves the device

The vault is locked with a password you choose. That password is never sent to the server. Instead, the browser runs it through PBKDF2 — 100,000 iterations — to derive an encryption key. The iteration count is the point: it makes guessing the password expensive, even for someone who gets hold of the encrypted data.

The derived key lives in browser memory while the vault is open. It is never written to disk, never put in a cookie, and never sent in a request. When you close the vault, it is gone. Forget the password and there is no recovery — that is not a missing feature, it is the guarantee. A vault the operator can open for you is a vault the operator can open.

2. AES-GCM does two jobs at once

The cipher is AES-GCM with a 256-bit key. It encrypts the note and, in the same operation, produces an authentication tag — a short value that proves the ciphertext has not been tampered with. If a single byte changes, decryption fails loudly instead of silently returning corrupted text.

That matters because an attacker who can modify stored data is a realistic threat model for a web app: a compromised server, a malicious extension, a bad sync. Encryption without authentication would let tampered notes decrypt into garbage you might trust. GCM makes tampering detectable, not just unreadable.

3. Sharing without sharing the key with the server

Encrypted sharing has a harder problem: how do you send someone an encrypted note without giving the server the key? The answer is the URL hash. The encryption key travels in the fragment after the # in the link — and browsers never send the fragment to the server. The server stores the ciphertext and serves the page; the recipient's browser reads the key from the hash, fetches the ciphertext, and decrypts locally.

The server sees an opaque blob and a request for a page. It cannot decrypt the note, because it never receives the key. The trade-off is real too: anyone with the link has the key, so a shared link is only as private as the channel you send it through. Treat it like a password, not a permalink.

4. Local-first is the other half of private

Encryption is only half the design. The other half is where notes live by default: in the browser, in IndexedDB, on your device. Notes are stored locally first and synced only when you choose to. That means the ordinary case — writing, reading, searching your own notes — involves no server at all.

Local-first also changes the failure modes. There is no account to breach for notes that were never uploaded, and no outage that locks you out of your own writing. The cost is the same as the vault's: the device is now part of the trust boundary. Clear browser data and local-only notes go with it, so export matters — JSON or plain text, on your terms.

5. What this design does not protect you from

Honest limits, because a privacy claim that hides them is worse than no claim:

It does not protect you from your own device. Malware, a compromised browser, or someone looking over your shoulder bypasses encryption entirely.
It does not protect you from a weak password. PBKDF2 slows guessing; it cannot save "password123".
It does not make shared links private. The key is in the link, so the link is the secret.
It does not hide metadata. The server can still see that you use the service, when, and how much data you store — just not what it says.

A notepad that is honest about those limits is more trustworthy than one that claims "military-grade encryption" and stops there.

The test that matters

Ask any notes app three questions: who holds the key, where does decryption happen, and what happens if I forget my password? If the answers are "we do", "on our servers", and "we can reset it for you", your notes are encrypted against everyone except the company itself. If the answers are "only you", "in your browser", and "nothing — there is no recovery", the privacy claim is real, and the inconvenience is the price.

The notepad I built from these lessons is Outsmart Notes — https://outsmartnotes.com — and those three questions are the ones I would ask of any tool before trusting it with a private note.

What it takes to make a notepad open in under a second

Vigor Guy — Mon, 09 Nov 2026 06:51:11 +0000

Disclosure: I built the notepad this article is about — Outsmart Notes. It comes up once, at the end, because the lessons below come from building it.

Ideas do not wait for software. A thought arrives while you are walking to the kitchen or halfway through a meeting, and it has about ten seconds before it dissolves. A notepad's job is to be faster than forgetting — and most notes apps fail that test before you have typed a word. They load, then sync, then ask you to pick a notebook, a template, a workspace. By the time you are ready, the idea has started to fade.

Here is what I learned making a notepad that opens in under a second, every time — on good Wi-Fi, bad Wi-Fi, and no Wi-Fi at all.

1. Don't make the user wait for the server

The single biggest delay in most web apps is the round trip: load the page, ask the server who you are, fetch your data, then finally let you type. A notepad can skip almost all of that. Our notes live in the browser first, in IndexedDB, so the editor can render and accept typing before any network request has finished — or even started. There is no spinner between the thought and the cursor.

The trade-off is honest and worth stating: local-first means your notes live on that device and browser until you choose to sync them. If you clear browser data, local-only notes go with it. That is the price of instant, and it is better than the alternative — a notepad that fails exactly when you need it, on a plane or in a dead zone.

2. Leave the framework out

Our editor is plain JavaScript with no framework. That is a deliberate choice, not nostalgia. Every framework is a download, a parse, and a runtime standing between the user and a blinking cursor. For a page whose entire job is "show a text box, fast", the framework is pure overhead.

Plain JS has a cost too: you write more of the plumbing yourself, and there is no ecosystem to lean on for every small problem. For a notepad, that is a fair trade. The plumbing is small — a textarea, an IndexedDB store, a service worker — and the payoff is a page that needs almost nothing before it works.

3. Save without interrupting

Autosave sounds simple until you think about what it does to typing. Save on every keystroke and you make the browser write to disk while the user is mid-word. Throttle it too aggressively and a crash loses the last sentence. Our compromise: save the current note locally after a short pause in typing, and keep a lightweight in-memory copy of the very latest state so a crash mid-save still recovers cleanly.

Saving is a background job, not a user event. There is no save button, no "saving…" indicator fighting for attention, and no modal that stops you mid-thought to ask whether you want to keep changes. The app should feel like paper: your words are simply there when you come back.

4. Make it work offline on purpose, not by accident

Offline support is often treated as a fallback. For a notepad it should be the default mode: the app works exactly the same with no connection, because it never needed one to open, type, or save. A service worker caches the page and its assets on first visit, and the notes already live in IndexedDB on the device.

That changes how you think about sync. Sync becomes a quiet background job that merges changes when a connection appears — never a gate in front of the editor. If it fails, nothing breaks; the notes are already safe locally, and the sync can retry later.

5. Capture first, organise later

Speed is not only load time. Once the page is open, every extra decision is friction: pick a notebook, pick a colour, add tags, choose a template. Each one costs a second and a little of the thought. A fast notepad opens to a blank note, ready to type, and nothing else.

Organisation still matters, but it can wait until after the idea is safe. Search and links between notes do the organising work later, when you have time to think — not in the ten seconds when the idea is still arriving.

The test that matters

Forget feature lists. There is one honest test for a notepad: the next time an idea arrives, how long before you have typed it? If that test takes longer than a second, every other feature is decoration. Build for the open, and the rest follows.

The notepad I built from these lessons is Outsmart Notes — https://outsmartnotes.com — and the test above is the one I would invite anyone to run on it, or on whatever they use now.

The notepad that opens before you finish thinking

Vigor Guy — Sun, 08 Nov 2026 13:48:23 +0000

Ideas do not wait for software. The thought arrives while you are walking to the kitchen, or halfway through a meeting, or just as you are falling asleep — and it has about ten seconds before it dissolves. In that moment, what you need is not a workspace, a dashboard, or a sync status. You need a blank page, already there, with a cursor blinking.

Most notes apps fail this test. They take seconds to load, then more seconds to sync, then they ask you to pick a notebook, a template, a workspace. By the time you are ready to type, the idea has already started to fade. The whole point of a notepad is to be faster than forgetting, and speed is not a feature — it is the job.

Sub-second, every time

Outsmart Notes opens in under a second, and that is not a marketing claim about a good day on a fast connection. It is plain JavaScript with no framework bloat, notes stored locally in your browser, and an editor that does not need to phone home before it lets you type. Cold boot, warm boot, bad Wi-Fi, no Wi-Fi — the page is there before you have finished the thought that sent you to it.

That speed changes how you use a notepad. When opening it costs nothing, you stop rationing it. You capture the half-idea, the quote, the thing to check later, instead of telling yourself you will remember it. You will not. Write it down.

Capture first, organise later

A fast notepad earns its keep in the first three seconds, so everything about Outsmart Notes is arranged around capture. You open it and type. Checklists are a keystroke away. Headings, bullet points, and code blocks come from markdown and slash commands, so formatting never interrupts the sentence you are writing. Press Ctrl+K and you are searching or jumping, not hunting through menus.

Voice typing is there for the moments your hands are busy — dictate a thought while you are cooking, walking, or driving, and it lands in the note as text. And when the material already exists somewhere else, you can drag in a PDF or Word file and pull the text straight into a note instead of retyping it.

None of this asks you to learn a system first. There is no setup ritual, no template gallery to browse, no empty workspace waiting to be configured. It is a notepad: it opens, you type, it saves.

Notes that connect to each other

Quick capture is only half the job. The other half is finding the note again when it matters, and that is where connected notes earn their keep. In Pro, wiki links let you link one note to another just by typing its name in double brackets, and backlinks show you every note that points at the one you are reading. A meeting note links to the project note; the project note links to the idea that started it; the idea links to the quote you captured three weeks ago.

It is a small thing that compounds. Instead of a pile of isolated notes, you slowly build a web of things you have thought about — and the connections are the part you could never have planned in advance. Pro also adds smart reminders, so a note can tap you on the shoulder at the right time instead of sitting quietly until you happen to remember it.

It works when the internet doesn't

A notepad that needs a connection is a notepad that fails exactly when you need it most: on a plane, in a basement, on a train going through a tunnel. Outsmart Notes works offline as a PWA, with your notes stored locally in your browser through IndexedDB, so you can keep writing and it all saves. When you are back online, everything is still there.

The Free plan gives you up to 5 saved notes and 100 MB of storage, and you can try it for 15 minutes with no signup needed to start — after 15 minutes, creating a free account is what lets you keep saving notes. Pro is $5 a month or $49 a year, with unlimited notes, a password-locked vault, wiki links and backlinks, smart reminders, and multi-device cloud sync. There is no free trial; Pro is sold direct. But if you want to try Pro, the code 1STFREE27 makes the first month of the monthly plan free — a coupon promotion, redeemed on the pricing page at outsmartnotes.com/pricing.

The test that matters

Forget feature lists. There is one honest test for a notepad: the next time an idea arrives, how long does it take you to get it written down? If the answer involves loading screens, sync spinners, or choosing where the note should live, the tool is costing you the very thing it exists to save.

Try the faster way instead. Open outsmartnotes.com and type the thought that brought you here. It will be on the page before you have finished thinking it — and still there tomorrow, when you need it.