We've been working hard to add viewport previewing to Puck, our MIT visual editor for React, over the last few months.<p>In order to get device-like viewport previewing with CSS media queries etc, you need to render your content within an iframe.<p>Drag-and-drop is a core part of Puck's experience, but is famously difficult to pair with iframes.<p>We didn't want to compromise Puck's experience, so we released two new packages to support this effort:<p>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.<p>The result is a seamless drag-and-drop experience across iframes with true viewport previewing that we're very excited about!<p>Thank you to our wonderful contributors and the HN community for such great support!