@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

Prop	Type	Default	Description
cols	number	0	Number of columns (0 = infinite)
rows	number	0	Number of rows (0 = infinite)
itemSize	{ width?, height? }	{}	Fixed cell size in pixels
gap	number	10	Gap between items
collision	'none' | 'push' | 'compress'	'none'	Collision behavior
readOnly	boolean	false	Disable all interactions

GridItem Props

Prop	Type	Default	Description
x	number	required	X position in grid units
y	number	required	Y position in grid units
w	number	1	Width in grid units
h	number	1	Height in grid units
movable	boolean	true	Can be dragged
resizable	boolean	true	Can be resized

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