Svelte component library

Spreadsheets,
done right.

SmartSheet is a virtualized, Excel-like spreadsheet component for Svelte. Built with a framework-agnostic engine, a powerful TypeScript API, and five ready-to-use themes.

Try the Playground → Documentation GitHub ↗

⚠️ Early unstable release — APIs may change.

Live embed — fully interactive

P&L

Q1-1

Q1-2

Q1-3

Q1-24

Q2-1

Q2-2

Q2-3

Q2-4

Revenue

142000

158000

171000

183000

195000

210000

240000

270000

What's inside

⚡

DOM Virtualization

Only visible cells are rendered. Large datasets stay smooth.

⌨️

Keyboard Navigation

Full arrow-key movement, Ctrl+arrow jumps, Page Up/Down.

🎯

Multi-cell Selection

Click, drag, header selection, and programmatic select APIs.

✏️

Inline Editing

Double-click or just type to edit cells and headers in place.

🎨

Styling API

Colorize cells programmatically. Build heatmaps, highlights.

🔢

TypeScript Generics

Fully typed extraProps on cells and headers for your metadata.

📋

Clipboard Support

Copy and paste with your own spreadsheet or browser clipboard.

📤

Export Data

Export your spreadsheet data for backend integration.

Quick start

<script lang="ts">
  import { SmartSheet } from 'svelte-smartsheet';

  const colHeaders = ['Score', 'Status'];
  const rowHeaders = ['Alice', 'Bob'];
  const cornerHeader = 'Players';

  const data = [
    [85, 'Active'],
    [72, 'Inactive'],
  ];
</script>

<div style="width:100%; height:400px;">
  <SmartSheet
    gridData={data}
    columnHeaders={colHeaders}
    rowHeaders={rowHeaders}
    rowsTitle={cornerHeader}
    theme="tech"
  />
</div>

Spreadsheets, done right.

What's inside

Quick start

Spreadsheets,
done right.