Cursor App Template #28 — What-if Scenario Analysis

What-if Scenario Analysis

Adjust financial assumptions, compare Base, Optimistic, and Pessimistic outcomes, and visualize P&L impact in one browser page.

Overview

What-if Scenario Analysis is a single-page app for finance and planning teams who need to stress-test revenue and cost assumptions without rebuilding a spreadsheet. Enter base revenue, COGS, operating expenses, and tax rate; slide scenario drivers to recalculate a full P&L grid; compare variance columns side-by-side; chart net income and waterfall breakdowns; export or import workbooks; and save your model to the browser.

Key features

Key assumptions

  • Number inputs for base revenue, base COGS, base operating expenses, and tax rate (%).
  • Changes recalculate the grid, summary cards, and charts instantly.

Scenario drivers

  • Three default scenarios ship with the app: Base, Optimistic, and Pessimistic.
  • Each scenario has Alpine.js range sliders for revenue change (%) and cost change (%).
  • Live formatted percentages appear beside each slider (green for favorable, red for unfavorable).
  • Dragging a slider updates every downstream calculation immediately.

Scenario management

  • Add scenario creates a new scenario with default driver percentages and new grid/chart columns.
  • Remove last deletes the most recently added non-base scenario (hidden when only two scenarios remain).
  • Chart scenario dropdown selects which scenario drives the P&L waterfall chart.

Financial model grid

  • AG Grid table with P&L line items: Revenue, COGS, Gross Profit, Operating Expenses, EBIT, Tax, and Net Income.
  • Base column shows the base-case amounts.
  • Each non-base scenario gets a value column and a Δ% variance column compared to base.
  • Variance cells are color-coded green (favorable) or red (unfavorable) based on the metric type.
  • Grid columns rebuild automatically when scenarios are added or removed.

Net income comparison

  • Summary card row at the bottom shows net income for every scenario.
  • Non-base cards display percent change vs base with color-coded left borders and delta text.

Charts

  • Scenario comparison (bar) — Chart.js grouped bar chart of net income and revenue across all scenarios.
  • P&L waterfall — Chart.js bar chart for the selected scenario showing Revenue through Net Income with signed COGS, OpEx, and Tax bars.
  • Chart axis labels, legends, and grid lines follow light or dark theme.

Excel import & export

  • Export Excel downloads `what-if-scenarios.xlsx` with three sheets:
  • Model — grid line items with base values, scenario amounts, and variance percentages.
  • Drivers — scenario names with revenue and cost change percentages.
  • Assumptions — base revenue, COGS, opex, and tax rate.
  • Import Excel accepts `.xlsx`, `.xls`, or `.csv` files and restores assumptions and driver percentages from matching sheet names.

Save & load

  • Save model writes current assumptions and scenarios to browser localStorage.
  • Load model restores the last saved snapshot and refreshes the grid and charts.
  • Assumptions and scenarios also auto-save on every recalculation.

Theme

  • Dark mode toggle in the header (☀️ / 🌙) using Tailwind `class` dark mode.
  • AG Grid uses a custom dark theme; Chart.js colors adapt when dark mode is on.
  • Dark mode preference persists across page reloads.

Data & persistence

Default sample values ship with the app (e.g. $1,200,000 base revenue, $480,000 COGS, $420,000 opex, 25% tax rate). Optimistic and Pessimistic scenarios include preset driver percentages. Edits save automatically to localStorage; explicit Save/Load buttons let you confirm persistence. Import/export uses SheetJS workbooks for sharing models outside the browser.

Charts & reporting

Chart.js powers the scenario comparison bar chart and the per-scenario P&L waterfall. SheetJS generates the downloadable Excel workbook. Variance percentages in the grid and summary cards highlight favorable vs unfavorable moves relative to the base case.

Built with

Tailwind CSS, Alpine.js, AG Grid Community, Chart.js, and SheetJS (xlsx).

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

What-if Scenario Analysis — Save/load, dark mode & persistence

What-if Scenario Analysis

Adjust assumptions, compare scenarios side-by-side, and visualize outcomes.

Key assumptions

Scenario drivers

Optimistic+12% / -5%
Pessimistic-10% / +8%
Scenario comparison (bar)
P&L waterfall
Line itemBaseOptimisticOpt Δ%PessimisticPess Δ%
Net Income$225,000$366,750+63.0%$81,000-64.0%

Net income comparison

Base$225,000
Optimistic$366,750
Pessimistic$81,000
💾 Assumptions & scenarios saved to localStorage 🌓 Theme preference remembered 📊 Grid columns rebuild on load

Leave a Reply