---
title: x-spreadsheet
pagination_prev: demos/frontend/index
pagination_next: demos/net/index
---
With a familiar UI, `x-spreadsheet` is an excellent choice for a modern editor.
[Click here for a live standalone integration demo.](pathname:///xspreadsheet/)
:::note Tested Deployments
This demo was last verified on 2024 April 25.
:::
## Live Demo
:::caution pass
Due to CSS conflicts between the data grid and the documentation generator,
features like scrolling may not work as expected.
[The standalone demo uses a simple HTML page.](pathname:///xspreadsheet/)
:::
```jsx live
function SheetJSXSpread() {
const [url, setUrl] = React.useState("https://docs.sheetjs.com/pres.numbers");
const [done, setDone] = React.useState(false);
const ref = React.useRef(); // ref to DIV container
const set_url = (evt) => setUrl(evt.target.value);
return ( <>
{!done && ( <>
URL:
)}
);
}
```
## Integration Library
The integration library can be downloaded from the SheetJS CDN:
- [Development Use](https://cdn.sheetjs.com/xspreadsheet/xlsxspread.js)
- [Production Use](https://cdn.sheetjs.com/xspreadsheet/xlsxspread.min.js)
When used in a browser tag, it exposes two functions: `xtos` and `stox`.
- `stox(worksheet)` returns a data structure suitable for `grid.loadData`
- `xtos(data)` accepts the result of `grid.getData` and generates a workbook
### Reading Data
The following snippet fetches a spreadsheet and loads the grid:
```js
(async() => {
const ab = await (await fetch("https://docs.sheetjs.com/pres.numbers")).arrayBuffer();
grid.loadData(stox(XLSX.read(ab)));
})();
```
The same pattern can be used in file input elements and other data sources.
### Writing Data
The following snippet exports the grid data to a file:
```js
/* build workbook from the grid data */
XLSX.writeFile(xtos(grid.getData()), "SheetJS.xlsx");
```
## Other Details
#### Obtaining the Library
The `x-data-spreadsheet` NodeJS packages include a minified script that can be
directly inserted as a script tag. The unpkg CDN also serves this script:
```html
```
#### Previewing and Editing Data
The HTML document needs a container element:
```html
```
Grid initialization is a one-liner:
```js
var grid = x_spreadsheet(document.getElementById("gridctr"));
```
`x-spreadsheet` handles the entire edit cycle. No intervention is necessary.
#### Additional Features
:::tip pass
This demo barely scratches the surface. The underlying grid component includes
many additional features that work with [SheetJS Pro](https://sheetjs.com/pro).
:::