Show HN: Puck – Open-source visual editor for React • Hacker News Board

Re: Show HN: Puck – Open-source visual editor for React

#101

Post by chrisvxd » Wed, Sep 06, 2023, 7:51 AM UTC

promhize wrote: post #93

Well done. This looks great! A couple of questions: 1. How easy is it to customise and extend the interface of the editor while still using the core of Puck? 2. This looks like it could be used to build an editor similar to Shopify's theme editor or is that a stretch?

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

Re: Show HN: Puck – Open-source visual editor for React

#102

Post by chrisvxd » Wed, Sep 06, 2023, 7:53 AM UTC

nraf wrote: post #96

This looks very cool. Is anyone aware of something similar for Angular? We have a half-baked version that's been in pre-alpha for our webapp, but if there's something out of the box that we could leverage...

I'm not aware of anything. You could potentially use Puck directly if you wrap your Angular components inside React components for the purpose of editing, and build a custom version of `` that walks the data object and renders straight to angular.

Re: Show HN: Puck – Open-source visual editor for React

#103

Post by chrisvxd » Wed, Sep 06, 2023, 7:54 AM UTC

satvikpendem wrote: post #66

chrisvxd wrote: post #7

Earlier quoted context omitted.

It's such a common problem, I'm amazed there aren't more solutions out there. A sound data model really helps things out. I'd go API-first. Drag and drop is a PITA. Specifically multi-column layouts, which require nested dropzones and a bunch of "intuitive" UX. A good library can help here, but not do everything (we're using react-beautiful-dnd which is a bit out of date - dnd-kit might have been a better shout). Thi…

Are there more details on the data model? I'm actually building something like this but not for React, so it might be useful to reuse the data model as you say.

The data model is detailed here in the docs: https://github.com/measuredco/puck#data

There's not an awful lot to it.

Re: Show HN: Puck – Open-source visual editor for React

#104

Post by quadrature » Wed, Sep 06, 2023, 3:11 PM UTC

What are the performance implications of this setup?. I dont know much about web stuff, but it seems like most of the markup would be hidden from the browser and so it wouldn't have much control over optimizing the rendering.

Re: Show HN: Puck – Open-source visual editor for React

#105

Post by chrisvxd » Wed, Sep 06, 2023, 4:44 PM UTC

chrisvxd wrote: post #28

nathancahill wrote: post #21

How do you keep the saved data props/values (title, description) in sync with the component props in the code? Let's say I change `description` to `subtitle` in the code, what happens to that information?

I just re-read your comment and realised I didn't answer it first time around. The best way to handle this is in the render function you pass to Puck, which can continue to support the old prop (`description`) and map into the new prop (`subtitle`), even if it's not provided by the author. We don't have a system for migrating props in the actual data yet, but it's something we could look into.

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