Studio Vanilla

npm license

Embed the full SheetXL spreadsheet UI into any web page with zero dependencies.

This makes it easy to use the full SheetXL spreadsheet UI in any web project, regardless of framework.

Studio Vanilla can be integrated in a few ways.

1. Using a Bundler

Using a bundler will provide the most configuration options when including in your application build.

# Using pnpm
pnpm install @sheetxl/studio-vanilla

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

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

// The attach method will render the spreadsheet into the specified DOM element.
SheetXL.attachStudio("#sheetxl");

2. Quickest Start (CDN)

For instant, no-build-step integration, add the following HTML snippet to your page.

<!DOCTYPE html>
<html>
<head>
  <title>SheetXL Demo</title>
</head>
<body>
  <div id="sheetxl" style="height: 600px; width: 100%;"></div>
  <script type="module">
    (await import("https://cdn.jsdelivr.net/npm/@sheetxl/studio-vanilla@latest/cdn/index.js")).default.attachStudio("#sheetxl");
  </script>
</body>
</html>

API

SheetXL.attachStudio(selectorOrElement: string | HTMLElement, options?: object): void Renders the spreadsheet UI into the target element.

Note: React and MUI are bundled internally.

🔗 Learn More

Whether you're ready to build, need help, or just want to see more examples, here's where to go next.

💬 Join our Discord Community - Get help and connect with the team.
⭐ Star us on GitHub - If you like SheetXL give us a star ⭐ and help others find us!
📘 Developer Docs - Guides and tutorials.
🔌 API Reference - Detailed documentation for all packages.
👀 Live Demo Gallery - A showcase of interactive examples.
🖼️ Storybook - Explore and test individual UI components.
🌐 Website - Our Website.