Notes.

plans/notes.md

Overview

Notes is a markdown note-taking app with live preview, full-text search, tagging, and autosave. Notes persist locally via IndexedDB (Dexie) sitting behind MSW handlers, so the app behaves identically against MSW or a real REST backend. The TipTap editor is configured with markdown round-trip and a sanitized renderer.

What you're reading is the same plans/notes.md spec used to build Notes. It lists what's in the source, what isn't, the audit results, and the architecture. Read it before you subscribe — there are no surprises on the other side of payment.

Features in box

• Markdown editor (TipTap) with live preview and sanitized rendering
• Full-text search across notes, tags, and folders (Fuse.js)
• Autosave with debounced writes and dirty-state guard against navigating away
• Tagging with autocomplete and tag-filtered list views
• IndexedDB persistence (Dexie) sitting behind MSW so swap to real REST is one file
• Keyboard-first command bar surfacing every navigation and CRUD action
• Light / dark / system theme via CSS variables

What you'll still build

The work the starter doesn't do for you — listed up front so you can size the rest.

• Wire your real backend — replace the MSW handlers (recipes for Supabase, Hono, Convex)
• Decide on file storage if you want attachments (S3 or whatever you prefer)
• Add multi-user collaboration if you need it (the schema supports per-note ownership)
• Pick your billing surface (Stripe stub ships separately; integration is yours)
• Compose your own brand tokens; the theme is fully white-labeled

Stack

The shared baseline across every starter in the catalog.

• typescript — strict mode, no any, no ! non-null in shipping code
• @tanstack/react-router + @tanstack/react-query for routing and server state
• tailwindcss with Radix primitives for unstyled, accessibility-first components
• msw for the mock API layer — designed to be replaced with your real backend
• vitest for unit/component, @playwright/test for E2E

Per-starter additions for Notes:

• tiptap
• dexie
• fuse.js

Six pillars · audited · —

Public audit · scored against concrete criteria per pillar · re-run on every shipping release.

Audit pass: — · re-run on every shipping release.

Architecture

Notes are stored locally in IndexedDB through Dexie. MSW handlers wrap Dexie reads and writes so the app speaks plain HTTP — fetch('/api/notes') works identically whether MSW intercepts it (default) or a real backend serves it (after swap). The editor is a single TipTap-backed component reused for compose and edit. The command bar is the same primitive every starter that ships with one will use — the source is a layer below in src/lib/cmdk, not specific to Notes.

Search runs client-side with Fuse.js over the full note set. With realistic fixture sizes (~500 notes) this is well under the 100ms budget; once a real backend lands, swap the local index for a server-side search endpoint with the same response shape.

Recipes

• Swap MSW for Supabase — 12 minutes
• Swap MSW for Hono + SQLite — 18 minutes
• Swap MSW for Convex — 14 minutes
• Add Stripe billing surface — 25 minutes
• White-label setup with your design tokens — 8 minutes

Recent versions

See full changelog →