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

In plain words

Puck 0.18 is an open-source visual editor for React that developers can embed into their applications using custom React components. The update introduces a new drag-and-drop engine with support for CSS Grid and Flexbox layouts, allowing developers to build page builders that function like design tools. It works by adding display properties to DropZone components, which Puck then handles automatically across multiple dimensions. Released under MIT license, it's designed for developers building no-code or low-code interfaces within their own products.

written from the facts on this page · September 2026

From the sources

The visual editor for React. Contribute to puckeditor/puck development by creating an account on GitHub.

Filter Loading Sorry, something went wrong. Uh oh! There was an error while loading. Please reload this page . Puck 0.18 introduces a new drag-and-drop engine with native support for CSS grid and flexbox, enabling you to embed a design-in-browser experience directly within your React application or page builder. Our flagship feature is a new drag-and-drop engine for Puck with full CSS grid & flexbox support to enable advanced layouts. We call these fluid layouts , and they are fully backwards compatible. Thanks to @clauderic at dnd-kit for all the support in making this possible, and the Puck community for all the feedback! 🙏 To implement a fluid layout, add your display property of choice…from github.com

In the maker’s words, at launch

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…

• 
  Puck2025 · puckeditor.com · ▲188

  Open-source visual editor for React

• 
  Puck – Open-source visual editor for React2025 · github.com · ▲32

  I first shared Puck here back in Sept 2023, and wanted to give a quick update! Here's the original post: https://news.ycombinator.com/item?id=37391848 Puck let’s you embed a page building experience within your own React application. It integrates with any backend or CMS, and since it’s MIT licensed, you can safely use it in internal tools or customer-facing products. A lot’s changed since then; here are my highlights: * Multi-column drag-and-drop with full CSS layout support (Grid, Flexbox, etc) * Viewport previewing * Headless mode for completely custom interfaces *…

• 
  Puck – Open-source visual editor for React2023 · github.com · ▲451

  Hey hackers, OP here! I've been dipping in and out of this problem space for the last few years with many of my clients. Puck sits somewhere between an old-school WYSIWYG-powered CMS and headless one, allowing content teams to author content using real React components. Traditional CMS solutions were flexible but often resulted in page that completely broke the brand guidelines. Headless CMS solutions are a fantastic way of controlling brand by restricting UI changes to developers, but makes layout changes restrictive and slow as developers often need to get involved. Puck provides a visual…

• 
  Dropflow, a CSS layout engine for node or <canvas>2024 · github.com · ▲404

  For the last 5 years I've been working on a layout engine that targets CSS2 and some more modern properties. Live demo: https:&#x2F;&#x2F;chearon.github.io&#x2F;dropflow&#x2F; It matches browsers in all cases I can find where they agree, and it's fast. It supports `position`, `inline-block`, `z-index`, and complex properties like `float` and `vertical-align`. It doesn't support high-level layout like flexbox or grid yet, but you can get intrinsics to easily divide space yourself and paint multiple layout trees. It has a great text layout implementation, and supporting non-Latin scripts is a…

• 
  Puck (Visual Editor for React) now supports viewport switching2024 · github.com · ▲6

  We've been working hard to add viewport previewing to Puck, our MIT visual editor for React, over the last few months. In order to get device-like viewport previewing with CSS media queries etc, you need to render your content within an iframe. Drag-and-drop is a core part of Puck's experience, but is famously difficult to pair with iframes. We didn't want to compromise Puck's experience, so we released two new packages to support this effort: 1) @measured&#x2F;dnd, a fork the underlying dnd library (@hello-pangea&#x2F;dnd, a maintained fork of react-beautiful-dnd) to support both iframes…

• 
  WebWave2023 · webwave.me · ▲509

  Ditch the grids, create websites like you design graphics

• 
  /dev/null▲490

  a social network for devs

  Dev tools · 4d ago · dev-null.sh

• 
  Run full iOS 16.5 firmware on Android Devices▲429

  Contribute to oosexgang/hackios-xnu-kernel development by creating an account on GitHub.

  Dev tools · 18h ago · github.com

• 
  Whiteboard (YC W26) – an open-source IDE for thoughtful software design▲423

  open-source IDE for thoughtful software design. Contribute to devdotfast/whiteboard development by creating an account on GitHub.

  Dev tools · 29d ago · github.com

• 
  Reladraw – A diagram language where you decide where to place things▲411

  Contribute to reladraw/reladraw development by creating an account on GitHub.

  Dev tools · 27d ago · github.com

• 
  OpenBot▲362

  Grok Bot alternative: free, local, open-source, multiplayer

  Dev tools · 24d ago · openbot.run

• 
  Talanoa▲346

  Hi HN, I’m a fullstack developer, and honestly, I’ve lost count of how many side projects I’ve worked on over the years. But one idea kept coming back to me: a different kind of email client. It first came to me in 2014: “What if we could handle emails more like conversations?” Every year, I’d revisit this concept in my “Build Notes.” Ten years later, no one had built exactly what I had in mind — so I finally decided to do it myself. That’s how Talanoa was born. I wanted something focused on people, not timelines. I was tired of marking messages as unread just to remember to reply later, or…

  Dev tools · 22d ago · talanoa.email

• 
  I made an open-source laptop from scratch▲3,237

  Hello! I'm Byran. I spent the past ~6 months engineering a laptop from scratch. It's fully open-source on GH at: https:&#x2F;&#x2F;github.com&#x2F;Hello9999901&#x2F;laptop

  Dev tools · 2025 · byran.ee

• TI
  Tetris in a PDF▲1,289

  I realized that the PDF engines of modern desktop browsers (PDFium and PDF.js) support JavaScript with enough I&#x2F;O primitives to make a basic game like Tetris. It was a bit tricky to find a union of features that work in both engines, but in the end it turns out that showing&#x2F;hiding annotation "fields" works well to make monochrome pixels, and keyboard input can be achieved by typing in a text input box. All in all it's quite janky but a nice reminder of how general purpose PDF scripting can be. The linked PDF is all ASCII so you can just open it in a text editor, or have a look at…

  Life & fun · 2025 · th0mas.nl

• 
  21st.dev▲1,211

  I originally built this app to organize and reuse interesting React + Tailwind components I came across on Twitter, inspired by the shadcn&#x2F;ui approach. Later, a friend started contributing their own components, and it got me thinking—this could grow into something bigger, like an NPM for design engineers to share and use components. Would love to hear your thoughts!

  Dev tools · 2025 · 21st.dev

• 
  JoggAI 2.0: AI Avatar Generator▲967

  Create lifelike, personalized AI avatars from text prompts

  AI · 2025 · jogg.ai

• 
  Lovable + Builder.io▲873

  Turn Figma designs into full stack apps with AI

  Dev tools · 2025 · figma.com

• 
  Cs16.css – CSS library based on Counter Strike 1.6 UI▲819

  CSS library based on Counter Strike 1.6 UI.

  Life & fun · 2025 · cs16.samke.me