Blog

What We'll Help You Build

An expense tracker in your browser that has:

• Description, amount, date, and category cells you can edit
• A SUM formula that lets you total everything automatically
• Date pickers and currency formatting
• Drop-down expense categories

Step 1: Open Up Bolt.new and Describe Your App

Head to bolt.new and you'll see an input prompt. Type:

Create a vanilla JavaScript app with an expense tracker spreadsheet.
Use the jspreadsheet npm package and jsuites for components.
Do not build a custom table from scratch - use the jspreadsheet library.

The spreadsheet needs these columns:
- Description (text type, 200px wide)
- Category (dropdown type with source array: Food, Transport, Housing,
  Utilities, Entertainment, Other)
- Amount (numeric type, mask '$#,##0.00')
- Date (calendar type)
- Notes (text type, 180px wide)

Add 5 sample expense rows with realistic data.
Add a totals row using =SUM(C1:C5) for the Amount column.
Set minDimensions to [5, 10].
Center everything on the page with clean styling.

Bolt will start by scaffolding the project before it installs jspreadsheet and jsuites via npm in your browser. You'll also see a preview of the running app, with the whole thing taking less than a minute.

Step 2: Check Your Preview

The preview pane sits on the right and displays your spreadsheet running live. Check that:

• You're able to click on cells and edit them
• The Category column gives you a dropdown
• You get a calendar picker in the Date column
• Altering an Amount value updates the SUM field in the totals row
• Currency shows as $ and two decimal places

If you're getting errors or a blank page in the preview, check Bolt's terminal output at the bottom for common issues like:

• Both libraries (jspreadsheet and jsuites CSS) not being loaded
• The AI creating a custom HTML table rather than using the jspreadsheet library

You can fix either by prompting:

The spreadsheet is not rendering. Make sure both jspreadsheet and jsuites
CSS files are imported. The jspreadsheet call should use the worksheets
array pattern.

Step 3: Add Features Via Chat

Carry on the conversation via Bolt's chat:

Add a second worksheet:

Add a second worksheet tab called "Summary" that lists each expense
category in column A and uses SUMIF to total amounts per category
from the first sheet in column B.

Add a download button:

Add a button that exports the spreadsheet data as CSV.
Use jspreadsheet's getData() method to get the values.

Improve the layout:

Put the spreadsheet inside a white card with rounded corners and a
subtle shadow. Add a title "Expense Tracker" above it.

Bolt will only redo the affected files, then automatically preview the updates. Look to the left, and you'll be able to see every file it's created or changed in the file explorer.

Tips for Bolt.new + Jspreadsheet

Be explicit about the library. Bolt's AI can build tables from scratch, but that's not what you want. That's why it's always a good idea to say "use the Jspreadsheet Pro npm package" and "do not build a custom table."

Use vanilla JS for simplicity. While Bolt supports React, Vue, and other frameworks, a vanilla JavaScript setup typically gives you the most predictable results with Jspreadsheet. The configuration pattern is the same across frameworks.

Check the imports. Jspreadsheet needs four files loaded: the jspreadsheet JS and CSS, plus the jsuites JS and CSS. If the AI has missed even one of them, the spreadsheet will either not render or look unstyled. A correct import looks like:

import jspreadsheet from 'jspreadsheet';
import 'jspreadsheet/dist/jspreadsheet.css';
import 'jsuites/dist/jsuites.css';
import jSuites from 'jsuites';

Start simple, add complexity later. Get the basic spreadsheet working first, then layer in Pro features like XLSX import/export, SUMIFS, and data validation through follow-up prompts. Bolt handles incremental changes better than trying to get everything perfect in one shot. Full feature breakdown on the Jspreadsheet Pro page.

Deploy

Bolt can deploy your app directly. Click deploy in the Bolt interface and your spreadsheet app gets a public URL via Netlify. For production use, you can also download the project as a zip or push it to GitHub and deploy it to any hosting service that supports static sites.

Try It Yourself

If you want to run it locally instead:

npx @jspreadsheet/install

Related

• Unravelling the Power of Jspreadsheet
• Excel-Like Formulas on HTML Forms
• CE vs Pro: Which Edition Do You Need?
• Open Source JavaScript Spreadsheet