Make your own budget planner with AI

A private budget tracker, built your way

You'll describe it to a free AI assistant, paste what it writes into a file, and open it in your browser. No spreadsheet skills needed, and no app asking for your bank login.

• A monthly budget planner: set your income and a budget for each category (rent, food, transport, fun)
• Log spending in seconds: amount, category, date and a short note
• See what's left in each category, with bars that turn amber and red as you get close to the limit
• A pie chart of where your money went this month
• Savings goals with progress bars
• Export to a spreadsheet file, and a backup button
• No bank linking, no account, nothing uploaded. Your data stays in your browser.

Good for: anyone who has tried budgeting apps and given up, students managing money for the first time, families who want a simple picture of the month, and anyone who'd rather not hand their bank details to an app.

What you need

Build it in six steps

1. Ask for the tracker

   Copy this prompt into your AI assistant. Change the currency and categories to suit you:

   Copy this promptCopy

   I don't know how to code. Please make me a personal monthly budget tracker that runs in a web browser.
   
   Requirements:
   - ONE single HTML file (HTML, CSS and JavaScript together), no external libraries, works offline. I will save it and double-click it.
   - Currency: [£ / $ / €].
   - At the top: this month's income (editable), total spent, and what's left.
   - Categories, each with a monthly budget I can edit: Rent/Mortgage, Bills, Food, Transport, Eating out, Fun, Other.
   - A quick "Add spending" form: amount, category (dropdown), date (defaults to today) and an optional note.
   - A list of this month's spending, newest first, with a delete button on each.
   - For each category, show spent vs budget with a progress bar.
   - Save everything in the browser with localStorage, so it's still there when I reopen the file.
   - Clean, friendly design that works on a phone too.
   
   Please give me the complete file in one code block, then tell me in simple steps how to save and open it.

   Copy the code, paste it into your text editor, and save it as budget.html. Double-click the file. Add a test purchase, close the browser, reopen the file, and check it's still there.

2. Add warning colours and a chart

   Copy this promptCopy

   That works, thank you. Please add:
   - Category progress bars that are green under 75% of budget, amber from 75% to 100%, and red when over budget, with "£12 over" shown in red
   - A pie chart (drawn with the HTML canvas, no libraries) showing spending by category this month, with a legend and percentages
   - A one-line summary at the top, e.g. "You've spent 62% of your budget and we're 55% through the month"
   
   Send me the complete updated file.

   Always ask for the complete file. Replace everything in budget.html, save, and refresh (F5 or Cmd+R).

3. Manage categories and months

   Copy this promptCopy

   Please add:
   - Buttons to add, rename and delete categories (ask "Are you sure?" before deleting, and move that category's spending to "Other")
   - Arrows by the month name so I can look back at previous months. Each month keeps its own spending, but category budgets carry over unless I change them.
   - A "Copy last month's budgets" button
   
   Send me the complete updated file.

4. Track savings goals

   Copy this promptCopy

   Please add a "Savings goals" section. I can create a goal with a name, target amount and optional target date (e.g. "Holiday, £1,200 by July"). I can add money to a goal at any time. Show a progress bar for each goal and, if it has a date, how much I'd need to save per month to hit it.
   
   Send me the complete updated file.

5. Export and back up

   Your data lives in your browser, so a backup matters. A spreadsheet export is handy too.

   Copy this promptCopy

   Please add:
   - "Export to spreadsheet": downloads this month's spending as a CSV file that opens in Excel, Google Sheets or Numbers
   - "Export backup" and "Import backup": download all my data as a JSON file with today's date in the name, and restore it after confirming
   
   Send me the complete updated file.

   Make a backup at the end of each month and keep it somewhere safe.

6. Make it yours

   Copy this promptCopy

   Please restyle the budget tracker as [choose one: a calm, minimal design in navy and white / a friendly, colourful design with an emoji for each category / a dark mode design that's easy on the eyes at night].
   
   Also add a small "Add spending" button that stays in the bottom corner of the screen on phones, so logging a purchase takes one tap.
   
   Send me the complete updated file.

   Tip: the quickest budget is the one you actually update. Bookmark budget.html and log spending once a day, or every time you open your banking app.

Quick fixes

I added £10.50 and £4.25 to Food, but the total shows £10.504.25. Please fix how amounts are added up and send me the complete file.

Twist it into something else

Change the first prompt to build:

Outgrown the browser? Our upcoming Desktop expense app with charts guide builds a full program with yearly reports.

Your finances stay yours

Your finances are about as private as data gets. With your own tracker, nobody sees your spending, there's no subscription, and no app is quietly analysing your purchases. You choose the categories and decide what counts as "fun".

What to build next