Studio Vanilla

npm license downloads

The simplest way to embed the full SheetXL spreadsheet UI into any web page.

This package bundles @sheetxl/sdk and @sheetxl/studio-mui into a simple api for vanilla js.

🚀 Live ESM Development Server

This package includes a live development server that acts like a CDN for rapid testing and development. This is perfect for:

Testing the library during development without building
Simulating CDN usage locally
Hot module replacement for instant feedback
Live ESM imports for modern development

Quick Start (Development Server)

Start the dev server:
```
cd packages/studio-vanilla
pnpm dev
```
Open the dev interface:

Open http://localhost:4000 in your browser

Use as CDN in your projects:

<script type="module">
  import { SheetXL } from 'http://localhost:4000/src/index.ts';

  // Your code here
  await SheetXL.reactWorkbook('#my-container');
</script>

Development Features

✅ Hot Module Replacement: Changes reflect instantly
✅ Source Maps: Full debugging support
✅ ESM Imports: Modern import syntax
✅ Live Demo: Interactive testing interface
✅ CORS Headers: Ready for cross-origin requests
✅ TypeScript: Direct .ts imports supported

1. Quickest Start (CDN)

For instant, no-build-step integration, add the following HTML snippet to your page. This is the primary use case for this package.

<!DOCTYPE html>
<html>
<head>
  <title>SheetXL Demo</title>
</head>
<body>
  <div id="container" style="height: 600px; width: 100%;"></div>
  <script type="module">
    (await import("https://unpkg.com/@sheetxl/studio-vanilla")).SheetXL.attachWorkbook("#container");
  </script>
</body>
</html>

2. Usage with a Bundler (via NPM)

You can also install this package via NPM if you prefer to include it in your application build.

# Using npm
npm install @sheetxl/studio-vanilla

# Using yarn
yarn add @sheetxl/studio-vanilla

After installation, you can import and use the SheetXL.attach method.

import { SheetXL } from '@sheetxl/studio-vanilla';

// The attach method will render the spreadsheet into the specified DOM element.
SheetXL.attachWorkbook("#your-container-element-id");