Building a Spreadsheet App Using Jspreadsheet and Claude Code
Claude Code operates inside your terminal, allowing it to write code directly into your project. In this guide, we look at how to create a spreadsheet app without laying a finger on your editor.
Published at 30/04/2026
Why Use Claude Code?
Anthropic's terminal-first coding tool comes in the form of Claude Code, and it's feature-packed. Running in your project directory, it lets you describe what's needed, while it can also write code, run commands, and read your files. There's no need for an in-depth explanation to get started.
Possessing a 1M-token context window allows it to house your whole project in memory at once. That really matters to people who create complex spreadsheet configurations, work with multiple worksheets, and use multi-sheet formulas.
In this tutorial, we'll use Jspreadsheet CE, MIT's free, open-source edition. As such, there's no license or Jspreadsheet account needed to follow along.
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: Start Claude Code in Your Project
Create a project folder and launch Claude Code:
mkdir expense-tracker && cd expense-tracker
claude
Claude Code now has access to your project directory. Everything you ask it to do happens in this folder.
Step 2: Describe the Full App in One Prompt
Claude Code is more than capable of handling long, detailed prompts. Give it the full picture:
Set up a new JavaScript project with npm. Run npx @jspreadsheet/install to set up Jspreadsheet.
Create an index.html that loads both libraries and a separate app.js file.
In app.js, create a Jspreadsheet spreadsheet with these columns:
- Description (text, 200px)
- Category (dropdown with Food, Transport, Housing, Utilities, Entertainment, Other)
- Amount (numeric, formatted as $#,##0.00)
- Date (calendar type)
- Notes (text, 180px)
Add 5 sample expense rows with realistic data.
Add a totals row at the bottom that sums the Amount column using =SUM.
Set minDimensions to 5 columns and 10 rows.
Claude Code will run npm init, install the packages, and create both files. It writes directly to disk, so when it finishes, your files are ready. Open index.html in a browser, and you have a working expense tracker.
The generated app.js will look something like:
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 },
],
}],
});
Step 3: Iterate from the Terminal
You're able to remain inside Claude Code and continue to prompt, with each new request building on what you already have in your files:
Add styling:
Create a style.css file. Center the spreadsheet with max-width 900px,
add padding, and set a light gray background. Link it in index.html.
Add a summary worksheet:
Add a second worksheet called "Monthly Summary" with expense categories
in column A and SUMIF formulas in column B that total amounts from
the first sheet per category.
Add persistence:
Add an onchange event handler that logs changed cells to the console.
Show the row, column, old value, and new value.
Before making any changes, Claude Code goes in and reads your files, allowing it to add your new worksheet to your current setup rather than overwriting it.
Step 4: Add a CLAUDE.md for Project Context
Create a CLAUDE.md file at your project root to give Claude Code permanent context about your spreadsheet setup:
# Expense Tracker
This project uses Jspreadsheet CE (npm: jspreadsheet) for the
spreadsheet component.
## Key patterns
- Spreadsheets use jspreadsheet(element, { worksheets: [...] })
- Column types: text, numeric, dropdown, calendar, checkbox, color, image
- Dropdowns need a "source" array
- Formulas are strings starting with "=" in the data array
- Number formatting uses the "mask" property
- Cross-sheet references: SheetName!CellRef
- Always include both jspreadsheet and jsuites CSS/JS
## Files
- index.html: Entry point, loads libraries
- app.js: Spreadsheet configuration and initialization
- style.css: Layout and styling
Whenever a session begins, Claude checks this file. This happens automatically. What it means is that it remembers things like your library choice, so you won't have to start from scratch each time you start a conversation.
Tips for Claude Code + Jspreadsheet
Offer full context in one prompt. Claude Code provides a large context window, giving you the space to describe a multi-sheet spreadsheet, complete with formulae, validations, and events, in a single message. It works better this way, rather than breaking it up into five small prompts.
Let it run commands. Claude Code can run npm install, create files, and open them. This means there's no need to open another terminal window for the setup steps.
Ask it to read before editing. If your config has grown complex, start with "Read app.js and then add a new worksheet" instead of just "Add a new worksheet." This ensures it works with your current state.
Use the conversation history. Claude Code remembers everything in the current session. You can say "Make the same change to the summary sheet" and it knows what you mean.
Try It Yourself
npx @jspreadsheet/install
claude
Describe what you want. Claude Code writes it. The Community Edition is free, MIT-licensed, and works out of the box.
Need More Than CE?
Pro and Enterprise editions add XLSX import/export, data validation, 500+ formulas, collaboration, and priority support. Start a free 30-day trial.