I just released Puck 0.18 with a new drag-and-drop engine for CSS grid and flexbox support.
You can now use Puck to create a page builder that behaves like a design tool, but embedded within your own app and using your own React components.
To use it, just add `display: flex` (or grid, etc) to your DropZone and Puck will gracefully handle drag-and-drop across all dimensions.
Shout out to the dnd-kit maintainer Claudéric for the collaboration and support (if you’re reading this, I just sponsored you on GitHub!) and as always, a huge thanks to my wonderful community for all the testing and feedback. It would not be possible without you!
If you've not heard of Puck, it's is an open-source visual editor for React that I maintain, available under MIT so you can safely embed it in your product.
Some background: This is the culmination of 18 months of iteration, and has required several breakthroughs in drag-and-drop to achieve: drag-and-drop across iframes, accounting for layout shift across nested components, and natural collision detection are some of the problems that have kept me extremely busy. I hope to write about the process if time allows.
The implementation is bleeding edge, using the experimental branch of dnd-kit with custom collision algorithms and plugins to implement a drag-and-drop experience that feels similar to react-beautiful-dnd, but across multiple dimensions.
Happy to answer any questions! Will endeavour to reply to everyone.
Is it possible to resize grid rows/grid cols directly in the editor? Similar to the bottom-right handle in react-grid-layout?
https://react-grid-layout.github.io/react-grid-layout/exampl...
To support something like you're suggesting would likely require an official Grid component, which I'm now tracking here: https://github.com/measuredco/puck/issues/843
I'll make a note of it, and check more calmly if it fits. But it looks very good.
Congratulations
I would love to add support for other frameworks too, see https://github.com/measuredco/puck/issues/302
1: https://gridstackjs.com/
Gridstack is a great tool for building complex grid layouts with drag and drop for specific use-cases.
Puck is for creating a complete page building experience, which includes not only drag and drop, but also user input via fields, viewport previewing, APIs for fetching data, etc.
Gridstack also provides it's own grid system, whereas Puck currently is unopinionated, supporting any component library that uses `display: grid` internally.