Hey hackers, OP here!<p>I've been dipping in and out of this problem space for the last few years with many of my clients.<p>Puck sits somewhere between an old-school WYSIWYG-powered CMS and headless one, allowing content teams to author content using real React components.<p>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.<p>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 <a href="https://measured.co" rel="nofollow noreferrer">https://measured.co</a> and on <a href="https://wellpaid.io" rel="nofollow noreferrer">https://wellpaid.io</a>. So far, so good<p>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.<p>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.<p>Looking forward to hearing your comments!
Wow, I've seen so many of these kinds of things over the years but this one is really special: extremely intuitive design, really powerful and flexible, and MIT licensed too. Super impressed.
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.<p>I plan to make it more like builder.io/demo however where CSS can be arbitrary, that way basic landing pages can be built.<p>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?
This is just so fantastic, I have been looking for something like this for the open-source edtech app builder Flow (<a href="https://github.com/opencurriculum/flow">https://github.com/opencurriculum/flow</a>) for the past year! Talked to the WebStudio guy and did so much research, but nothing was just right. This feels JUST. RIGHT.<p>Thank you for all the hardwork!
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.<p>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.<p>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.<p>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.<p>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.
Just love this. And trust me, I have seen many of these kinds , but this is really different in the right sense. So easy to add custom components and get going. Well done. Will definitely try more. Thanks for this.
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"<p>Like on the demo where it says <a href="https://puck-editor-demo.vercel.app/edit" rel="nofollow noreferrer">https://puck-editor-demo.vercel.app/edit</a> 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)
How do you keep the saved data props/values (title, description) in sync with the component props in the code? Let's say I change `description` to `subtitle` in the code, what happens to that information?
Nice, this looks pretty good.<p>It's always been my dream of having something like Retool, but using your own components and completely open source. Retool is a backend layer too, so that's partially what's missing to complete the picture. But if we had that as something like a framework, we'd start getting close to the days of drag-and-drop UIs.
What are the performance implications of this setup?. I dont know much about web stuff, but it seems like most of the markup would be hidden from the browser and so it wouldn't have much control over optimizing the rendering.
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?)
This looks very cool. Is anyone aware of something similar for Angular? We have a half-baked version that's been in pre-alpha for our webapp, but if there's something out of the box that we could leverage...
Well done. This looks great!<p>A couple of questions:<p>1. How easy is it to customise and extend the interface of the editor while still using the core of Puck?<p>2. This looks like it could be used to build an editor similar to Shopify's theme editor or is that a stretch?
Very cool. Are you familiar with plasmic.app? I'm expecting to integrate it into my next site build and would be curious for your take having built something in the same general category.
This is really slick! A really fluid and intuitive interface.<p>We use <a href="https://react-page.github.io/" rel="nofollow noreferrer">https://react-page.github.io/</a> (also MIT licensed) extensively at my startup; it attacks the same problem, and it's been incredibly effective (and hackable!).<p>Generally speaking, owning your own CMS data, in your own database, with a well-documented JSON data format, <i>and</i> adding the ability to take any React component you've written (that itself may interact with your own data) and make it not only reusable as part of a content editing system but also WYSIWIG, opens up a huge number of opportunities - including adding your own logic to transform content before display.<p><a href="https://builder.io" rel="nofollow noreferrer">https://builder.io</a> is another alternative that's very effective at the adapting-custom-components-to-WYSIWIG side of things, but does keep the data in its own cloud storage.<p>I'm really excited to see innovation in this space, and I'll be following Puck closely!
Is anyone here who has shifted exclusively to visual react builders ?<p>I have been writing react since version 0.11 and am considering shifting to a visual for day to day development.
Alternative meaning - Polish city nearby me :) <a href="https://en.wikipedia.org/wiki/Puck,_Poland" rel="nofollow noreferrer">https://en.wikipedia.org/wiki/Puck,_Poland</a>
Probably ia cliche now but ...<p>Have you considered integrating an LLM to expand the functionality?<p>Based on some recent experimentation I was able to get some fairly complex React UI and behavior out of a pair programing session ... without having a lot of React experience and skill myself. Seemed ripe with potential.
My only major gripe with it is React. Either go all the way and build something for Svelte that does this lowering the bar to the bottom on both creation and understanding of the UI layer <i>or</i><p>Do this with Rust and target Wasm abstracting away the hard / tedious parts of working with lower level languages and creating graphical applications.<p>Like this + Tauri would be an absolute powerhouse but as good as it is, it’s still just another React maker.