Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

github.com

Post reply on HN
Print view View original

31–40 of 105 posts

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

#31

Post by jcuenod »

Exuma wrote: post #26
jcuenod wrote: post #22

Earlier quoted context omitted.

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?

It's not for editing UIs like the OP's post. This is for editing nested lists. So it's probably not what you're looking for. But I made it because when I looked for a vue library that could do what I needed, I didn't find one that I wanted to use/thought would work.

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

#32

Post by chrisvxd »

MuffinFlavored wrote: post #13

I would've expected some kind of WYSIWYG functionality for "make this API call and map the fields/properties of the response into the components" Like on the demo where it says https://puck-editor-demo.vercel.app/edit Users Reached 20M+, I thought instead of static text, it would've shown some kind of {{template}} that shows JSON query format like `jq` does to pluck fields from arrays/objects of fetch() response bodi…

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...

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

#33

Post by chrisvxd »

chrisvxd wrote: post #30
d0100 wrote: post #27

Can 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…

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

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

#34

Post by chrisvxd »

mono_spaced wrote: post #20
zoogeny wrote: post #19

This looks decent and the idea is sound. I was looking at headless CMS recently and it only vaguely struck me that what is needed is the front-end builder component. Looking at the comments from the dev in this thread it seems this really only supports vertically stacked layouts right now? At least the demos were responsive but each component seems to assume that it fills the width of the screen. Making responsive co…

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.

+1 what Scott said

Multi-column layouts are incoming very soon

And Puck does support either server or client rendering

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

#35

Post by chrisvxd »

nathancahill wrote: post #29
chrisvxd wrote: post #24

Earlier quoted context omitted.

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).

Sorry I got the wrong end of the stick. Please see my other reply to your comment.

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

#36

Post by Exuma »

jcuenod wrote: post #31
Exuma wrote: post #26

Earlier quoted context omitted.

Interesting.. do you think it's a good use case for a drag an drop editor compared to other DND out there?

It's not for editing UIs like the OP's post. This is for editing nested lists. So it's probably not what you're looking for. But I made it because when I looked for a vue library that could do what I needed, I didn't find one that I wanted to use/thought would work.

I'm assuming you researched a lot of other DND libraries when building. Did any stand out to you that were better than the rest? IE supporting nested structures, and looked to be programmed well. In my research I found about 8-10 of them and just thought... ugh, I will do this later, to decide between them

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

#37

Post by chrisvxd »

continuational wrote: post #17

Looks good - does it support callback props, and how do you enter them?

It pretty much supports anything that React supports, but it's not possible to pass callback props in directly via Puck's authoring form.

However, you might be able to either wrap your component inside the `render` function and define your callback there, or use context to pass in a function from higher up the tree.

If you share your use case, I might be be able to help you out.

Post reply on HN