Introduction
@appulsauce/svelte-grid is a draggable and resizable grid layout component for Svelte 5. It provides a flexible way to create dynamic, interactive grid layouts with features like collision detection, custom handles, and two-way data binding.
Features
- Draggable Items - Move items around the grid with mouse or touch
- Resizable Items - Resize items with customizable min/max constraints
- Collision Detection - Multiple collision strategies (none, push, compress)
- Two-way Binding - Bind item positions and sizes directly to your state
- Custom Handles - Use custom move and resize handles via snippets
- Grid Controller - Programmatically control the grid layout
- TypeScript Support - Full TypeScript support with exported types
- Svelte 5 Ready - Built with Svelte 5 runes and snippets
Requirements
- Svelte 5.0.0 or higher
- A bundler that supports ES modules (Vite, SvelteKit, etc.)