Installation — Sheetwrite

Choose a framework in the header once. Every framework-aware example uses that preference, including the quick starts below and the lifecycle guide.

npm install @sheetwrite/core

import { createGridfunction createGrid(host: HTMLElement, opts: GridOptions): Gridfunction createGrid(
  host: HTMLElement,
  opts: GridOptions,
): Gridfunction createGrid(
  host: HTMLElement,
  opts: GridOptions,
): GridCreates and mounts an imperative Grid in the supplied host element.API reference →, initSheetwritefunction initSheetwrite(source?: BufferSource | URL | string | Request | WebAssembly.Module): Promise<void>function initSheetwrite(
  source?:
    BufferSource | URL | string | Request | WebAssembly.Module,
): Promise<void>function initSheetwrite(
  source?:
    | BufferSource
    | URL
    | string
    | Request
    | WebAssembly.Module,
): Promise<void>Load the WASM data engine once. Must be awaited before createGrid.API reference → } from "@sheetwrite/core";
import "@sheetwrite/core/styles.css";

await initSheetwritefunction initSheetwrite(source?: BufferSource | URL | string | Request | WebAssembly.Module): Promise<void>function initSheetwrite(
  source?:
    BufferSource | URL | string | Request | WebAssembly.Module,
): Promise<void>function initSheetwrite(
  source?:
    | BufferSource
    | URL
    | string
    | Request
    | WebAssembly.Module,
): Promise<void>Load the WASM data engine once. Must be awaited before createGrid.API reference →();
const gridconst grid: Gridconst grid: Gridconst grid: GridThe imperative core grid this controller owns.API reference → = createGridfunction createGrid(host: HTMLElement, opts: GridOptions): Gridfunction createGrid(
  host: HTMLElement,
  opts: GridOptions,
): Gridfunction createGrid(
  host: HTMLElement,
  opts: GridOptions,
): GridCreates and mounts an imperative Grid in the supplied host element.API reference →(documentvar document: Documentvar document: Documentvar document: Documentwindow.document returns a reference to the document contained in the window. MDN Reference.querySelectorParentNode.querySelector<HTMLElement>(selectors: string): HTMLElement | null (+4 overloads)ParentNode.querySelector<HTMLElement>(selectors: string): HTMLElement | null (+4 overloads)ParentNode.querySelector<HTMLElement>(selectors: string): HTMLElement | null (+4 overloads)Returns the first element that is a descendant of node that matches selectors. MDN Reference("#grid")!, { workbookGridOptions.workbook: Workbookinterface GridOptions {
  workbook: Workbook;
}interface GridOptions {
  workbook: Workbook;
}Live workbook schema adopted by the store and updated by document operations.API reference →, dataGridOptions.data?: ColumnarData | undefinedinterface GridOptions {
  data?: ColumnarData | undefined;
}interface GridOptions {
  data?: ColumnarData | undefined;
}Eager column-major values loaded into workbook.activeSheet; use instead of datasource.API reference → });

The host owns initialization and must destroy the returned Grid when its DOM lifetime ends.

npm install @sheetwrite/react

import { Sheetwriteconst Sheetwrite: <Row extends Record<string, CellScalar>>(props: SheetwriteProps<Row> & {
    ref?: ForwardedRef<Grid>;
}) => ReactElementconst Sheetwrite: <Row extends Record<string, CellScalar>>(
  props: SheetwriteProps<Row> & {
    ref?: ForwardedRef<Grid>;
  },
) => ReactElementconst Sheetwrite: <
  Row extends Record<
    string,
    CellScalar
  >,
>(
  props: SheetwriteProps<Row> & {
    ref?: ForwardedRef<Grid>;
  },
) => ReactElementConvenience component for local object rows. It derives a single-sheet workbook from columns, defaultRows, and sheetName, initializes Sheetwrite, and owns the Grid through prop-driven resets and unmount cleanup. Pass a ref to access the live Grid; use SheetwriteGrid when the host already owns a workbook or datasource.API reference → } from "@sheetwrite/react";
import "@sheetwrite/react/styles.css";

