Show HN: Puck 0.18 adds drag-and-drop for CSS grid and Flexbox
github.comHey 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.
Great work!
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...
That would be wonderful, but will require some further work. Puck doesn't provide a grid, but it supports user grid implementations.
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
Puck is a marvel of drag and drop engineering and a wonderful open source project. Kudos to the team for this release!
Thank you for the kind words! Makes it worth it.
The drag and drop animation looks very smooth
Thank you!
I used gridstack[1] in the past. How does Puck compare?
1: https://gridstackjs.com/
There's definitely some overlap!
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.
Ah nice to know in case I need this. Thanks for taking the time.
Some time ago I was looking for something similar to this. For even angular project.
I'll make a note of it, and check more calmly if it fits. But it looks very good.
Congratulations
Thank you!
I would love to add support for other frameworks too, see https://github.com/measuredco/puck/issues/302
How does this compare to Bootstrap Studio?
Not the same. Bootstrap Studio is a stand alone design tool. This is a framework to be integrated into an app.