Live data from Hacker News

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

github.com

11–20 of 105 posts

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

#11
post #9

Earlier quoted context omitted.

If you're open to hosted service, is the best commercial visual + headless CMS I've come across that supports React - https://www.storyblok.com/home .

Does it allow embedding in an actual app? Thats the problem I have with these is they all require some weird form of going to their domain. I need the editor (AND the rendered page) to be 100% on my own domain. I wish they had some editor as an open source library and id just pay to have an API key or something

[deleted]

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

#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 bodies (how React would pass along props/state)

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

#16

Looks great, the animations of drag-drop looks really smooth. How is it done?

react-beautiful-dnd https://github.com/measuredco/puck/blob/cae760fbfb8497de0931...

Yup that's the one. Also recommend checking out [dnd-kit](https://dndkit.com), which we may migrate to at a later date.

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

#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 components in a columnar layout might be more challenging for this kind of toolset to handle.

Looking at the recipe for next.js app I noticed that the component where the page is rendered appears to be in `[...puckPath]/client.tsx` which is a "use client" component. That makes me wonder about the entire framework and whether or not it actually renders the pages on the client or the server.

If those two things are true then this might have limited application. Finding a way to handle responsive layout for columnar and/or grid based pages will be non-trivial. Finding how to mix server and client components effectively will be non-trivial.

That aside, it seems useful and decently structured. In places where we I've worked where there is a lot of customization desired, having a UI builder that customizes page layout in some data format (json or xml) has been very helpful.

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

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

Post reply on HN