# Getting Started

## Content

## System Requirements

SpreadJS widget requires one of the following browsers:

* Microsoft IE9+
* Mozilla FireFox
* Safari
* Google Chrome

The browser must support HTML5.
The client-side Excel import and export requires IE10+.

> **Note:** SpreadJS also supports Windows 11 and Windows Server 2022.

## Download and Installation

### Using Bundles

* [Download ](https://developer.mescius.com/spreadjs/download/)the ZIP file (SpreadJS.xxxx.zip) and the save it to a temporary directory on your system, and then unzip the files to a directory.

The default SpreadJS folders (Windows only):

| **Install Directory** | **Files** | **Description** |
| ----------------- | ----- | ----------- |
| \\SpreadJS.xxxx | LICENSE<br>SPREADJS\_EULA | Main directory for product |
| \\SpreadJS.xxxx\\css | gc.spread.sheets.x.x.x.css<br>gc.spread.sheets.excel2013darkGray.xxxx.css<br>gc.spread.sheets.excel2013lightGray.xxxx.css<br>gc.spread.sheets.excel2013white.xxxx.css<br>gc.spread.sheets.excel2016black.xxxx.css<br>gc.spread.sheets.excel2016colorful.xxxx.css<br>gc.spread.sheets.excel2016darkGray.xxxx.css | CSS files |
| \\SpreadJS.xxxx\\definition | GC.spread.sheets.d.ts<br>gc.spread.excelio.d.ts | TypeScript API definition file |
| \\SpreadJS.xxxx\\samples |  | Sample pages for the widget |
| \\SpreadJS.xxxx\\scripts | gc.spread.sheets.all.xxxx.min.js | Minimized js file for widget which includes all functions without plugins. |
| \\SpreadJS.xxxx\\scripts\\modules | gc.data.xxxx.min.js<br>gc.spread.calcengine.xxxx.min.js<br>gc.spread.calcengine.advancedfunctions.xxxx.min.js<br>gc.spread.calcengine.basicfunctions.xxxx.min.js<br>gc.spread.common.xxxx.min.js<br>gc.spread.sheets.automerge.xxxx.min.js<br>gc.spread.sheets.bindings.xxxx.min.js<br>gc.spread.sheets.calcengine.xxxx.min.js<br>gc.spread.sheets.cellstate.xxxx.min.js<br>gc.spread.sheets.celltypes.xxxx.min.js<br>gc.spread.sheets.comments.xxxx.min.js<br>gc.spread.sheets.conditionalformatting.xxxx.min.js<br>gc.spread.sheets.contextmenu.xxxx.min.js<br>gc.spread.sheets.core.xxxx.min.js<br>gc.spread.sheets.datavalidation.xxxx.min.js<br>gc.spread.sheets.dragmerge.xxxx.min.js<br>gc.spread.sheets.fill.xxxx.min.js<br>gc.spread.sheets.filter.xxxx.min.js<br>gc.spread.sheets.floatingobjects.xxxx.min.js<br>gc.spread.sheets.formulatextbox.xxxx.min.js<br>gc.spread.sheets.hyperlink.xxxx.min.js<br>gc.spread.sheets.namebox.xxxx.min.js<br>gc.spread.sheets.outlinecolumn.xxxx.min.js<br>gc.spread.sheets.outlines.xxxx.min.js<br>gc.spread.sheets.search.xxxx.min.js<br>gc.spread.sheets.sparklines.xxxx.min.js<br>gc.spread.sheets.statusbar.xxxx.min.js<br>gc.spread.sheets.tables.xxxx.min.js<br>gc.spread.sheets.touch.xxxx.min.js | modules js files |
| \\SpreadJS.xxxx\\scripts\\interop | gc.spread.excelio.xxxx.min.js | Client-side Excel import and export support files |
| \\SpreadJS.xxxx\\scripts\\interop\\angularjs | gc.spread.sheets.angularjs.xxxxx.min.js | AngularJS support files |
| \\SpreadJS.xxxx\\scripts\\interop\\angular | gc.spread.sheets.angular.xxxxx.min.js | Angular support files |
| \\SpreadJS.xxxx\\scripts\\interop\\react | gc.spread.sheets.react.xxxxx.min.js | React support file |
| \\SpreadJS.xxxx\\scripts\\interop\\vuejs | gc.spread.sheets.vue.xxxxx.min.js | Vue support file |
| \\SpreadJS.xxxx\\scripts\\resources | ja\\gc.spread.sheets.resources.ja.xxxxx.min.js<br>zh\\gc.spread.sheets.resources.zh.xxxx.min.js<br>ko\\gc.spread.sheets.resources.ko.xxxx.min.js | Japanese, Chinese, and Korean resource files |
| \\SpreadJS.xxxx\\scripts\\plugins | gc.spread.pivot.pivottables.xxxxx.min.js<br>gc.spread.sheets.barcode.xxxxx.min.js<br>gc.spread.sheets.charts.xxxxx.min.js<br>gc.spread.sheets.pdf.xxxxx.min.js<br>gc.spread.sheets.print.xxxxx.min.js<br>gc.spread.sheets.shapes.xxxxx.min.js<br>gc.spread.sheets.tablesheet.xxxxx.min.js<br>gc.spread.calcengine.languagepackages.xxxx.min.js<br>gc.spread.sheets.io.xxxx.min.js<br>gc.spread.sheets.slicers.xxxx.min.js | The Barcode, Chart, Pivot Table, Print, Shapes, TableSheet, CalcEngine and Client-side PDF export plugins files. |

**Install SpreadJS Designer**

1. Save the downloaded ZIP file (SpreadJSDesigner.zip) to a temporary directory on your system, and then unzip the files to a directory.
2. Run the setup file for your environment.
3. Run the designer, select the lock icon, and enter your license key to unlock the SpreadJS Designer.

| **Platform** | **Setup** |
| -------- | ----- |
| Windows | SpreadJS-Designer.x.x.x.exe |
| Mac | SpreadJS-Designer.x.x.x.dmg |
| Linux | SpreadJS-Designer.x.x.x.AppImage |

The default SpreadJS designer folder:

| **Install Directory** | **Description** |
| ----------------- | ----------- |
| %Program Files (x86)%\\GrapeCity\\SpreadJS Designer\\x.x.x | Designer directory for product |

Refer to [Trial Version and Licensing Information](/spreadjs/docs/v16/getstarted/trial_SpreadJS) for licensing information.

### Using NPM

To install SpreadJS packages using NPM, you must install Node.js and the npm command line interface using a Node installer or a Node version manager.
To learn how to get started with Node.js and npm command line interface, see [npm Docs](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
You can download the SpreadJS packages from NPM:

| Package | Purpose |
| ------- | ------- |
| [Spreadsheet](https://www.npmjs.com/package/@grapecity/spread-sheets) | Spreadsheet package |
| [SpreadJS Designer ](https://www.npmjs.com/package/@grapecity/spread-sheets-designer) | Spreadsheet designer component |
| [Shape Plugin](https://www.npmjs.com/package/@grapecity/spread-sheets-shapes) | Shape add-on for SpreadJS |
| [TableSheet Plugin](https://www.npmjs.com/package/@grapecity/spread-sheets-tablesheet) | TableSheet add-on for SpreadJS |
| [Client-side Excel IO](https://www.npmjs.com/package/@grapecity/spread-excelio) | SpreadJS package for Excel I/O operations |
| [SpreadJS CalcEngine](https://www.npmjs.com/package/@grapecity/spread-sheets-languagepackages) | Calculation engine support for SpreadJS |
| [Chart Plugin](https://www.npmjs.com/package/@grapecity/spread-sheets-charts) | Chart add-on for SpreadJS |
| [BarCode Plugin](https://www.npmjs.com/package/@grapecity/spread-sheets-barcode) | Barcode support for SpreadJS |
| [Pivot Plugin](https://www.npmjs.com/package/@grapecity/spread-sheets-pivot-addon) | Pivot support for SpreadJS |
| [PDF Plugin](https://www.npmjs.com/package/@grapecity/spread-sheets-pdf) | PDF export support for SpreadJS |
| [Print Plugin](https://www.npmjs.com/package/@grapecity/spread-sheets-print) | Print support for SpreadJS |
| [SpreadJS IO Plugin](https://www.npmjs.com/package/@grapecity/spread-sheets-io) | Support for I/O operations in SpreadJS |
| [SpreadJS React](https://www.npmjs.com/package/@grapecity/spread-sheets-designer-react) | SpreadJS Designer Component for React framework |
| [SpreadJS Vue](https://www.npmjs.com/package/@grapecity/spread-sheets-designer-vue) | SpreadJS Designer Wrapper Components for Vue framework |
| [SpreadJS Angular](https://www.npmjs.com/package/@grapecity/spread-sheets-angular) | SpreadJS Wrapper Components for Angular framework |