export function Workbookfunction Workbook(): JSX.Elementfunction Workbook(): JSX.Elementfunction Workbook(): JSX.ElementAPI reference →() {
  return <Sheetwriteconst Sheetwrite: <Row extends Record<string, CellScalar>>(props: SheetwriteProps<Row> & {
    ref?: ForwardedRef<Grid>;
}) => ReactElementconst Sheetwrite: <Row extends Record<string, CellScalar>>(
  props: SheetwriteProps<Row> & {
    ref?: ForwardedRef<Grid>;
  },
) => ReactElementconst Sheetwrite: <
  Row extends Record<
    string,
    CellScalar
  >,
>(
  props: SheetwriteProps<Row> & {
    ref?: ForwardedRef<Grid>;
  },
) => ReactElementConvenience component for local object rows. It derives a single-sheet workbook from columns, defaultRows, and sheetName, initializes Sheetwrite, and owns the Grid through prop-driven resets and unmount cleanup. Pass a ref to access the live Grid; use SheetwriteGrid when the host already owns a workbook or datasource.API reference → columnscolumns: readonly SimpleColumn<Record<string, CellScalar>>[]let columns: readonly SimpleColumn<
  Record<string, CellScalar>
>[]let columns: readonly SimpleColumn<
  Record<string, CellScalar>
>[]Ordered schema used to derive the component-owned sheet.API reference →={columnsconst columns: readonly SimpleColumn<Record<string, CellScalar>>[]const columns: readonly SimpleColumn<
  Record<string, CellScalar>
>[]const columns: readonly SimpleColumn<
  Record<string, CellScalar>
>[]Restrict to these column indices (defaults to all columns).API reference →} defaultRowsdefaultRows: readonly Record<string, CellScalar>[]let defaultRows: readonly Record<string, CellScalar>[]let defaultRows: readonly Record<
  string,
  CellScalar
>[]Rows converted to initial columnar data; missing column keys become null.API reference →={rowsconst rows: readonly Record<string, CellScalar>[]const rows: readonly Record<string, CellScalar>[]const rows: readonly Record<
  string,
  CellScalar
>[]end-exclusive row rangeAPI reference →} heightheight: string | numberlet height: string | numberlet height:
  string | numberHost height in CSS pixels for numbers or any CSS length string.API reference →={520} />;
}

The adapter initializes WASM after client mount. Use a client component boundary in server-rendered React hosts.

npm install @sheetwrite/vue

<script setup lang="ts">
import { Sheetwriteconst Sheetwrite: SheetwriteComponentConstructor<SheetwriteProps, SheetwriteGridEmits, object>const Sheetwrite: SheetwriteComponentConstructor<
  SheetwriteProps,
  SheetwriteGridEmits,
  object
>const Sheetwrite: SheetwriteComponentConstructor<
  SheetwriteProps,
  SheetwriteGridEmits,
  object
>Convenience component for local object rows with live option updates.API reference → } from "@sheetwrite/vue";
import "@sheetwrite/vue/styles.css";
</script>

<template>
  <Sheetwriteconst Sheetwrite: SheetwriteComponentConstructor<SheetwriteProps, SheetwriteGridEmits, object>const Sheetwrite: SheetwriteComponentConstructor<
  SheetwriteProps,
  SheetwriteGridEmits,
  object
>const Sheetwrite: SheetwriteComponentConstructor<
  SheetwriteProps,
  SheetwriteGridEmits,
  object
>Convenience component for local object rows with live option updates.API reference → :columnsSheetwriteProps.columns: readonly SimpleColumn<Record<string, CellScalar>>[]interface SheetwriteProps {
  columns: readonly SimpleColumn<Record<string, CellScalar>>[];
}interface SheetwriteProps {
  columns: readonly SimpleColumn<
    Record<string, CellScalar>
  >[];
}Ordered schema used to derive the component-owned sheet.="columnsconst columns: readonly SimpleColumn<Record<string, CellScalar>>[]const columns: readonly SimpleColumn<
  Record<string, CellScalar>
>[]const columns: readonly SimpleColumn<
  Record<string, CellScalar>
>[]Restrict to these column indices (defaults to all columns).API reference →" :default-rowsSheetwriteProps.defaultRows: readonly Record<string, CellScalar>[]interface SheetwriteProps {
  defaultRows: readonly Record<string, CellScalar>[];
}interface SheetwriteProps {
  defaultRows: readonly Record<
    string,
    CellScalar
  >[];
}Rows converted to initial columnar data; missing keys become null.="rowsconst rows: readonly Record<string, CellScalar>[]const rows: readonly Record<string, CellScalar>[]const rows: readonly Record<
  string,
  CellScalar
>[]end-exclusive row rangeAPI reference →" heightheight?: string | number | undefinedheight?: string | number | undefinedheight?: string | number | undefinedHost height in CSS pixels for numbers or any CSS length string.API reference →="520px" />
</template>

The adapter initializes WASM after client mount. Use a client-only boundary in Nuxt and other server-rendered Vue hosts.

npm install @sheetwrite/svelte

<script lang="ts">
  import { Sheetwriteconst Sheetwrite: Component<SheetwriteProps<Record<string, CellScalar>>, {}, "grid">const Sheetwrite: Component<
  SheetwriteProps<Record<string, CellScalar>>,
  {},
  "grid"
>const Sheetwrite: Component<
  SheetwriteProps<
    Record<string, CellScalar>
  >,
  {},
  "grid"
>Owns a sheet derived from columns and defaultRows. Bind grid for imperative access; it clears on reset or unmount.API reference → } from "@sheetwrite/svelte";
  import "@sheetwrite/svelte/styles.css";
</script>

<Sheetwriteconst Sheetwrite: Component<SheetwriteProps<Record<string, CellScalar>>, {}, "grid">const Sheetwrite: Component<
  SheetwriteProps<Record<string, CellScalar>>,
  {},
  "grid"
