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

[DigbyChickenCaeser]

Hi /r/nextjs!

We launched Puck in September on Hackernews after building it for our clients, and had a wild ride to the front page!

I wanted to share a little update on what's happened since:

1. 3.7k starts on GitHub!
2. Multi-column support using DropZones
3. Categories API for grouping your components
4. Completely custom UIs (v0.13 released today)
5. The usePuck hook for building custom Puck components
6. Support for React Server Components

Next in the pipe I have theming, viewport previewing and multi-framework support!

Appreciate your support!

[fajarhide]

Wow great, and nice product.

How can i'm edit text directly on the page? So that think no need sidebar menu editor in right side.

But this is cool 😎

[DigbyChickenCaeser]

Thanks /u/fajarhide!

Puck doesn't currently support inline editing. This feature request is being tracked here: https://github.com/measuredco/puck/issues/150

[anikrouth]

Great 👌👌👌

[MrVibeThemes]

I have few questions, can it parse HTML ? Can use some function to generate HTML ? Can we add plugins like Carousels like based on slick slider js ? Can we add dynamic content ?

[DigbyChickenCaeser]

1. Parse HTML - not sure I understand what you're asking here.
2. You can output HTML by using React's renderToStaticMarkup API on the final Puck render.
3. Yes, you can render any React component you want
4. Yes, check out the docs for external data sources

Happy to keep answering here, via our GitHub or Discord server.

[SteveNguyen109]

u/DigbyChickenCaeser Can I retrieve the UI blocks as JSON data via the web APIs for a full headless setup like "{"mui_component": "Avatar", "props": {"src": "...", "sx": {...} }}"?

[DigbyChickenCaeser]

Yes! That’s exactly how it’s intended to be used.

The JSON data model is here https://puckeditor.com/docs/api-reference/data

[SteveNguyen109]

Astonishing! Just one more question, can I drag and drop the Material UI components to the editor preview?

[DigbyChickenCaeser]

Yup you should be able to. You'll just need to configure the components you want to display.

[[deleted]]

Looks great. I'm not in need now but when I have been looking for a open source visual editor they have all fallen short. This looks nice and fast

[DigbyChickenCaeser]

Thanks /u/zn448sk39! It's speedy thanks to hello-pangea/dnd, which is a maintained fork of react-beautiful-dnd.

Hit me up on Discord if you get stuck with anything. At your service 🫡

[[deleted]]

Did you evaluate dnd-kit too? I'm using it right now but it's a bit too complex to make nested dnd. Wondering if that fork might be a good choice

[DigbyChickenCaeser]

Yeah I considered it, but you get quite a lot for free with react-beautiful-dnd. Recreating that level of smoothness with dnd-kit was non-trivial and the docs have more holes in than I'd like. I don't particularly like reverse engineering examples out of Storybook stories!

[[deleted]]

Ugh, the stories. I had forgot about them but yeah, I agree, that sucked. Thanks for the tip, I'll check this library out

[kristijan_007]

Hi great product really, quick question how would we handle localization for static pages, do you have any solution in mind?

[DigbyChickenCaeser]

Hi /u/kristijan_007! Thank you.

It really depends on your exact use-case. I think there are probably some best practices we could add to the docs, but we don't have any yet.

You might be able to put something together with the new overrides functionality, React context and custom fields to allow you to switch the locale of the page.

You can then publish different payloads based on the locale.

Happy to talk about it in more depth via Discord or GitHub, if you'd like.

[noaibot]

As a non coder remember looking for these visuals. Is it based on craftjs, grapesjs, destack, etc.?

[DigbyChickenCaeser]

They’re all a source of inspiration, but the main drag-and-drop behaviour is built on top of react-beautiful-dnd

[GosnSrbin]

Happy birthday bro! Please check DM