Blog

What You Will Build

A browser-based expense tracker with:

• Editable cells for descriptions, amounts, dates, and categories
• Dropdown menus for expense categories
• A SUM formula that totals everything automatically
• Date pickers and currency formatting

Step 1: Set Up the Project

Create a project folder and open it in Windsurf:

mkdir expense-tracker && cd expense-tracker
npm init -y
npx @jspreadsheet/install

Or let Cascade handle it. Open an empty folder in Windsurf, press Cmd+L (Mac) or Ctrl+L (Windows/Linux) to open Cascade, and type:

Initialize a new npm project in this folder. Run npx @jspreadsheet/install
to set up Jspreadsheet Pro. I will paste my license key into config.js after.

Cascade will run the commands in the integrated terminal.

Step 2: Generate the App with Cascade

Open Cascade and describe the full app:

Create three files for an expense tracker app using Jspreadsheet Pro:

1. index.html - loads jspreadsheet and jsuites from node_modules, links
   style.css, and includes a div with id "spreadsheet" and a script tag
   for app.js

2. app.js - registers the Pro license, then creates a Jspreadsheet
   spreadsheet with these columns:
   - Description (text, 200px)
   - Category (dropdown, source: Food/Transport/Housing/Utilities/Entertainment/Other)
   - Amount (numeric, mask '$#,##0.00')
   - Date (calendar)
   - Notes (text, 180px)
   Add 5 sample expense rows and a totals row with =SUM on Amount.
   Set minDimensions to [5, 10].

3. style.css - center the spreadsheet, max-width 900px, light background

Cascade will create all three files in one step. This is its main advantage: it writes the HTML, JavaScript, and CSS together, so the imports, element IDs, and file references are consistent from the start.

The generated app.js should look like:

import jspreadsheet from 'jspreadsheet';
import 'jsuites';
import { LICENSE } from './config.js';

jspreadsheet.setLicense(LICENSE);

jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [5, 10],
        data: [
            ['Grocery run', 'Food', 87.50, '2026-04-01', 'Weekly shop'],
            ['Metro pass', 'Transport', 45.00, '2026-04-01', 'Monthly renewal'],
            ['Electric bill', 'Utilities', 112.30, '2026-04-03', 'March usage'],
            ['Movie tickets', 'Entertainment', 32.00, '2026-04-05', 'Weekend'],
            ['Coffee beans', 'Food', 18.75, '2026-04-06', 'Home office supply'],
            ['', '', '=SUM(C1:C5)', '', ''],
        ],
        columns: [
            { title: 'Description', type: 'text', width: 200 },
            { title: 'Category', type: 'dropdown', width: 150,
              source: ['Food', 'Transport', 'Housing', 'Utilities', 'Entertainment', 'Other'] },
            { title: 'Amount', type: 'numeric', width: 120, mask: '$#,##0.00' },
            { title: 'Date', type: 'calendar', width: 120 },
            { title: 'Notes', type: 'text', width: 180 },
        ],
    }],
});

Review the diffs in each file tab and accept the changes.

Step 3: Iterate with Cascade

Stay in Cascade for follow-up changes:

Add a summary worksheet:

Add a second worksheet tab called "Monthly Summary" to the existing
Jspreadsheet config. Column A should list each expense category.
Column B should use SUMIF formulas to total amounts from the first sheet.

Add interactivity:

Add an onchange event to the spreadsheet that highlights edited cells
with a light yellow background for 2 seconds after a change.

Add a toolbar:

Add a Jspreadsheet toolbar above the spreadsheet with undo, redo, and
save buttons. The save button should log the current data to console.

Cascade reads all your files before making edits, so it adds the second worksheet to your existing config array rather than overwriting app.js.

Tips for Windsurf + Jspreadsheet

Ask for multiple files at once. Cascade's strength is editing across files. When you need a new feature that touches HTML, JS, and CSS, describe all the changes in one prompt.

Use Cascade for generation, inline for tweaks. For small changes like adjusting a column width or adding a row of data, use Windsurf's inline completion (Tab) instead of opening Cascade. It is faster for one-line edits.

Specify the Jspreadsheet API pattern. If Cascade generates DOM manipulation code or React-style table components, redirect it: "Use the jspreadsheet() constructor with a worksheets config array."

Install the right packages. Jspreadsheet needs two npm packages: jspreadsheet and jsuites. If the spreadsheet renders but looks unstyled, check that both CSS files are imported. Keep your Pro license key in config.js and out of git.

Try It Yourself

npx @jspreadsheet/install

Open your project in Windsurf, hit Cmd+L, and describe what you need. Pro unlocks XLSX import/export, 500+ formulas, charts, and priority support — start a free 30-day trial below.

Related

• Build a Spreadsheet App with Bolt.new and Jspreadsheet
• Build a Spreadsheet App with Lovable and Jspreadsheet
• Build a Spreadsheet App with Cursor and Jspreadsheet
• CE vs Pro: Which Edition Do You Need?
• Build an AI Spreadsheet Agent