Quick Start (Vanilla)
New Project
The fastest way to get started with SheetXL is using our project wizard. It will create a new project with SheetXL pre-configured and ready to use.
- pnpm
- yarn
- npm
pnpm create sheetxl
yarn create sheetxl
npx create-sheetxl
...and follow the interactive prompts.
Existing Project
SheetXL Vanilla provides an easy way to embed powerful spreadsheet components into any web page.
This guide will get you started in about 1 minute.
The recommended approach uses our self-initializing embed script, which requires no JavaScript knowledge.
Installation
You can add SheetXL to your project either by using our CDN for a quick setup or by installing it from npm for use with a bundler like Vite or Webpack.
- Script Tag (HTML Only)
- ESM Script (Javascript options)
- Bundler (Full API Access)
For traditional HTML pages, you can use the <script> tag to include SheetXL. This method is straightforward
and requires no additional JavaScript or CSS setup.
The HTML
A <div> with an id and a <script>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>SheetXL Demo</title>
</head>
<body>
<div id="sheetxl" style="height: 600px; width: 100%;"></div>
<script
src="https://unpkg.com/@sheetxl/studio-vanilla/cdn/loader.js"
data-target="#sheetxl"
data-license-key="YOUR_LICENSE_KEY_HERE"
defer>
</script>
</body>
</html>
Pass Configuration (Optional)
Pass any option to the workbook by adding it as a data-* attribute to the <script> tag.
- Naming: Attributes are written in kebab-case (
data-auto-focus) and are automatically converted to the camelCase props (autoFocus) your component expects. - Example: To enable autoFocus, add
data-auto-focus="true".
This method gives you precise control over when and how the workbook is created using JavaScript. It's useful if you need to wait for other events or pass complex props programmatically.
This approach requires no install but gives you programmatic access to the workbook. To get started,
just add a <div> container and our embed script to your HTML page.
The Javascript
This belongs inside of an <script type="module"> tag in your html.
try {
// import the library from unpkg or your preferred CDN
const module = await import('https://unpkg.com/@sheetxl/studio-vanilla');
if (!module.SheetXL) {
throw new Error('SheetXL module not found in the imported package');
}
// create a workbook element
const workbookElement await module.SheetXL.attachStudio('#sheetxl', {
licenseKey: 'visit https://my.sheetxl.com to generate a license key.',
// pass any additional properties here
});
// you can interact with the workbookElement
} catch (err) {
// only needed to catch cdn error. SheetXL will handle the rest
document.getElementById('sheetxl-container').innerText = err.message ?? `Error loading SheetXL.`;
}
Click to see the full HTML File if you don't have one
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>SheetXL Demo</title>
</head>
<body>
<div id="sheetxl-container" style="height: 500px; width: 800px;"></div>
<script type="module">
// The javascript code from above goes here
</script>
</body>
</html>
If you're using a modern JavaScript bundler like Vite, Webpack, or Parcel, you can add SheetXL as an npm dependency.
Step 1: Install the Package
Open your project's terminal and run the installation command:
npm install @sheetxl/studio-vanilla react react-dom
Step 2: Import and Use
In your main JavaScript or TypeScript file, import and call the SheetXL API.
import { SheetXL } from '@sheetxl/studio-vanilla';
// No CSS needed - SheetXL handles this.
// Create the workbook instance
const workbookElement = await SheetXL.attachStudio('#sheetxl', {
licenseKey: 'visit https://my.sheetxl.com to generate a license key.',
});
That's it! Your workbook is ready.
API Documentation
Your journey doesn't stop here. The SheetXL object provides a rich API for creating and managing components.
Core API
initialize(options): An optional function to configure the library once, setting things like yourlicenseKeyor custom dependency URLs.attachStudio(options, props): Asynchronously creates and mounts a studio component, returning a promise that resolves to an instance controller with methods like.update()and.detach().
This Quick Start guide only scratches the surface. For a complete list of all methods, see the full API documentation:
Example - CDN
Sometimes starting with an example is the simplest way to start.
The following code sandbox shows a single index.html page loading SheetXL from a CDN:
Sandboxes can also be forked or downloaded to be run locally.