# Jspreadsheet CE: A Vanilla JavaScript Data Grid With Excel Controls

> Jspreadsheet CE is an MIT-licensed JavaScript spreadsheet component you drop into a div and configure with a worksheets array. It fits teams that need Excel-style editing without a framework runtime, and it is the wrong pick if you need a server-side data pipeline or a maintained release cadence.

**jspreadsheet/ce** — Jspreadsheet is a lightweight JavaScript data grid component for creating interactive data grids with advanced spreadsheet controls.

- Repository: https://github.com/jspreadsheet/ce
- Website: https://bossanova.uk/jspreadsheet/
- Stars: 7,231 · Forks: 891
- Language: JavaScript
- License: MIT
- Published: 2026-09-22 · Updated: 2026-09-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/jspreadsheet-ce

## The gap Jspreadsheet CE fills: Excel habits inside a plain web page

Most JavaScript data grids are built for read-heavy display. You hand them a large array, they virtualize rows, and the user scrolls. Editing is an afterthought bolted on with an input renderer. Jspreadsheet CE starts from the opposite end. The README describes it as an extensible framework for data-oriented interfaces with Excel-like controls, and the pitch is that users already know how to use a spreadsheet, so adoption is faster than teaching a bespoke form.

The README's use cases are concrete: an ERP inventory screen, a grade management system where teachers import and modify student data, a delivery route planning table, a lab data collection sheet with validation rules, and staff scheduling across retail locations. Those are all cases where a non-developer types into cells all day and expects copy and paste with standard spreadsheet shortcuts to work. The project targets that user, not a dashboard viewer.

It is a component, not an application. There is no backend, no storage layer and no opinion about where rows come from. You supply the data and you decide what happens when a cell changes. That is the whole contract, and it is why the library stays small enough to load from a CDN script tag.

## How the worksheets array maps onto the DOM

The mechanism visible in the README is a single factory function. You call jspreadsheet() with a DOM element and a configuration object whose worksheets key holds an array of sheet definitions. Each sheet carries a data array of rows and a columns array of column descriptors. The library renders a table inside the container and wires up keyboard handling, selection and cell editors on top of it.

Column type is the main extension point. The README's example declares text, dropdown, calendar, image, checkbox, numeric and color columns in one sheet. A dropdown column takes a source array of literal options. A numeric column takes a mask string and a decimal separator, so display formatting is a column property rather than something you write into every cell. A calendar column renders a date picker; an image column renders a thumbnail; a color column takes a render option of square.

The data model is row-oriented arrays, not objects with named fields. Column identity comes from position and from the title property. That keeps the payload compact and makes copy and paste from a real spreadsheet trivial, but it also means reordering columns in your configuration silently reassigns every value unless you move the data too. There is no schema binding to catch that for you.

Version 5 restructured this. The changelog states that 5.0.0 brought separation of spreadsheet and worksheets, new worksheet methods and events, dedicated React and Vue wrappers, and a Webpack-based build. So the container object and the sheet object are now distinct levels in the API, which matters when you write event handlers: the changelog notes that worksheet events are now tabbed.

## Installing Jspreadsheet CE from npm or the CDN

The README gives two installation paths. The npm package is named jspreadsheet-ce. The CDN path pulls four files: the Jspreadsheet script and stylesheet plus the Jsuites script and stylesheet, because Jsuites provides the underlying input widgets. Both jspreadsheet-ce and jsuites appear in the package.json dependencies, with jsuites pinned to a caret range starting at 5.12.0.

For a bundler-based project, install the package first.

```bash
npm install jspreadsheet-ce
```

The README does not show the import statement for the npm path, so check the dist folder for the entry point your bundler should resolve. For a plain HTML page, the README's CDN block is explicit about the four tags and their order.

```html
<script src="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/jspreadsheet.min.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.css" type="text/css" />
```

Then place a container element and initialize it. The README uses a div with the id spreadsheet.

```html
<div id="spreadsheet"></div>
```

The initialization call takes the element and the worksheets array. This is the README's own example, trimmed to two columns.

```javascript
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [
        {
            data: [
                ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
                ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
            ],
            columns: [
                { type: 'text', title: 'Car', width: 120 },
                { type: 'dropdown', title: 'Make', width: 200, source: ['Alfa Romeo', 'Audi', 'Bmw', 'Honda'] },
            ],
        },
    ],
});
```

Serve the file and the README says you get the rendered table in the browser, with a screenshot at docs/sampleTable.png as the expected result. If you are working inside the repository rather than consuming the package, the Development section lists two scripts: npm run build to produce the package and npm run start to bring up a web service.

## Where Jspreadsheet CE stops being the right tool

The README makes no claims about virtualized rendering, row counts or performance. Treat that silence as a boundary rather than an oversight you can design around. A spreadsheet control that renders editable cells and keeps selection state has a different cost profile from a grid that recycles a fixed pool of DOM nodes. If your requirement is a hundred thousand rows scrolled at 60 frames per second, this is not the component the documentation describes, and nothing in the README promises it.

The row-array data model is the second constraint. Because cells are addressed positionally, any transformation you apply to the data has to be mirrored in the columns array, and vice versa. Column dragging is listed among the examples, which means users can change the visual order at runtime; you need to decide whether your save path reads the visual order or the original one. The README does not document how a reordered column maps back to your storage, so that is a question for the examples page, not for the front page.

