gridla

    Install

    Gridla is one npm package. gridla is the framework-neutral core; every adapter is a subpath of the same package with its framework as an optional peer dependency. All entries are ESM only and ship TypeScript declarations.

    npm
    yarn
    pnpm
    bun
    deno
    npm install gridla

    Entry points

    EntryWhat it isPeer dependency (optional)Guide
    gridlaCore: pure functions over plain objects. Safe on the server.noneVanilla quickstart
    gridla/interactionFramework-neutral controller, gestures, transfer scope, sizing.noneWrite your own adapter
    gridla/reactReact adapter: provider, components, hooks. Also runs on Preact.react >=18React quickstart
    gridla/domVanilla adapter: mountGrid(element, options).noneDOM
    gridla/elementsWeb Components over the DOM adapter.noneWeb Components
    gridla/vueVue 3 components and composables.vue >=3.5Vue
    gridla/svelteSvelte 5 components and runes.svelte >=5Svelte
    gridla/solidSolid components and primitives.solid-js >=1.8Solid
    gridla/angularAngular standalone components and directives with signals.@angular/core >=20Angular
    gridla/qwikQwik components (resumable, client-side controller).@builder.io/qwik >=1.14Qwik

    Install only the peer for the entry you import; nothing else is pulled in. Preact uses gridla/react with react aliased to preact/compat, see the Preact guide.

    // Core: pure functions over plain objects. Safe on the server.
import { moveItem, projectLayout, flattenLayout } from 'gridla'

// React adapter: provider, components, hooks, interaction.
import { GridProvider, GridCanvas, GridItem } from 'gridla/react'

    Everything in gridla takes plain objects and returns new plain objects. Nothing touches the DOM or global state, so the core runs in Node, workers, and server renderers unchanged. The adapters touch no window or document at import time either.

    Requirements

    • Node 20.19 or newer for tooling; the library itself has no Node-specific code.
    • A bundler or runtime that resolves the exports field. The core has no side effects and tree-shakes.
    • Browsers: the last two versions of evergreen browsers. Syntax targets ES2022. Adapters need Pointer Events and ResizeObserver. See browser support.

    Next