[{"data":1,"prerenderedAt":211},["ShallowReactive",2],{"project-42792149":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":34,"aspects":35,"strip":41,"post_text":44,"what":45,"said":78,"maker_in_thread":133,"shape":145,"grid":148,"attempts":174,"same_week":175,"maker_shows":43,"maker_hidden":203,"reader_version":204,"card":205},"42792149","Puck","Puck 0.18 adds drag-and-drop for CSS grid and Flexbox","title","Show HN: Puck 0.18 adds drag-and-drop for CSS grid and Flexbox","https:\u002F\u002Fgithub.com\u002Fmeasuredco\u002Fpuck\u002Freleases\u002Ftag\u002Fv0.18.0","github.com","chrisvxd",1737549590,2025,51,13,1238,3837,33,"notable","dev_tools","visual page editor library","library",[24,25,26,27,28],"react page builder","drag and drop","css grid","visual editor","flexbox","loved",0.351,{"positive":32,"neutral":32,"mixed":33,"critical":33},4,0,8,{"design":36,"execution":37,"performance":39,"idea":40},{"positive":33,"critical":33},{"positive":38,"critical":33},1,{"positive":38,"critical":33},{"positive":33,"critical":33},[42,33,43,33,43,33,43,33,42,33,43,42,42],3,5,"Hey HN!\n\nI just released Puck 0.18 with a new drag-and-drop engine for CSS grid and flexbox support.\n\nYou 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.\n\nTo use it, just add `display: flex` (or grid, etc) to your DropZone and Puck will gracefully handle drag-and-drop across all dimensions.\n\nShout 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 testi",{"problem":46,"audience":52,"pricing":61,"motivation":62,"time_to_build":61,"stack":66,"openness":75,"stage":76,"team_size":77},{"value":47,"source":48,"evidence":49},"Letting users build pages with drag-and-drop across grid and flex layouts inside an app","maker",[50],{"id":51},"post",{"value":53,"source":54,"evidence":55},"React developers embedding a page builder in their own product","inferred",[56,57],{"id":51},{"id":58,"by":59,"text":60},"42829238","sandreas","I used gridstack[1] in the past. How does Puck compare? 1: https:\u002F\u002Fgridstackjs.com\u002F",null,{"value":63,"source":48,"evidence":64},"Culmination of 18 months of iteration on drag-and-drop",[65],{"id":51},[67,71],{"value":68,"source":48,"evidence":69},"React",[70],{"id":51},{"value":72,"source":48,"evidence":73},"dnd-kit",[74],{"id":51},"open_source","launched","unknown",{"praise":79,"objections":92,"requests":93,"questions":108,"alternatives":120},[80],{"value":81,"source":82,"evidence":83},"Smooth drag-and-drop animation and engineering","commenter",[84,88],{"id":85,"by":86,"text":87},"42792350","ayush2390","The drag and drop animation looks very smooth",{"id":89,"by":90,"text":91},"42829829","mgreenw","Puck is a marvel of drag and drop engineering and a wonderful open source project. Kudos to the team for this release!",[],[94,101],{"value":95,"source":82,"evidence":96},"Resizable grid rows and columns in the editor",[97],{"id":98,"by":99,"text":100},"42826786","lawrencechen","Great work! Is it possible to resize grid rows\u002Fgrid cols directly in the editor? Similar to the bottom-right handle in react-grid-layout?…",{"value":102,"source":82,"evidence":103},"Support for other frameworks such as Angular",[104],{"id":105,"by":106,"text":107},"42828668","doberdog","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.…",[109,113],{"value":110,"source":82,"evidence":111},"How does it compare to Gridstack",[112],{"id":58,"by":59,"text":60},{"value":114,"source":82,"evidence":115},"How does it compare to Bootstrap Studio",[116],{"id":117,"by":118,"text":119},"42827389","ranger_danger","How does this compare to Bootstrap Studio?",[121,125,129],{"value":122,"source":82,"evidence":123},"Gridstack",[124],{"id":58,"by":59,"text":60},{"value":126,"source":82,"evidence":127},"react-grid-layout",[128],{"id":98,"by":99,"text":100},{"value":130,"source":82,"evidence":131},"Bootstrap Studio",[132],{"id":117,"by":118,"text":119},{"comments":43,"answered":134,"key":135},2,[136,139,142],{"id":137,"text":138},"42841504","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…",{"id":140,"text":141},"42841619","Thank you for the kind words! Makes it worth it.",{"id":143,"text":144},"42792942","Thank you!",{"commenters":34,"max_depth":42,"maker_replies":43,"first_comment_mins":146,"lifespan_hours":147},22,125,[149,151,153,155,157,159,160,162,164,166,168,170,171],[98,33,42,150,99,33],"project\u002Fneutral\u002Fdesign",[137,33,33,152,11,38],"project\u002Fneutral\u002Fidea",[89,38,43,154,90,33],"project\u002Fpositive\u002Fexecution",[140,38,33,156,11,38],"maker\u002Fpositive\u002Fnone",[85,134,43,158,86,33],"project\u002Fpositive\u002Fperformance",[143,134,33,156,11,38],[105,42,43,161,106,33],"project\u002Fpositive\u002Fnone",[163,42,33,152,11,38],"42841611",[58,32,42,165,59,33],"project\u002Fneutral\u002Fnone",[167,32,33,152,11,38],"42841600",[169,32,43,156,59,33],"42843814",[117,43,42,165,118,33],[172,43,42,152,173,33],"42830482","cdurth",[],[176,181,185,189,194,198],{"id":177,"name":178,"points":179,"category":180},"42797260","Byran's open-source laptop",3237,"hardware",{"id":182,"name":183,"points":184,"category":20},"42749402","Interactive systemd",546,{"id":186,"name":187,"points":188,"category":20},"42793777","Stratoshark",321,{"id":190,"name":191,"points":192,"category":193},"42796496","sms_llm",318,"creative",{"id":195,"name":196,"points":197,"category":20},"42738656","Mermaid Chart",230,{"id":199,"name":200,"points":201,"category":202},"42782295","Foqos",225,"productivity",false,"v2",{"id":206,"name":5,"line":6,"ai":203,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":207,"top":18,"kw":208,"maker":11,"domain":10,"tier":19,"attempts":33,"strip":209,"url":9,"mix":210,"praise":81,"objection":-1,"sub":21},42792149,0.35,[24,25,26,27,28],"3050505030533",[32,32,33,33],1794036668390]