Third, the release history is thin. The listed releases are 4.15.0 on 2024-12-18, v4.13.1 on 2023-05-21 and v4.6.0 on 2021-02-14. The repository's last push was on 2026-09-21, so commits are landing, but tagged releases are sparse. If your procurement process requires a version number published in the last quarter, the tag list will not satisfy it even though the branch is moving. Note also that the README's title says v5 while the newest tagged release is 4.15.0, and the changelog's 5.0.0 entry links to an upgrade guide. Confirm which line the package you install actually resolves to before you build against either API.

## Jspreadsheet CE against Jspreadsheet Pro, and against building it yourself

The README itself points to Jspreadsheet Pro as the enterprise solution, with a separate site and a React server-side spreadsheet repository. That is the most honest comparison available, because it comes from the project rather than from a third party. The difference in approach is commercial rather than technical: CE is MIT-licensed and distributed through npm and a CDN, while Pro is the paid product the same authors sell. The README does not enumerate which features sit behind that line, so anyone weighing the two should read the Pro site rather than assume CE is a subset with a known boundary.

Against a general-purpose grid library, the difference is where the complexity lives. A typical grid asks you to define a column schema and a cell renderer, and gives you virtualization and sorting as core features. Jspreadsheet CE asks you to define a worksheets array and gives you editors, formulas and clipboard behaviour as core features. The formula engine is a separate dependency, @jspreadsheet/formula, which the changelog ties to custom helpers such as =PROGRESS, =RATING, =COLUMN, =ROW, =CELL, =TABLE and =VALUE. If your users type formulas, that is the feature you are buying. If your users only read and filter, you are paying for spreadsheet semantics you will never exercise.

Against a full spreadsheet embedding, the difference is scope. Jspreadsheet CE is a component you place in your own page and style with your own CSS, not a document format with its own file model. It does not claim to open .xlsx files. It claims Excel-compatible copy and paste, which is a clipboard behaviour, not a parser.

## Licence, upgrade cost and what a version bump actually touches

The licence is MIT, stated in package.json and in the repository's LICENSE file. That permits commercial use and modification with attribution, and it places no obligation on you to publish your changes. This is not legal advice; read the LICENSE file and your own counsel's guidance before shipping.

The upgrade cost is real and the changelog documents it. The 4.6.0 entry records the rename from Jexcel to Jspreadsheet, which means older code and older tutorials use a different global name and a different package name. The 5.0.0 entry records a structural split between the spreadsheet object and worksheet objects, plus new worksheet methods and events. Code written against the flat v4 API will not carry over unchanged, which is exactly why the changelog links to a dedicated upgrade-from-v4-to-v5 page.

The dependency surface is small: two runtime dependencies, @jspreadsheet/formula and jsuites, both caret-ranged. A caret range on jsuites means a minor release can change the widget layer under you. If you pin versions in your lockfile, that is contained. If you load the CDN tags from the README, you are always on the latest published build of both libraries, and you get whatever changed since your last deploy.

The repository's own tooling is conventional for a modern JavaScript package: webpack.config.js, build.cjs, eslint.config.mjs, a prettier config, and a mocha.config.js with tests under test/. That layout suggests a maintainable codebase, but the README does not describe a support policy, a deprecation window or a compatibility guarantee between minor versions.

## Conclusion

Adopt Jspreadsheet CE if you want an Excel-like editable grid in plain JavaScript, with React or Vue wrappers available, and you accept that the newest tagged release is 4.15.0 from 2024-12-18 while the README documents a v5 architecture. Do not adopt it if your grid must load and sort millions of rows, or if you need a support contract and a predictable release train, since those are the territory of Jspreadsheet Pro. Before writing code, open the upgrade-from-v4-to-v5 page and confirm which major line the npm package resolves to, because the README's headline says v5 while the release list stops at 4.15.0.

## FAQ

### Can I use JavaScript in Excel?

Jspreadsheet CE is not an Excel add-in; it is a JavaScript component that runs in a web page and provides Excel-like controls inside your own application. The README positions it as bringing familiar spreadsheet features to your interface, with Excel-compatible copy and paste using standard shortcuts.

### What is the best JavaScript spreadsheet library?

The README does not rank libraries, so the useful comparison is the one it does make: Jspreadsheet CE is the MIT-licensed community edition, while Jspreadsheet Pro is described as the enterprise solution with its own site and a React server-side spreadsheet repository. The README does not list which features sit on the Pro side of that line.

### What is a Jspreadsheet CE alternative?

The README points to Jspreadsheet Pro as the enterprise option from the same authors, and to a separate React server-side spreadsheet repository. Beyond that it names no third-party alternatives, so anyone comparing should look at the Pro feature list rather than expect a comparison table in the CE documentation.

## Sources

- [jspreadsheet/ce on GitHub](https://github.com/jspreadsheet/ce)
- [License: MIT](https://github.com/jspreadsheet/ce/blob/master/LICENSE)
- [Project website](https://bossanova.uk/jspreadsheet/)
- [README](https://github.com/jspreadsheet/ce/blob/master/README.md)
- [Releases](https://github.com/jspreadsheet/ce/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/jspreadsheet-ce