Start with one component.

Start with the smallest useful piece

Choose the component that solves the immediate problem. A spreadsheet does not need a docking system, and a spatial index does not need a rendering engine. Each package has an independent API and lifecycle.

Install and bundle

npm install @wieslawsoltes/gridweb@0.8.0

Use a modern ESM bundler such as Vite or esbuild. Package roots may be headless while browser registrations live in explicit subpaths.

import { Workbook } from '@wieslawsoltes/gridweb';
import '@wieslawsoltes/gridweb/controls';

const book = new Workbook();
book.ActiveWorksheet.GetRange('A1:B2').Values = [[10, 20], [30, 40]];
book.ActiveWorksheet.GetCell('C1').Formula = '=SUM(A1:B2)';

const grid = document.createElement('grid-web');
grid.style.cssText = 'display:block;height:480px';
grid.Workbook = book;
document.querySelector('#app').append(grid);

Make the host measurable

Canvas surfaces, docking containers and virtualized grids need real dimensions. Set an explicit height or use a flex/grid parent with min-height: 0. A zero-height host is not an initialization failure.

Explore before integrating

Open the component playground. Change the example, inspect console output and compare the behavior with the upstream compatibility guide. Keep a small working example when adding a framework adapter.

Component APIs and compatibility boundaries are documented in their upstream repositories. Each component page links to its own source and guide.