Open Source Budget Planner Template
Give every dollar a job, then watch the envelopes hold or not.
A zero-based monthly budget planner with envelopes, real rollover balances, overspend warnings, and a safe-to-spend-per-day figure.
This is the real app, not a mockup. Whatever you enter in the demo stays in your browser and belongs to nobody.
What you get
One zip. Everything to own it.
Budget Planner is built on the one rule that makes budgets work: income minus every envelope should land on zero — not zero in the bank, zero left unassigned. Set your monthly income, split it into envelopes grouped as essentials, lifestyle, and future, and the plan tells you exactly how much is still unclaimed. Spending is logged against a single envelope, so each one shows a remaining balance and turns red when it goes under rather than quietly borrowing from rent. Envelopes marked as rolling over carry their real balance forward — recomputed by replaying every earlier month from your own logged history, keeping negatives as well as positives, because an overspent March is exactly what April needs to know. The safe-to-spend figure is deliberately narrow: only what is left in the flexible envelopes, divided by the days remaining. It is the number people actually want on the 19th.
- Zero-based plan with a live left-to-assign figure
- Envelopes grouped into essentials, lifestyle, and future
- Rollover balances replayed from your own logged history
- Overspend shown in the open, never absorbed silently
- Safe-to-spend-per-day from flexible envelopes only
- Month-by-month navigation across past and future
budget-planner/├── app/the running Next.js app├── agent/START_HERE, PROJECT_MAP, RULES, RECIPES, TESTS, DEPLOY├── CLAUDE.mdread automatically by Claude Code├── AGENTS.mdread automatically by Codex├── .cursor/rules/loaded automatically by Cursor└── README.mdrun it, then make it yours
Inside the app
Customize with AI
Your agent already knows this codebase.
Ships with CLAUDE.md, AGENTS.md, Cursor rules, and a full agent handbook — project map, safety rules, recipes, tests, and deploy notes.
Prompts written against this app
Run it
5 min to your own copy.
- 01Create your editable app copy and unzip it.
- 02Run npm install.
- 03Run npm run dev and open http://localhost:3000.
- 04Read /agent/START_HERE.md before customizing.
- 05Swap the local-first storage boundary for your own backend when ready.
Budget Planner data stays in this browser by default.
No account, backend, or cloud sync is included in the current package.
An agent can add optional sync later while preserving the local-first default.
This package is standard-ready for Create My App and AI customization.
A full app-only PWA install route is not enabled yet for this app.
Questions people ask
No, and that is deliberate. You enter income and spending yourself, and every figure stays in your browser. No credentials, no bank aggregator, nothing uploaded.
Assigning every unit of income a job until nothing is unassigned. It does not mean spending everything — savings and sinking funds are jobs too. The planner shows what is still unclaimed until the number reaches zero.
Envelopes marked as rolling over carry their balance into the next month, recomputed by replaying each earlier month from your logged history. Negative balances carry too, because an overspent month is the thing the next month most needs to know.
Only from what remains in the flexible lifestyle envelopes, divided by the days left in the month. Rent you have not paid yet is never counted as spendable.
If this isn’t quite right
Take Budget Planner and make it yours.
Free, MIT, 5 min to running. The demo above is exactly what lands in your folder.