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.
- 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:
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:
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
- Demo: https://gridstackjs.com/demo/float.html
- 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. 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
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.