Learn to Create a Spreadsheet App using Cursor and Jspreadsheet
Cursor represents the most-used AI code editor available. Here, we show how you can use it to create a working spreadsheet application in just a few minutes.
Published at 05/05/2026
Why Use Cursor for Your Spreadsheet Apps?
Cursor operates over the top of VS Code, meaning that everything familiar about your editor will still work as you know it.
However, you will notice a difference when using the Composer and Tab: you ask for what you need in plain English, the cursor writes the code, and you either accept or reject the changes it puts forward. When you're creating spreadsheet interfaces, you go from "I need an expense tracker with formulas" to being able to work code without having to leave your editor.
In this tutorial, we use Jspreadsheet CE, the completely free MIT-licensed "community edition". That means you won't need an account or a license key, and there are no trial limits to contend with.
What You Will Build
This step-by-step guide will allow you to create 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: Open Your Project in Cursor
The first thing you'll do is create a folder and open it in Cursor:
mkdir expense-tracker && cd expense-tracker
npm init -y
npx @jspreadsheet/install
Open the folder in Cursor. Press Cmd+I (Mac) or Ctrl+I (Windows/Linux) to open Composer.
Step 2: Use Composer to Generate the Spreadsheet
Next, type this into the Cursor's Composer panel:
Create an index.html file that loads jspreadsheet and jsuites from the
node_modules folder. Create an app.js file with a Jspreadsheet spreadsheet
that has these columns:
- Description (text, 200px wide)
- Category (dropdown: Food, Transport, Housing, Utilities, Entertainment, Other)
- Amount (numeric, currency format $#,##0.00)
- Date (calendar type)
- Notes (text, 180px wide)
Add 5 realistic sample expense rows and a totals row that uses =SUM on
the Amount column. Set minDimensions to 5 columns and 10 rows.
The cursor will then generate both files. Then you should review the diff in the editor and click "Accept All" or step through each change.
You should get something like this in app.js:
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 },
],
}],
});
Open index.html in a browser. Working on a spreadsheet, formulas, and all.
Step 3: Iterate with Tab and Composer
This is where Cursor really comes into its own. You can keep using Composer for bigger changes, or use Tab completion for quick edits.
Add styling with Composer:
Add a style.css file. Center the spreadsheet on the page with max-width
900px, add padding, and set the background to #f5f5f5.
Add a second worksheet:
Add a second worksheet tab called "Monthly Summary". In column A list each
expense category. In column B use SUMIF to total amounts from the first
sheet for each category.
Quick edits with Tab: Start typing a new column definition in app.js and let Cursor's Tab autocomplete finish it based on the pattern it sees in your existing columns.
Step 4: Add a .cursorrules File
If you're looking for better results across your project, try adding a .cursorrules file at the root:
This project uses Jspreadsheet CE (jspreadsheet npm package) for
spreadsheet components.
Key patterns:
- Spreadsheets are created with jspreadsheet(element, { worksheets: [...] })
- Column types: text, numeric, dropdown, calendar, checkbox, color, image
- Dropdowns use a "source" array property
- Formulas go in the data array as strings starting with "="
- Number formatting uses "mask" property (e.g., "$#,##0.00")
- Cross-sheet references use SheetName!CellRef syntax
- Always load both jspreadsheet and jsuites CSS/JS
With this file in place, every Composer prompt and Tab completion in the project will have Jspreadsheet context. This will stop AI from having to guess, so it can start generating correct column types, formula syntax, and configuration patterns the first time of asking.
Tips for Cursor + Jspreadsheet
Use Composer for new features, Tab for edits. Composer is better for generating entire configurations from scratch. Tab is faster for adding one more column or tweaking a property.
Reference your existing code. In Composer, you can tag files with @app.js to tell Cursor to read your current config before generating any changes. This prevents it from overwriting your data or column setup.
Ask for the configuration object, not the DOM code. Should Cursor begin generating document.createElement calls or complex DOM manipulation, redirect it: "Use the Jspreadsheet configuration object pattern, not DOM manipulation."
Keep it in one file for prototyping. Jspreadsheet configs are self-contained. One file with your data, columns, and options is easier for the AI to work with than spreading config across modules.
Try It Yourself
That's the end of our tutorial, so why not give it a go yourself?
npx @jspreadsheet/install
Just open the project in Cursor, hit Cmd+I, and describe what you want. Remember, the Community Edition is free and MIT-licensed, so you can experiment as much as you like.
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.