Puck – Open-source visual editor for React

In plain words

Puck is an open-source visual editor that embeds page-building capabilities directly into React applications. It supports multi-column drag-and-drop layouts with CSS Grid and Flexbox, viewport previewing, and headless mode for custom interfaces. The tool integrates with any backend or CMS and is MIT licensed, making it suitable for internal tools and customer-facing products. Developers can control authoring behavior through permissions and use dynamic fields that adapt based on data.

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.

Puck is a modular, open-source visual editor for React.js. You can use Puck to build custom drag-and-drop experiences with your own application and React components. Because Puck is just a React component, it plays well with all React.js environments, including Next.js. You own your data and there’s no vendor lock-in. Puck is also licensed under MIT , making it suitable for both internal systems and commercial applications. // Editor.jsx import { Puck } from "@puckeditor/core" ; // Create Puck component config const config = { components : { HeadingBlock : { fields : { children : { type : "text" , } , } , render : ( { children } ) => { return < h1 > { children } </ h1 > ; } , } , } , } ; //…from github.com

In the maker’s words, at launch

I first shared Puck here back in Sept 2023, and wanted to give a quick update! Here's the original post: https:&#x2F;&#x2F;news.ycombinator.com&#x2F;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…

• 
  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…

• 
  Puck2025 · puckeditor.com · ▲188

  Open-source visual editor for React

• 
  Puck 0.18 adds drag-and-drop for CSS grid and Flexbox2025 · github.com · ▲51

  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…

• 
  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…

• AV
  A Visual IDE for React2022 · dev.aspect.app · ▲479

  I made this because building UIs in a lexical medium like code is super annoying. I have to pre-render what I’m making in my head, and then jump between the browser and IDE to test. I was inspired by the developer console in chrome and safari since I end up editing css there because it’s ironically more convenient. Hope it’s useful!

• 
  Grid.js2020 · gridjs.io · ▲322

  Free and open-source HTML table plugin that works everywhere

• 
  /dev/null▲481

  a social network for devs

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

• 
  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 · 27d 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 · 25d ago · github.com

• 
  OpenBot▲362

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

  Dev tools · 22d ago · openbot.run

• 
  Talanoa▲341

  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 · 20d ago · talanoa.email

• 
  CoreSpeed▲332

  One MCP for everything your agents need: apps, memory, tools

  Dev tools · 27d ago · corespeed.io

• 
  Tapflow 2.0▲1,125

  We built Tapflow for devs, designers, PMs, and tech folks who’ve been sitting on internal docs, templates, and systems — but never productized them. Upload a PDF, notes, or workshop deck, and Tapflow drafts a structured product (with chapters, teaser and pricing plans). It’s good for AI kits, onboarding guides, design systems, and frameworks. You can sell through Stripe, LemonSqueezy, or PayPal. Real-time collaboration is in early beta. No site builder, no LMS — clean design and just focused tools to ship. Fully bootstrapped and just launched on PH today →…

  Work · 2025 · tapflow.ai

• C9
  Clippy – 90s UI for local LLMs▲1,122

  Life & fun · 2025 · felixrieseberg.github.io

• 
  Appwrite Sites▲990

  Appwrite 2.0 brings a new engine, a rebuilt Console, five database types, an S3 API, an OAuth 2.1 server, and organization-level Domains and Firewall.

  Dev tools · 2025 · appwrite.io

• 
  AI Meeting Notes by Notion▲965

  Perfect meeting memory in Notion

  AI · 2025 · notion.com

• 
  Den▲948

  Multiplayer AI agent builder

  AI · 2025 · getden.io

• 
  Raycast for iOS▲870

  Powerful productivity on the go

  AI · 2025 · raycast.com