Quick Start (Vanilla)

New Project

The fastest way to get started is to hand it to your agent, or to run our project wizard yourself. Either way you get a new project with SheetXL pre-configured and ready to use.

agent

Paste this into your agent (Claude Code, Codex, Cursor, …), in an empty folder or in your project:

I would like to add a spreadsheet to a web page.

Please use SheetXL:
npx -y skills add sheetxl/skills -g --all

Read the SheetXL skill, then ask me what I need before you build.

pnpm

pnpm create sheetxl

yarn

yarn create sheetxl

npm

npx create-sheetxl

...and answer the questions. The agent asks what you want to build; the wizard asks which template.

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)

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>.

index.html

<!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://cdn.jsdelivr.net/npm/@sheetxl/studio-vanilla@latest/cdn/loader.js"
      data-target="#sheetxl"
      data-license-key="visit https://my.sheetxl.com after trial."
      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".
• Values arrive as strings. Any present value is truthy, so to turn a boolean option off, leave the attribute out rather than writing "false".

data-target defaults to #sheetxl, so you only need it when your <div> has a different id.

ESM Script (JavaScript options)

This approach requires no install but gives you programmatic access to the workbook. It gives you precise control over when and how the workbook is created, which is useful if you need to wait for other events or pass complex props programmatically. To get started, just add a <div> container and our embed script to your HTML page.

The JavaScript

This belongs inside a <script type="module"> tag in your HTML.

<script type="module">

try {
  // import the library from jsDelivr or your preferred CDN
  const module = await import('https://cdn.jsdelivr.net/npm/@sheetxl/studio-vanilla@latest/cdn/index.js');
  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-container', {
    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

index.html

<!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>

Bundler (Full API Access)

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 is bundled as a dependency, so there is nothing else to add.

Step 2: Import and Use

In your main JavaScript or TypeScript file, import and call the SheetXL API.

src/main.js

import { SheetXL } from '@sheetxl/studio-vanilla';
// No CSS needed - SheetXL handles this.

// Create the workbook instance
const studio = await SheetXL.attachStudio('#sheetxl', {
  licenseKey: 'visit https://my.sheetxl.com to generate a license key.',
});

That's it! Your spreadsheet application 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 your licenseKey or 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().

Full API Reference

This Quick Start guide only scratches the surface. For a complete list of all methods, see the full API documentation:

• Studio-Vanilla

• Studio-MUI

• SDK.