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, Vite, or content delivery network (CDN) 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:

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

2. Create a system. Then call createSpreadsheetEditor() with the target element:

   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
Open XLSX files and saved spreadsheets, with progress and cancellation.

Save and export
Store spreadsheets as SheetJSON, and export XLSX and PDF.

Editor
Learn what the editor includes and how to switch spreadsheets or remove the editor.