Building an offline-first notes app with React and localStorage

My Notes, the notes app on this site, has no backend, no account, and no sync server. Every note lives in your browser's localStorage, and the whole app works with the network turned off. Here's the actual approach behind it.

Why skip a backend at all

For a single-user notes app, a server buys you very little and costs you a lot:

• No account means zero signup friction — open the page and start writing.
• No network round-trip means saving is instant, and nothing breaks when you lose connectivity mid-edit.
• No server means no data-retention policy to write, because the data never leaves the device.

The storage layer

Each note is a noteloom document (the same blocks/runs JSON from the editor) stored under its own key, plus a small index of {id, title, updatedAt} so the notes list can render without parsing every document:

const INDEX_KEY = 'noteloom:notes:index';

function listNotes() {
  const index = JSON.parse(localStorage.getItem(INDEX_KEY) ?? '[]');
  return index.sort((a, b) => b.updatedAt - a.updatedAt);
}

function saveNote(note) {
  localStorage.setItem(`noteloom:note:${note.id}`, JSON.stringify(note.document));
  const index = listNotes().filter((n) => n.id !== note.id);
  index.push({ id: note.id, title: note.title, updatedAt: Date.now() });
  localStorage.setItem(INDEX_KEY, JSON.stringify(index));
}

Every edit debounces into a save through this same path — no separate draft state, no "unsaved changes" warning needed, because there's nothing to lose between keystrokes and disk.

Making it work fully offline, not just "saves locally"

localStorage alone gets your data to persist, but the page itself still needs a network request the first time — unless a service worker has already cached the app shell. My Notes registers one on first visit, so a second visit with no network still loads the full editor, not just a blank tab.

Where this approach stops making sense

This isn't a sync solution — notes don't follow you to another browser or device, and clearing site data deletes them for good. For anything you need to share, back up remotely, or edit from two devices, you'd still want a real backend behind the same editor. The point isn't that servers are unnecessary — it's that a huge share of "just let me jot something down" use cases never needed one in the first place.

The simplest storage layer is the one that's already sitting in the browser you're running in.

Try My Notes yourself, or read the Getting started guide if you want to wire the same editor into your own app.