@appulsauce/svelte-grid

A draggable and resizable grid layout component for Svelte 5.

Installation

npm install @appulsauce/svelte-grid

Quick Start

<script lang="ts">
    import Grid, { GridItem, type GridController } from '@appulsauce/svelte-grid';

    let items = $state([
        { id: '1', x: 0, y: 0, w: 2, h: 2 },
        { id: '2', x: 2, y: 0, w: 3, h: 1 }
    ]);

    let gridController: GridController;

    function addItem() {
        const position = gridController.getFirstAvailablePosition(2, 2);
        if (position) {
            items = [...items, { id: crypto.randomUUID(), ...position, w: 2, h: 2 }];
        }
    }

    const itemSize = { height: 50 };
</script>

<button onclick={addItem}>Add Item</button>

<Grid {itemSize} cols={10} collision="push" bind:controller={gridController}>
    {#each items as item (item.id)}
        <GridItem id={item.id} bind:x={item.x} bind:y={item.y} bind:w={item.w} bind:h={item.h}>
            {#snippet children()}
                <div class="item">{item.id}</div>
            {/snippet}
        </GridItem>
    {/each}
</Grid>

Features

• Draggable & Resizable - Move and resize grid items with mouse or touch
• Collision Detection - Three modes: none, push, compress
• Two-way Binding - Bind item positions directly to your state
• Custom Handles - Use snippets for custom move/resize handles
• Grid Controller - Programmatic control with getFirstAvailablePosition() and compress()
• TypeScript - Full type support included

Documentation

For full documentation and examples, visit the docs site or run the docs locally:

# Clone the repository
git clone https://github.com/KaiErikNiermann/svelte-grid-extended.git
cd svelte-grid-extended

# Install dependencies
pnpm install
pnpm docs:install

# Run docs site
pnpm docs:dev

API Overview

Grid Props

GridItem Props

Requirements

• Svelte 5.0.0+

License

MIT

Acknowledgments

• Forked from https://github.com/cuire/svelte-grid-extended
• Original project: https://github.com/valqelyan/svelte-grid