Show HN: Puck (Visual Editor for React) now supports viewport switching

6 points

2 years ago

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!