Canvas Planner

A local-first personal planner — the infinite-canvas feel of GoodNotes meets the block-based speed of Notion. Single user, no login, no cloud. Everything lives in your browser's IndexedDB and can be exported/imported as JSON.

Run it

npm install
npm run dev

Open the printed URL (default http://localhost:5173). No backend, no config.

Other scripts:

npm run build      # typecheck + production build
npm run typecheck  # types only
npm run preview    # serve the production build

Stack

Vite · React · TypeScript · Tailwind v4 · Zustand (UI state) · Dexie/IndexedDB (persistence) · @dnd-kit (reorder) · date-fns · lucide-react. tldraw, TipTap, and Recharts arrive in their designated phases (3 and 5).

Data & backups

All data is stored locally via Dexie (IndexedDB). Nothing is ever sent anywhere. Settings → Backup & restore exports every table to a single JSON file and imports it back (import replaces current data). This is your backup.

Cross-device sync would require a hosted database and sync layer — deliberately out of scope to keep this MVP fully local. It's a clean addition later behind a sync adapter, but everything here works offline and forever without it.

Build status — all 5 phases complete

Tasks + Today + Inbox + quick-capture, Calendar with time-blocking, recurring tasks (Phase 1); the Goals system with a daily-focus loop (Phase 2); Notion-style Notes and the tldraw Whiteboard (Phase 3); Habits with streak heatmaps and a Pomodoro focus timer (Phase 4); the ⌘K command palette, a Recharts analytics dashboard, and the guided weekly review (Phase 5).

What works now

• Today — inline add (type + Enter), complete, inline-rename, drag-reorder, collapsed "completed" section, per-task priority / project / tags / notes / estimate / due date (via the task editor).
• Today’s Focus — pick goals to focus on today; their milestones appear at the top of Today and check off with live progress.
• Inbox + quick-capture — ⌘/Ctrl + Shift + I from anywhere drops a thought into the Inbox; triage it into a day or delete it.
• Calendar — Month, Week, and Day views. Scheduled tasks and events render; drag a task chip from a day's tray onto the grid to time-block it, drag blocks to move them, drag the bottom edge to resize, drag empty space to create an event. Click a month day to drill into it.
• Recurring tasks — daily / weekly / specific weekdays. Completing today's instance spawns the next occurrence.
• Goals — a bank of goals with milestones, animated per-goal progress bars, and an overall progress ring. Focus history strip shows which days you pushed goals forward.
• Notes — Notion-style block editor (TipTap): headings, lists, checkboxes, code, quotes, dividers via a / slash menu. Autosaves. Searchable list, project-taggable.
• Whiteboard — tldraw infinite canvas: pan, zoom, draw, shapes, sticky notes, arrows, text. Multiple named boards, each persisted, theme-synced.
• Habits — daily / specific-weekday cadence, GitHub-style streak heatmap, current + longest streak, and today's habits as quick-checks on the home view.
• Focus timer — Pomodoro with configurable work/break lengths, attach to a task, live countdown in the sidebar; completed focus minutes log to analytics.
• Command palette — ⌘/Ctrl + K fuzzy-searches views, projects, notes, tasks, and goals, plus quick actions (new task/goal/note, start timer, theme).
• Analytics — task completions over time, focused minutes per day and per project, time-of-day focus, habit consistency, goal progress (Recharts).
• Weekly review — guided wins / blockers / next-week focus / mood, saved per week with a browsable history.
• Projects — the organizing spine; filter any view by project from the sidebar. Manage them in Settings.
• Theme — dark by default, light toggle, persisted.
• Keyboard — ⌘/Ctrl+K palette, ⌘/Ctrl+Shift+I capture, g-then-t/i/c navigation, ? opens the full cheat-sheet.

Project structure

src/
├── db/          Dexie schema (all tables defined up front) + first-run seed
├── data/        Persistence operations (tasks, projects, events, backup)
├── hooks/       Reactive reads (useLiveQuery) + keyboard shortcuts
├── store/       Zustand UI store (theme, view, filters)
├── lib/         id, date, recurrence, colors, cn
├── components/  ui/ · layout/ · tasks/ · calendar/ · goals/ · notes/ · habits/ · timer/ · command/ · capture/ · common/
└── views/       Today · Inbox · Calendar · Goals · Notes · Whiteboard · Habits · Timer · Analytics · Review · Settings

Notes, Whiteboard, Analytics, and the Weekly Review are lazy-loaded, so TipTap, tldraw, and Recharts stay out of the main bundle (~149 kB gzipped).

Honest notes

• Handwriting: true Apple-Pencil handwriting fidelity is a browser/hardware limitation. The Phase 3 whiteboard (tldraw) gives the infinite-canvas feel and solid pen/stylus input, but it is not a substitute for a native inking engine.
• Calendar interactions use precise pointer math rather than a generic DnD library, because pixel-accurate time-grid placement/resize is more reliable that way. @dnd-kit drives the Today list reordering.