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.
Show HN: Puck 0.18 adds drag-and-drop for CSS grid and Flexbox
github.com