December 21, 2022

Top 5 Open Source Draggable Grid Layout UI Libraries for the Web


Here is a collection of the most reliable libraries for building grid layouts with support for draggable components in React, vanilla Js, or directly into the HTML5 canvas in 2D or 3D.

1. React-Grid-Layout

A draggable and resizable grid layout with responsive breakpoints, for React

React-Grid-Layout is a library for draggable and resizable grid layouts, with responsive breakpoints, for React. The most complete and popular of all the solutions.

React-Draggable above is part of this framework.

2. Konva.js

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications

Konva.js is a framework for 2D object manipulation implemented with HTML canvas. Seems incredibly powerful, although the site looks dated, which might be a consequence of it being a one person project.

Additionally React-Konva is a Konva components library for React.

3. Gridstack

Mobile-friendly modern Typescript library for dashboard layout and creation. Making a drag-and-drop, multi-column responsive dashboard has never been easier. Has multiple bindings and works great with React, Vue, Angular, Knockout.js, Ember and others

Gridstack is a vanilla framework optimized for dashboards.

4. Packery

Packery is a JavaScript library and jQuery plugin that makes gapless and draggable layouts. It uses a bin-packing algorithm to fill in empty gaps. Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in a specific spot, or dragged around. It’s perfect for draggable dashboard and seamless Masonry image galleries

Packery a library for creating grid layouts with dragging capabilities.

Appears to be more limited in the layout options than React-Grid-Layout, and doesn’t appear to be in active development.

5. Gridster

Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid

Gridster is a jQuery plugin for building draggable grid layouts. No longer in development. It was the inspiration for Gridstack.

Bonus: Raw 2D and 3D UI creation

The libraries below rely on HTML5 canvas for rendering. Full screen canvas could become a performance bottleneck, but it could be the right solution for the right problem.


For very simple projects in React, I will go with React-Draggable, or React-Grid-Layout if I need more complex UIs. If I can’t use React, Konva seems like a great solution for using with Vanilla.js.

December 21, 2022 · #miscellaneous


Discuss on Twitter ↗

Sign up for the mailing list

Previous:TIL about Process Art
Next:Order, Rules, and the Creative Life - Notes