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?
Show HN: Puck – Open-source visual editor for React
21–30 of 105 posts
Re: Show HN: Puck – Open-source visual editor for React
#22Awesome. I've literally been tasked with building something exactly like this, and it's a pain in the ass nothing exists like this for Vue so I have to do it from scratch. I plan to make it more like builder.io/demo however where CSS can be arbitrary, that way basic landing pages can be built. Do you have any tips of things you wish you did differently, or what was more painful than you expected, as well as anything…
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…
I just published a dnd library for nested tree structures (https://www.npmjs.com/package/vue-tree-dnd), and I can't believe how much of a PITA dnd is! Working on browser-compatibility took me back to pre-jquery days...
Re: Show HN: Puck – Open-source visual editor for React
#23Is anyone here who has shifted exclusively to visual react builders ?
I have been writing react since version 0.11 and am considering shifting to a visual for day to day development.
Re: Show HN: Puck – Open-source visual editor for React
#24How 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?
We let the user decide how they want to store the data via the `onSave` and `onChange` callback props you provide to the `` 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
Re: Show HN: Puck – Open-source visual editor for React
#25Is it something like React Bricks?
Yeah, similar!
Re: Show HN: Puck – Open-source visual editor for React
#26Earlier 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…
I just published a dnd library for nested tree structures ( https://www.npmjs.com/package/vue-tree-dnd ), and I can't believe how much of a PITA dnd is! Working on browser-compatibility took me back to pre-jquery days...
Interesting.. do you think it's a good use case for a drag an drop editor compared to other DND out there?
Re: Show HN: Puck – Open-source visual editor for React
#27Can I make my own prop editor?
Ex. instead of an input for the prop `name` I want a picker that fetches data from some API
Re: Show HN: Puck – Open-source visual editor for React
#28How 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.
Re: Show HN: Puck – Open-source visual editor for React
#29How 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?
We let the user decide how they want to store the data via the `onSave` and `onChange` callback props you provide to the ` ` 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
I'm trying to understand if the layout immediately becomes brittle once the data is saved (unless someone goes in to the saved data and patches it by hand when the layout is updated).
Re: Show HN: Puck – Open-source visual editor for React
#30Can I make my own prop editor? Ex. instead of an input for the prop `name` I want a picker that fetches data from some API
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).