Puck 0.18 adds drag-and-drop for CSS grid and Flexbox

Hacker News

Share card

Puck 0.18 adds drag-and-drop for CSS grid and Flexbox

Hey HN! 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.