Blogkeyboard_arrow_rightLovable jspreadsheet tutorial

Blog

Build a Spreadsheet App with Lovable and Jspreadsheet

Loveable lets you transform a text description into a fully functional, deployed web app. This guide shows you how to use it to build a spreadsheet application without having to write any code.

icon jspreadsheet

Published at 07/04/2026

Why Choose Lovable?

Essentially, Lovable works as a visual AI app builder. It involves you describing what you're looking for in chat, and then it generates the full application. It also lets you preview the result in just a couple of clicks.

That means no terminal, code editor, or npm commands, giving users the ability to set everything up, organize files, and get started easily. So, whether you're a founder building an MVP, a product manager, or simply a developer who wants to avoid a long, drawn-out setup process, Lovable gives you a working prototype at lightning speed.

In this tutorial, we show you how to use Lovable to build a spreadsheet app with Jspreadsheet.

Lovable L Lovable + New You Build an expense tracker using the jspreadsheet npm package Lovable I'll create an expense tracker with jspreadsheet. Setting up columns, formulas, dropdowns... Ask Lovable anything... Preview localhost:5173 ↻ Expense Tracker April 2026 Description Category Amount Groceries Food ▾ $85.50 Metro pass Transport ▾ $45.00 Electricity Utilities ▾ $120.00 Movie tickets Fun ▾ $32.00 Total $282.50 =SUM(C1:C4)

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 a New Project in Lovable

Go to lovable.dev and create a new project. You will see a chat interface where you describe what you want to build.

Type the first prompt:

Build a web app with a spreadsheet-based expense tracker.
Use the Jspreadsheet npm package (not a custom table, use the actual
Jspreadsheet library) with jsuites for the UI components.

The spreadsheet should have these columns:
- Description (text, 200px wide)
- Category (dropdown with options: Food, Transport, Housing,
  Utilities, Entertainment, Other)
- Amount (numeric, formatted as currency $#,##0.00)
- Date (calendar/date picker)
- Notes (text, 180px wide)

Include 5 sample expense rows with realistic data.
Add a totals row at the bottom with =SUM on the Amount column.
Set minDimensions to 5 columns and 10 rows.
Center the spreadsheet on the page with a clean, minimal design.

Lovable then sets about creating your project and setting it up so that everything works right. You should then see a live preview, but the main thing to keep in mind is that if you don't use the Jspreadsheet npm package by that name, it might mistakenly create a custom HTML table instead.

Step 2: Review and Refine

The preview you'll receive will show your spreadsheet running in the browser. You now need to check that:

  • Dropdowns open when you click the Category column
  • You see the date picker in the appropriate column
  • The SUM formula changes when you alter an amount value
  • You're seeing $ signs and decimals in the currency field

If anything looks out of line, you can tell the program about the fix in chat before Lovable deals with the affected files and gives you an updated preview:

The Amount column is not showing currency formatting.
Make sure it uses mask: '$#,##0.00' in the column definition.

Add a second worksheet tab called "Monthly Summary" with categories
in column A and SUMIF formulas in column B that reference the first sheet.

Lovable will then regenerate the affected files and update the preview.

Step 3: Customize the Layout

Once the spreadsheet works, use follow-up prompts to polish the app:

Add a header:

Add a page title "Expense Tracker" above the spreadsheet with a subtitle
showing the current month and year.

Add export functionality:

Add a button below the spreadsheet that downloads the data as a CSV file
using Jspreadsheet's built-in getData method.

Style it:

Use a white card container for the spreadsheet with a subtle box shadow.
Set the page background to #f8f9fa.

Each prompt builds on the current state. Lovable keeps the existing spreadsheet config intact and adds the new pieces around it.

Tips for Lovable + Jspreadsheet

Name the library you want to use explicitly. Lovable is compatible with a wide array of UI frameworks, so if you simply say "spreadsheet," there's a good chance it will build one from scratch using HTML tables. That's why you should always specify "use the Jspreadsheet npm package" in your prompts.

Only use Jspreadsheet terms to describe column types. For example, "Dropdown" needs to be set as type: 'dropdown' with a list of options, which also applies to the calendar field. These terms are specific for a reason, and using them correctly ensures the right setup is generated.

Check the code that's generated. Lovable gives you the source files it generates. When opening the file where Jspreadsheet is set up, make sure it's using the worksheets array:

jspreadsheet(element, {
    worksheets: [{
        data: [...],
        columns: [...],
    }],
});

If that's not the case and you just see a flat config, you need to wrap it in the worksheets array.

Start with CE and upgrade when needed. The Community Edition is more than capable of handling columns, basic formulae, dropdowns, and calendars. Should you need import/export XLSX files, validate data, or get access to 500+ formula functions, you can then upgrade to Jspreadsheet Pro. The great thing is that your code structure stays the same either way.

Deploy

Lovable can deploy your app directly. Click the deploy button in the Lovable interface, and your spreadsheet app gets a public URL. For production use, you can also export the code 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