---
title: "Get started with spreadsheets in Document Authoring"
canonical_url: "https://www.nutrient.io/guides/document-authoring/spreadsheets/getting-started/"
md_url: "https://www.nutrient.io/guides/document-authoring/spreadsheets/getting-started.md"
last_updated: "2026-10-14T00:00:00.000Z"
description: "Add a Document Authoring spreadsheet editor to a webpage."
---

# Get started with spreadsheets

This guide shows how to add the spreadsheet editor to a webpage.

Before you start, install Document Authoring in your app, because the spreadsheet editor uses the same package and system as the document editor. For setup instructions, refer to the [npm](https://www.nutrient.io/sdk/document-authoring/getting-started/using-npm.md), [Vite](https://www.nutrient.io/sdk/document-authoring/getting-started/using-vite.md), or [content delivery network (CDN)](https://www.nutrient.io/sdk/document-authoring/getting-started/using-cdn.md) getting started guide.

## Add the editor

Use these steps to create a spreadsheet editor and display a spreadsheet.

1. Add an empty `<div>` with a non-`static` `position`, a defined `width`, and a defined `height`. The editor fills this element and removes its contents:

   ```html

   <div id="editor" style="position: relative; width: 100%; height: 600px;"></div>
   ```

2. Create a system. Then call [`createSpreadsheetEditor()`](https://www.nutrient.io/api/document-authoring/types/docauthsystem/#createspreadsheeteditor) with the target element:

   ```js

   import DocAuth from '@nutrient-sdk/document-authoring';

   const system = await DocAuth.createDocAuthSystem();

   const editor = await system.createSpreadsheetEditor(document.getElementById('editor'), {
     spreadsheet: await system.createSpreadsheetFromPlaintext('Hello, world!'),
   });
   ```

   The editor opens with one sheet and `Hello, world!` in cell A1. If you omit the `spreadsheet` option, the editor opens a blank spreadsheet.

## Next steps

**[Import and load](https://www.nutrient.io/guides/document-authoring/spreadsheets/import-and-load.md)**\
Open XLSX files and saved spreadsheets, with progress and cancellation.

**[Save and export](https://www.nutrient.io/guides/document-authoring/spreadsheets/save-and-export.md)**\
Store spreadsheets as SheetJSON, and export XLSX and PDF.

**[Editor](https://www.nutrient.io/guides/document-authoring/spreadsheets/editor.md)**\
Learn what the editor includes and how to switch spreadsheets or remove the editor.
---

## Related pages

- [Spreadsheets](/guides/document-authoring/spreadsheets.md)
- [Spreadsheet editor](/guides/document-authoring/spreadsheets/editor.md)
- [Spreadsheet formulas](/guides/document-authoring/spreadsheets/formulas.md)
- [Import and load spreadsheets](/guides/document-authoring/spreadsheets/import-and-load.md)
- [Spreadsheets in Node.js](/guides/document-authoring/spreadsheets/nodejs.md)
- [Save and export spreadsheets](/guides/document-authoring/spreadsheets/save-and-export.md)
- [Spreadsheet JSON support with SheetJSON](/guides/document-authoring/spreadsheets/sheetjson.md)