svelte-grid

svelte-grid is an open-source Svelte component library that provides a responsive, draggable, and resizable grid layout system, built 100% in Svelte with no third-party dependencies. It is designed for building dashboard-style interfaces where widgets need to be moved, resized, and persisted across sessions.

What is svelte-grid?

svelte-grid is a grid layout component for Svelte applications, installable via npm with npm i svelte-grid --save-dev. It produces draggable and resizable widgets arranged on a responsive grid, with support for static widgets, serializable layouts, and responsive breakpoints. The repository also states that it is compatible with Sapper, Svelte's server-side rendering framework, and that the project is no longer maintained.

Key Features

• 100% Svelte — no jQuery and no third-party dependencies, keeping the bundle small; the npm page shows a minified size badge.
• Draggable widgets — widgets can be moved freely within the grid layout.
• Resizable widgets — users can change widget dimensions, with configurable minimum and maximum width/height limits during resizing.
• Static widgets — certain widgets can be locked in place so they cannot be dragged or resized.
• Serializable layout — the current layout can be serialized to a JavaScript object and restored later, enabling persistence.
• Responsive breakpoints — the grid adapts to different screen sizes using configurable breakpoints.
• Custom dragging — the library provides helper functions for implementing custom drag behavior.
• Grid gap and soft autoscroll — spacing between grid cells and automatic scrolling when dragging near the edges are supported.

Who should use svelte-grid?

Developers building admin dashboards or analytics tools in Svelte are the primary audience, since the grid is optimized for draggable and resizable widget panels. Teams using Sapper or SvelteKit for SSR can integrate it because of the Sapper compatibility note. Prototyping interactive layouts is another use case, given the serialization and restore capabilities.

What can you do with svelte-grid?

• Admin dashboard developers: build a draggable, resizable dashboard where each widget is a grid item, and persist user layout changes by serializing the grid state.
• Prototypers: quickly assemble a responsive widget grid with static and movable cards to test interaction patterns.
• Sapper/SSR projects: include the grid in server-rendered pages thanks to the stated Sapper compatibility, without pulling in a browser-only library.

Pros and cons

Pros

• Zero runtime dependencies makes it lightweight.
• Feature set covers drag, resize, static items, breakpoints, serialization, and custom dragging.
• Works with Sapper SSR.

Cons

• The repository explicitly marks the project as NOT MAINTAINED, so users may need to fork or patch it for newer Svelte versions.

FAQ

Is svelte-grid still maintained?

No. The GitHub repository description includes the text "NOT MAINTAINED", and the source URL in the metadata repeats that flag. New users should expect limited updates and may need to maintain their own fork.

How do I install svelte-grid?

Install it as a development dependency via npm with the command npm i svelte-grid --save-dev. The package is available on the npm registry.

Does svelte-grid work with Sapper?

Yes. The README explicitly lists "Compatible with Sapper (SSR Svelte)" as a feature, so the grid can be used in server-side-rendered Svelte applications built with Sapper.

What features does svelte-grid support?

It supports draggable widgets, resizable widgets, static widgets, serializable and restorable layouts, responsive breakpoints, min/max resizing constraints, helper functions for custom dragging, a configurable grid gap, and soft autoscroll while dragging.