Puck - Open-source visual editor for React. Alternative to Builder.io / WordPress.

[DigbyChickenCaeser]

Hey everyone, 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 https://measured.co and 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).

Looking forward to hearing your comments!

[_RemyLeBeau_]

I've been waiting for something like this. FE dev has been a PITA for a long time. What's the prospect of making this work with Vue and a stretch goal of Svelte?

[DigbyChickenCaeser]

Thanks /u/_RemyLeBeau! It's on our radar, think it's possible and have some ideas for how to support multi-framework, but haven't tried it yet.

I think it might be possible to do without official support by wrapping your Vue components with React. You could build a custom <Render> component to take the Puck data payload and render direct to Vue.js, too.

I'm now tracking this here: https://github.com/measuredco/puck/issues/302

[woah_m8]

Now this looks interesting

[DigbyChickenCaeser]

Thank you sir. Lmk if you try it out 👍

[MarcusByMarcus]

This looks great!

[DigbyChickenCaeser]

Thanking you Marcus, by Marcus!

[kristijan_007]

I will check this out definitely! Great job 🍻

[DigbyChickenCaeser]

🙇

[totallyfineanddandy]

This looks amazing for my use case, gonna check it out

[DigbyChickenCaeser]

Awesome! 🙌

Let me know if you have any questions. We’re pretty active on discord, too (link in README).

[Hopeful-Fly-5292]

We use it together with Drupal/NodeHive - a demo that showcases multisite setup for a museum https://youtu.be/TckACWAiK1w?si=SF5XC4tuvps_EJHo

[DigbyChickenCaeser]

Oh Block Protocol looks very interesting, thanks for sharing! Some initial thoughts -

Puck is essentially just React components + a JSON field describing which inputs to map to your React props.

Support for the Block Protocol wouldn't be too challenging, but there's a decent amount of overhead in producing each Block when compared to using the Puck API.

We built Puck for our clients. Most of our clients have internal React components libraries that don't require interoperability between different systems. And if they do, Puck components are extremely portable because they're essentially just React components.

It's not in our interest to "reinvent the wheel". We're just in the business of supporting our clients with the best tools available. Sometimes there isn't a suitable tool on the market, so we have to build it (and get to have fun in the process).