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

1–10 of 105 posts

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

#1

Post by chrisvxd »

Hey hackers, OP here!

I've been dipping in and out of this problem space for the last few years with many of my clients.

Puck sits somewhere between an old-school WYSIWYG-powered CMS and headless one, allowing content teams to author content using real React components.

Traditional CMS solutions were flexible but often resulted in page that completely broke the brand guidelines. Headless CMS solutions are a fantastic way of controlling brand by restricting UI changes to developers, but makes layout changes restrictive and slow as developers often need to get involved.

Puck provides a visual editor for React that can sit on top of your existing headless CMS (or act as standalone). We've been dog-fooding it on a few pages at https://measured.co and on https://wellpaid.io. So far, so good

The API is built for React, which allows FE devs to quickly integrate their existing component and add some form fields for author input, or connect it to a headless CMS of choice.

It's open-source under MIT, and pairs nicely with Next.js (check out the demo application). Next in the pipeline: support for multi-column layouts, richer demos, new plugins.

Looking forward to hearing your comments!

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

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

#5

Post by chrisvxd »

talboren wrote: post #3
talboren wrote: post #2

looks awesome, a small screenshot in your readme would have helped understand that it's more of a drag and drop component

"open source visual editor" doesn't really comply with "The self-hosted drag and drop editor for React."

Hey, thanks for the feedback! We're still figuring out the wording and will take this on board.

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

#6

Post by Exuma »

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 that might help in this?

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

#7

Post by chrisvxd »

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…

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). This hasn't landed in our main branch yet, but you can see it under the nested-dropzones branch (https://github.com/measuredco/puck/tree/nested-dropzones).

If you could write React wrappers for your Vue components, you could potentially leverage Puck directly. That would save a lot of time. And even if not, you might be able to fork it or reuse the data model.

Happy to give you more pointers. If you want to DM, I'm @chrisvxd on Twitter/GitHub and here's my LinkedIn: https://linkedin.com/in/chrisvilla/

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

#8

Post by agotterer »

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

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…

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.

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

#9

Post by Exuma »

agotterer wrote: post #8
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…

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
Post reply on HN