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

41–50 of 105 posts

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

#41

Post by albert_e »

shivekkhurana wrote: post #23

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

I am probably your opposite ... I recently learnt basic React in a weekend and built a functional MVP webapp by hand.

For a second iteration of the app, I asked ChatGPT (Plus) to help me. Gave it existing code and gave increasingly specific UI and behavior requirements. After a few hours of pair programming ... I had a working new page (with backend API integration). The UI behavior I wanted went fairly deep -- with a lot of conditional logic to render styles, handle double clicks on text to make them editable form fields, etc.

I am impressed with this approach at least for prototyping and MVPs.

The resulting page was surely not very maintainable due to the complexity of embedded logic and conditionals ... but again I wouldnt have managed to manually code such complexity myself. Maybe if forced to do it manually i would have learnt more, modularized my code more, but spend a week instead of a day achieving the result. I am not a career developer -- so for my use case I will take this productivity boost.

I think there is a great opportunity to merge a visual UI builder like this (puck) and an LLM backend/interface to radically improve productivity and make prototyping as well as building real apps (production grade, modularized, maintainable) much more easier to build.

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

#44

Post by chrisvxd »

satvikpendem wrote: post #43

This is exactly what Framer did before pivoting to a website builder, it might be worth looking into them. How will you be different than them?

Framer is a design tool, but Puck is a content tool. We're focused on allowing content teams to create pages using existing on-brand components. Like a WYSIWYG with guard-rails.

We built it because we couldn't find something that would let our clients' content teams produce content for their sites without 1) either going off-brand or 2) pestering their devs for layout changes.

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

#45

Post by MuffinFlavored »

chrisvxd wrote: post #32
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...

I was trying to give feedback on how you might make your product "more attractive"/increase value proposition to the type of person you are aiming to help this with: people who want to make a React UI through a GUI instead of in a text editor.

I know how to pull data in via React/JavaScript "code". If I can do that, I'm technical enough to not need a GUI to help me make a UI... do I?

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

#46

Post by jcuenod »

Exuma wrote: post #36
jcuenod wrote: post #31

Earlier quoted context omitted.

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

Well, there are obvious leading contenders like `https://sortablejs.github.io/Sortable/` and, within the `vue` space, `https://sortablejs.github.io/vue.draggable.next/`. Most of the stuff I looked at was unmaintained (lots not updated for vue3).

I really disliked the vuedraggable was handling nesting, and it's just a wrapper around a sortable. At the end of the day, my problem was simple enough that I didn't want a 500kb dependency. If you're wanting to do something like the OP but with nesting, I'd definitely start by looking at Sortable, though (maybe wrapping it the way you want).

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

#48

Post by mattront »

Exuma wrote: post #6

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

Take a look at the Vue Designer [0] (it is our app), an editor that let's you visually build Vue projects, not just using existing components. You can even build components with the editor.

[0] https://vuedesigner.com

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

#49

Post by bingemaker »

MuffinFlavored wrote: post #45
chrisvxd wrote: post #32

Earlier quoted context omitted.

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

I was trying to give feedback on how you might make your product "more attractive"/increase value proposition to the type of person you are aiming to help this with: people who want to make a React UI through a GUI instead of in a text editor. I know how to pull data in via React/JavaScript "code". If I can do that, I'm technical enough to not need a GUI to help me make a UI... do I?

Even if you are technical enough, you might still need a GUI to avoid any surprises. Also the end user of this tool is not tech people, but content managers

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

#50

Post by chrisvxd »

nvegater wrote: post #42

This looks very nice ! How would you compare it with slatejs, tiptap or lexical ? Is this only for layouts but not for content ? (Would it be very hard to include some rich text and make it work like a cms with rich text editing?)

Thanks! It’s possibly I’m misunderstanding, but I believe Puck is a different problem space to the other solutions you’ve mentioned -

Puck enables content teams to produce web pages using existing React components produced by their React developers in a fixed and predictable manor that keeps them within the brand guidelines.

You can’t inject arbitrary blocks and can only interact with components that are defined by your developers.

You can render fully fledged pages or even, in theory, applications.

Regarding content, Puck supports inline editing or pulling in data via an API adaptor (such as from a headless CMS).

We don’t have a rich text field type currently, but I’m not opposed to adding it. (Internally, we’ve added a markdown component to enable some basic formatting and longer form content: https://github.com/measuredco/measuredco-site/blob/02fc908b8...)

Post reply on HN