Budgeting & Forecasting

Edit cells, switch scenarios, import data, and explore what-if growth.

Overview

This single-page budgeting app helps finance teams track planned spend against actuals by department and category. Everything runs in the browser: an editable grid, live variance calculations, scenario modeling, charts, and Excel import/export. No server or login is required—open the page and start working with sample data or your own file.

Key features

Dashboard KPIs

At the top of the page, summary cards show Total Budget, Total Actual, and Overall Variance. Variance is color-coded green when favorable and red when over budget. The cards update instantly as you edit the grid, change scenarios, or adjust what-if growth.

Budget grid

The main table is powered by AG Grid and groups rows by department (expandable groups). Columns include Category, Budget, Actual, Variance, and Variance %. You can edit category, budget, and actual values inline with a single click. Variance and variance % recalculate automatically and use conditional formatting (green/red). A pinned total row at the bottom sums budget, actual, and variance. Columns are sortable and resizable.

Scenarios and what-if

A scenario selector offers Base, Optimistic, and Pessimistic views. Changing the scenario recalculates budget amounts using built-in multipliers. A what-if growth % field lets you apply an overall percentage change to all budget base values and see the impact immediately.

Charts

Two Chart.js visualizations sit below the grid:

• Bar chart — Budget vs Actual by category
• Line chart — Total Budget vs Total Actual trend

Charts refresh whenever data, scenario, growth %, or theme changes.

Import, export, and reset

• Export to Excel — download the current grid as `.xlsx`
• Import Excel or CSV — replace grid data from a spreadsheet upload
• Reset to Sample Data — restore the original eight sample rows, Base scenario, and 0% growth

Save and load versions

Save snapshot stores the current scenario, growth %, and row data under a name you choose (up to ten versions in browser storage). A saved versions dropdown lets you reload any prior snapshot without losing your working data.

Appearance

A dark mode toggle switches the full layout between light and dark themes. Your preference is remembered in the browser. The layout is responsive for smaller screens.

Data & persistence

Sample data includes eight budget lines across departments. Named snapshots and dark-mode preference persist in localStorage in the same browser.

Built with

Tailwind CSS, AG Grid Community, Alpine.js, Chart.js, and SheetJS (xlsx)—all loaded from CDNs in one self-contained HTML file.

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.