Module @sheetxl/studio-vanilla
Studio Vanilla
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 https://esm.sh/@sheetxl/studio-vanilla in your browser
-
Use as CDN in your projects:
<script type="module">
import { SheetXL } from 'https://esm.sh/@sheetxl/studio-vanilla';
// Your code here
await SheetXL.attachWorkbook('#sheetxl');
</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
.tsimports 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");