Puck (Visual Editor for React) now supports viewport switching
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/dnd, a fork the underlying dnd library (@hello-pangea/dnd, a maintained fork of react-beautiful-dnd) to support both iframes…
Puck (Visual Editor for React) now supports viewport switching launched on April 18, 2024 with 6 votes, #1,635 of 4,347 launches that month and more than 50% of that year's launches. The site was still online in September 2026, 2 years on.
What it does
The visual editor for React. Contribute to puckeditor/puck development by creating an account on GitHub.
Puck v0.14.0 introduces the long awaited viewport switching feature, with drag-and-drop-friendly iframe rendering for full CSS media query support. Puck now supports viewport switching with full iframe rendering, without compromising the drag-and-drop experience. This was a significant effort that required patching the underlying drag-and-drop library to support iframes and CSS transforms , and introducing a new library for syncing styles between host and iframe. Viewports are enabled by default, and can be customized by passing an array to the viewports API . Both number and array fields now accept min and max parameters, allowing you to control the minimum and maximum values (or number of…from github.com
In the maker’s words, at launch
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…
Does a similar job
all alternatives →
Puck – Open-source visual editor for React2025 · github.com · ▲32I 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 0.18 adds drag-and-drop for CSS grid and Flexbox2025 · github.com · ▲51Hey 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 – Open-source visual editor for React2023 · github.com · ▲451Hey 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…
- AVA 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!
More growth this month
the category →
wallhop is a free paywall bypass. Paste any article link to read it without paywall popups, ads or clutter. No signup, no extension. A simple 12ft.io alternative.
Growth · 12d ago · wallhop.io
Source: Show HN post ↗ · launch text quoted in part
Launched alongside, April 2024
the whole month →
Supabase▲2,325The Postgres developer platform is now generally available
Dev tools · 2024 · supabase.com
Cal.com Platform▲1,601Build your pixel-perfect booking experience with Atoms
Dev tools · 2024 · cal.com
deco.cx 2.0▲1,078Build web apps 10x faster with Deno, JSX, TS & Tailwind
Dev tools · 2024 · decocms.com
