Show HN: Puck (Visual Editor for React) now supports viewport switching (opens in new tab)

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 and CSS transforms 2) @measured/auto-frame-component, an iframe package that syncs the styles between the host and same-origin iframe.

The result is a seamless drag-and-drop experience across iframes with true viewport previewing that we're very excited about!

Thank you to our wonderful contributors and the HN community for such great support!