>const Sheetwrite: Component<
  SheetwriteProps<
    Record<string, CellScalar>
  >,
  {},
  "grid"
>Owns a sheet derived from columns and defaultRows. Bind grid for imperative access; it clears on reset or unmount.API reference → {columnscolumns: readonly SimpleColumn<Record<string, CellScalar>>[]let columns: readonly SimpleColumn<
  Record<string, CellScalar>
>[]let columns: readonly SimpleColumn<
  Record<string, CellScalar>
>[]Restrict to these column indices (defaults to all columns).API reference →} defaultRows={rowsconst rows: readonly Record<string, CellScalar>[]const rows: readonly Record<string, CellScalar>[]const rows: readonly Record<
  string,
  CellScalar
>[]end-exclusive row rangeAPI reference →} height="520px" />

The adapter initializes WASM after client mount. Use a client-only boundary when a SvelteKit route renders on the server.

Runtime initialization

Zero-argument initSheetwrite() is canonical for the imperative package. It is re-entrant: concurrent calls share one initialization, retries work after failure, and repeats after success are no-ops. Framework adapters call the same initializer on mount.

Pass a source only for unsupported bundlers, public-asset policies, or controlled delivery:

await initSheetwritefunction initSheetwrite(source?: BufferSource | URL | string | Request | WebAssembly.Module): Promise<void>function initSheetwrite(
  source?:
    BufferSource | URL | string | Request | WebAssembly.Module,
): Promise<void>function initSheetwrite(
  source?:
    | BufferSource
    | URL
    | string
    | Request
    | WebAssembly.Module,
): Promise<void>Load the WASM data engine once. Must be awaited before createGrid.API reference →(sourceconst source: string | BufferSource | URL | Request | WebAssembly.Moduleconst source:
  string | BufferSource | URL | Request | WebAssembly.Moduleconst source:
  | string
  | BufferSource
  | URL
  | Request
  | WebAssembly.ModuleRemote input is observable but never belongs in outgoing local persistence.API reference →);

Accepted sources are BufferSource | URL | string | Request | WebAssembly.Module. The raw binary remains exported as @sheetwrite/wasm/wasm.

// Vite-family URL
import wasmUrl from "@sheetwrite/wasm/wasm?url";
await initSheetwritefunction initSheetwrite(source?: BufferSource | URL | string | Request | WebAssembly.Module): Promise<void>function initSheetwrite(
  source?:
    BufferSource | URL | string | Request | WebAssembly.Module,
): Promise<void>function initSheetwrite(
  source?:
    | BufferSource
    | URL
    | string
    | Request
    | WebAssembly.Module,
): Promise<void>Load the WASM data engine once. Must be awaited before createGrid.API reference →(wasmUrl);

// webpack asset URL
await initSheetwritefunction initSheetwrite(source?: BufferSource | URL | string | Request | WebAssembly.Module): Promise<void>function initSheetwrite(
  source?:
    BufferSource | URL | string | Request | WebAssembly.Module,
): Promise<void>function initSheetwrite(
  source?:
    | BufferSource
    | URL
    | string
    | Request
    | WebAssembly.Module,
): Promise<void>Load the WASM data engine once. Must be awaited before createGrid.API reference →(new URLvar URL: new (url: string | URL, base?: string | URL) => URLvar URL: new (
  url: string | URL,
  base?: string | URL,
) => URLvar URL: new (
  url: string | URL,
  base?: string | URL,
) => URLThe URL interface is used to parse, construct, normalize, and encode URL. MDN Reference("@sheetwrite/wasm/wasm", import.meta.urlImportMeta.url: stringinterface ImportMeta {
  url: string;
}interface ImportMeta {
  url: string;
}file:// url string for the current module.@example console.log(import.meta.url); "file:///Users/me/projects/my-app/src/my-app.ts"));

// Public-copy fallback
await initSheetwritefunction initSheetwrite(source?: BufferSource | URL | string | Request | WebAssembly.Module): Promise<void>function initSheetwrite(
  source?:
    BufferSource | URL | string | Request | WebAssembly.Module,
): Promise<void>function initSheetwrite(
  source?:
    | BufferSource
    | URL
    | string
    | Request
    | WebAssembly.Module,
): Promise<void>Load the WASM data engine once. Must be awaited before createGrid.API reference →("/sheetwrite_wasm_bg.wasm");

webpack and Next.js need no IgnorePlugin; package export conditions keep Node filesystem code out of browser graphs.

Failure UI and retries

React accepts fallback; Vue and Svelte use fallback content or slots. Initialization failures reach onInitializationError or Vue's initialization-error. A changed explicit source or remount can retry after failure.

Optional feature assets

Worker rendering and XLSX stay explicit. Import the Worker entry from @sheetwrite/core/worker. XLSX requires @sheetwrite/xlsx plus import "@sheetwrite/xlsx/register" before toolbar or programmatic export.