Create a Browser-Based Spreadsheet: Libraries, Formulas, and Export

We have over 5 years of experience implementing spreadsheet components for dozens of clients, ensuring reliable and efficient solutions. Imagine developing a CRM where totals must be recalculated in real time for each row, and users copy data from Excel and paste it into a table. Spreadsheet is one of the most complex UI components: row virtualization, keyboard navigation, formulas, cell merging. Over five years, we've implemented dozens of such projects on React and Vue. In this article, we'll break down how to choose a ready-made library and integrate it with HyperFormula formulas to get a full Excel experience in the browser. Developing a spreadsheet from scratch can cost $10,000–$30,000, while integrating a ready-made solution starts from $1,000. The savings are clear. Our integration services start at $1,000, saving you up to $29,000 compared to custom development.

Advantages of Ready-Made Libraries Over Custom Development

A custom spreadsheet requires handling hundreds of edge cases: IME input, auto-filters, conditional formatting. Libraries like Handsontable and Fortune-Sheet have already been through that. For example, Handsontable contains over 300 API methods, and Fortune-Sheet has 200+ functions. Writing this from scratch takes 3–6 months of development. Integrating a ready-made solution takes 2–3 days. Moreover, popular libraries support virtualization: 10,000 rows render in 50 ms, which is 10 times faster than a naive implementation. According to Handsontable documentation, a commercial license starts at $149 per month, which pays back faster than developing your own solution.

Library Comparison: Which One Fits Your Project?

If you need complex formulas and Excel integration, the choice is Handsontable + HyperFormula. If your project is open source or has a limited budget, Fortune-Sheet gives you 80% of the functionality for free.

Integrating Formulas with HyperFormula

HyperFormula is an open-source formula engine (MIT) from the Handsontable team. It supports 386 functions, including VLOOKUP, SUMIF, DATE. Integration with Handsontable takes two days.

npm install hyperformula @handsontable/react @fortune-sheet/react xlsx 

import { HyperFormula } from 'hyperformula' import { HotTable } from '@handsontable/react' function SpreadsheetWithFormulas() { const hfInstance = HyperFormula.buildEmpty({ licenseKey: 'gpl-v3', }) return ( <HotTable formulas={{ engine: hfInstance, sheetName: 'Sheet1', }} data={[ ['Product', 'Quantity', 'Price', 'Total'], ['Product A', 10, 150, '=B2*C2'], ['Product B', 5, 300, '=B3*C3'], ['', '', 'Total:', '=SUM(D2:D3)'], ]} /> ) } 

Fortune-Sheet also supports formulas out of the box:

npm install @fortune-sheet/react 

import { Workbook } from '@fortune-sheet/react' import '@fortune-sheet/react/dist/index.css' function FortuneSpreadsheet() { const [sheets, setSheets] = useState([ { name: 'Sheet1', celldata: [ { r: 0, c: 0, v: { v: 'Product', m: 'Product', ct: { fa: 'General', t: 'g' } } }, { r: 0, c: 1, v: { v: 'Price', m: 'Price', ct: { fa: 'General', t: 'g' } } }, { r: 1, c: 0, v: { v: 'Coffee', m: 'Coffee' } }, { r: 1, c: 1, v: { v: 250, m: '250', ct: { fa: '#,##0.00', t: 'n' } } }, ], row: 100, column: 26, }, ]) return ( <div style={{ height: '600px' }}> <Workbook data={sheets} onChange={setSheets} showFormulaBar={true} showToolbar={true} lang="en" /> </div> ) } 

Exporting Data to Excel with SheetJS

We use the SheetJS library (xlsx). Export function for Handsontable:

import * as XLSX from 'xlsx' function exportToExcel(hot: Handsontable) { const data = hot.getData() const headers = hot.getColHeader() as string[] const ws = XLSX.utils.aoa_to_sheet([headers, ...data]) ws['!cols'] = headers.map(() => ({ wch: 20 })) const wb = XLSX.utils.book_new() XLSX.utils.book_append_sheet(wb, ws, 'Data') XLSX.writeFile(wb, `export-${new Date().toISOString().slice(0,10)}.xlsx`) } 

What's Included in the Implementation

1. Requirements analysis: formulas, data types, license restrictions (1 day).
2. Library selection and column configuration with validation (0.5 day).
3. Integration of HyperFormula or built-in formulas (2–3 days).
4. XLSX import/export via SheetJS (1 day).
5. API development for data persistence. Documentation and team training.

Our team guarantees a seamless integration with full support, and we have completed 30+ successful spreadsheet integrations.

When to Choose Virtual Scroll?

For tables with 10,000+ rows, definitely use virtualization. Handsontable and Fortune-Sheet support it out of the box, but you may need to configure viewport and renderAllRows: false. This speeds up rendering by 5–10 times.

Timeline: a basic editable table without formulas takes 2–3 days. A full spreadsheet with formulas and XLSX takes 5–7 days. Exact scope estimate is individual.

Cost and Solution Choice

A commercial Handsontable license costs from $149 per month—much better than investing 3–6 months in a custom component with the same capabilities. Fortune-Sheet (MIT) requires no license fees and is suitable for startups or internal tools with limited budgets. Integrating a ready-made library instead of building from scratch saves at least $1,500 upfront. For a corporate project needing formulas, 10,000+ rows, and Excel compatibility, Handsontable with HyperFormula delivers in 5–7 days. For a simple editable registry, Fortune-Sheet reduces the budget by 50–70%.

Get a consultation for your project — contact us. We'll help you choose the optimal solution and deploy it on time. Request a demo to see a working solution in action.