puck

I 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 * Permissions API to lock down authoring behaviour * Dynamic fields that adapt based on data The first Hacker News post was instrumental to Puck’s growth—when I first shared it, Puck had 6 stars and grew to 1,700 in 24 hours. It’s now approaching 7,000 stars. Thank you! Always

Thank you! I would love to add support for other frameworks too, see https://github.com/measuredco/puck/issues/302

That would be wonderful, but will require some further work. Puck doesn't provide a grid, but it supports user grid implementations. To support something like you're suggesting would likely require an official Grid component, which I'm now tracking here: https://github.com/measuredco/puck/issues/843

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 and feedback. It would not be possible without you! If you've not heard of Puck, it's is an open-source visual editor for React that I maintain, available under MIT so you can safely embed it in your product. Some background: This is the culmination o

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! Tha

Tracking this here, with proposal: https://github.com/measuredco/puck/issues/41

The data model is detailed here in the docs: https://github.com/measuredco/puck#data There's not an awful lot to it.

Thanks! Some answers for you: 1. You can override a bunch of stuff using React-like APIs. `renderHeader` allows you to take over the header, and the plugin API allows you to wrap the root of the preview content page and take over the fields area on the right hand side. We don't yet support full take-overs, but we'll continue to work on these. Plugin API: https://github.com/measuredco/puck#plugins 2. I think you should be able to mimic a bunch of the behaviours. The main missing piece is multi-column support, which is landing soon via the `nested-dropzones` branch: https://github.com/measuredco/puck/pull/37

You can certainly configure it to work with GraphQL if you need to. See this adaptor for an example on how to integrate with external data sources: https://github.com/measuredco/puck/tree/main/packages/adapto...

This might be a better example, actually: https://github.com/measuredco/puck/tree/main/packages/adapto...

We don't natively support templating strings, but since it's rendered by React, you can always add that when integrating Puck. However you can use an adaptor if you need to pull data in via a third party API: https://github.com/measuredco/puck/tree/main/packages/adapto...

You can use adaptors for this. Adaptors let you request a third party API via the `adaptor` field type. Docs are limited, but there's a reference data shape here: https://github.com/measuredco/puck#adaptor Example implementation here: https://github.com/measuredco/puck/blob/main/packages/adapto... Example usage here: https://github.com/measuredco/puck/blob/main/apps/demo/app/c... You can either use it for a specific prop (i.e. `name`) or spread the result of the API call across your entire component (use the magic `_data` prop).

We let the user decide how they want to store the data via the `onSave` and `onChange` callback props you provide to the `<Puck>` component. So you would likely save to your own database in the callback. The data shape is detailed here: https://github.com/measuredco/puck#data

Scott from Measured here, we're dog-fooding puck on https://measured.co. There's a WIP branch with support for more sophisticated layouts here: https://github.com/measuredco/puck/tree/nested-dropzones And I think `use client` is a Next 13 thing. Not sure of the details, but Puck definately does render server-side.