Top 7 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.

• Repository: https://github.com/react-grid-layout/react-grid-layout
• Homepage/Demo: https://react-grid-layout.github.io/react-grid-layout/
• Details:
  • ⚖️ License: MIT
  • ⭐ GitHub Stars: 16.9k stars
  • 📦 npm package: https://www.npmjs.com/package/react-grid-layout
  • 🗜 Unpacked Size 488 kB
  • Last publish: 10 months ago
• Resources:
  • React-Grid-Layout v1.3.4 Demo 11 - No Vertical Compacting (Free Movement)
  • Implementation of Drag & Drop using React Grid Layout….

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.

• Repository: https://github.com/konvajs/konva
• Homepage: https://konvajs.org
• Demos: https://konvajs.org/docs/sandbox/
• Details:
  • ⚖️ License: MIT
  • ⭐ GitHub Stars: 8.6k stars
  • 📦 npm package: https://www.npmjs.com/package/konva
  • 🗜 Unpacked Size: 1.77 MB
  • Last publish: a month ago
• Resources:
  • How to snap shapes positions on dragging with Konva?
  • Snap to grid with KonvaJS

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.

• Repository: https://github.com/gridstack/gridstack.js
• Homepage: https://gridstackjs.com
• Details:
  • ⚖️ License: MIT
  • ⭐ GitHub Stars: 4.4k stars
  • 📦 npm package: https://www.npmjs.com/package/gridstack
  • 🗜 Unpacked Size: 2.4 MB
  • Last publish: a month ago

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.

• Repository: https://github.com/metafizzy/packery
• Homepage: https://packery.metafizzy.co
• Details:
  • ⚖️ License: Commercial and Open source (GPLv3)
  • ⭐ GitHub Stars: 4k stars
  • 📦 npm package: https://www.npmjs.com/package/packery
  • 🗜 Unpacked Size: 749 kB
  • Last publish: 4 years ago

5. Draggabilly

Make that shiz draggable

Rad because it supports mouse and touch devices

Draggabilly is a vanilla JS library for implementing drag-n-drop capabilities.

• Repository: https://github.com/desandro/draggabilly
• Homepage: https://draggabilly.desandro.com
• Details:
  • ⚖️ License: MIT
  • ⭐ GitHub Stars: 3.8k stars
  • 📦 npm package: https://www.npmjs.com/package/draggabilly
  • 🗜 Unpacked Size: 83.6 kB
  • Last publish: a year ago

6. 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.

• Repository: https://github.com/dsmorse/gridster.js
• Homepage: http://dsmorse.github.io/gridster.js/
• Details:
  • ⚖️ License: MIT
  • ⭐ GitHub Stars: 746 stars
  • 📦 npm package: https://www.npmjs.com/package/dsmorse-gridster
  • 🗜 Unpacked Size: 478 kB
  • Last publish: 4 years ago

7. 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.

• PixiJS is a 2D WebGL rendering library.
• React-three-fiber is a React renderer for three.js.
• D3.js a solid solution for data driven applications.
• Paper.js my favorite solution for SVG vector apps.

Conclusion

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.