Clarity
A personal finance dashboard that reads the budget spreadsheet you already keep and turns it into net worth, cash flow, spending drift and next actions. One HTML file, no server, no account, and nothing leaves the machine.
ASimulated demo
This demo is built for a wider screen. Open it full screen for the best look on a phone.
Every number in the demo is invented. The real app runs on your own spreadsheet in your own browser.
BTry this
Change the range
On Accounts, switch 3M, 6M and 1Y. The chart, the deltas and the summary note all re-read from the same data.
Read the drift panel
Open Reports. Categories are compared with your own six-month baseline, not a generic benchmark.
Filter transactions
Type "grocer" or pick an account. Filtering is live and stays on the page.
Go dark
The moon button flips the whole palette. Chart colours and status badges keep their meaning.
CWhat it does
Key highlights
- Drag in an Excel export. Parsing happens in the browser and the file never uploads anywhere.
- Five views: Accounts, Reports, Investing, Transactions and Statements, with a net-worth trend, savings rate against a personal baseline, and drift flags per category.
- Anomalies and next actions come from your own history, quantified: "idle cash could move to investments without touching the buffer."
- Goals and settings persist in the browser. The spreadsheet stays the single source of truth, so every load reflects its latest state.
- Ships as one self-contained HTML file with fonts and the parser inlined, plus PDF statement export.
How it is built
- FrameworkSvelte 5 (runes)
- BuildVite, single-file plugin
- ChartsChart.js
- Spreadsheet parsingSheetJS
- PDF exportjsPDF + AutoTable
- PersistencelocalStorage only
- TestsVitest on the compute layer
- DesignOKLCH tokens, light and dark
Process
Built from a product brief through PRD, architecture and epics, then shipped story by story with Claude Code. The compute layer is separated from the views so every metric has a unit test and the UI is a thin lens over it.