Get a Solid grid running

Choose the route before installing

Before you begin

• Node.js 22.12 or later.
• A Vite + Solid TypeScript application. Create one with npm create vite@latest my-sheet -- --template solid-ts if needed.
• An index.html containing <div id="root"></div>.

1. Install the Solid integration

npm install @einfach/solid-excel @einfach/core @einfach/solid solid-js

The three non-UI packages are peers. Keep one physical copy of each in the application dependency graph; the provider and its consumers must share the same Solid runtime.

2. Paste one working application

Replace src/main.tsx with this example. It uses the bundled Worker backend, so it is the safest default for a first integration.

import { render } from 'solid-js/web'
import {
  createWorkerWorkbookSpreadsheetBackend,
  SpreadsheetGrid,
  SpreadsheetUiProvider,
} from '@einfach/solid-excel/vnext'
import { defaultVNextWorkbookWorkerFactory } from '@einfach/solid-excel/vnext-worker-factory'
import '@einfach/solid-excel/vnext-styles.css'

const backend = createWorkerWorkbookSpreadsheetBackend({
  workerFactory: defaultVNextWorkbookWorkerFactory,
  sheets: [{ id: 'sheet-1', name: 'Sheet1' }],
})

const viewport = {
  scrollTop: 0, scrollLeft: 0, viewportHeight: 480, viewportWidth: 960,
  rowHeight: 24, colWidth: 96, rowCount: 50, colCount: 12,
  overscanRows: 2, overscanCols: 1,
}

const root = document.getElementById('root')
if (!root) throw new Error('Missing #root')

render(() => (
  <SpreadsheetUiProvider backend={backend}>
    <SpreadsheetGrid sheetId="sheet-1" viewport={viewport} />
  </SpreadsheetUiProvider>
), root)

3. Verify the integration

1. Run npm run dev.
2. Open the Vite URL, then double-click cell A1.
3. Enter =1+2 and press Enter. A1 should display 3.

If the grid renders and the formula resolves, the UI, provider, Worker transport, and workbook engine are connected.

optimizeDeps: {
  include: [
    '@einfach/solid-excel > @lingui/core',
    '@einfach/solid-excel > @lingui/core > @messageformat/parser',
  ],
}

Where to go next