Svelte Grid

A draggable and resizable grid layout component for Svelte 5. Build dynamic, interactive dashboards and layouts with ease.

Get Started View Examples

npm install @appulsauce/svelte-grid

Draggable Items

Smoothly drag and drop grid items with touch and mouse support. Custom drag handles available.

Resizable Items

Resize items with customizable min/max constraints. Supports custom resize handles.

Flexible Grid

Static or dynamic grids with customizable rows, columns, gaps, and item sizes.

Collision Handling

Multiple collision strategies: none, push, or compress. Keep your layout organized automatically.

Quick Example

svelte

<script lang="ts">
  import Grid, { GridItem } 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 }
  ]);
</script>

<Grid cols={10} rows={10}>
  {#each items as item (item.id)}
    <GridItem 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>

Built for Svelte 5

This library is built specifically for Svelte 5 with runes-based reactivity. Enjoy modern Svelte features like $state, $derived, and snippets.