chrisvxd

We launched the open-source Puck visual editor nearly 3 years ago, before AI had hit mainstream.

Since then, AI has transformed how we build software, but most of the productivity gains have gone to developers.

We're looking to change that by building on our open-source core, putting an AI builder inside every SaaS product, internal tool, and CMS.

Puck AI lets your users can generate and edit production-ready interfaces without ever leaving your product.

You can control what components are available, what backends are available, and where you store the final output (it's just JSON).

Excited to finally announce this after months of testing! Thanks for the support.

Ha! Can understand the optics but they’re not fake. I shared the post with the Puck community and they’re being very kind with their comments.

Puck should definitely support that workflow, too! If you need any support, we're active on Discord (link in README)

You're welcome!

Thank you for being a sponsor. You're awesome.

Hey, what a lovely comment! Thank you for taking the time to leave it!

Greatly appreciated. See you in the Discord.

Thank you for the kind words! Makes it worth it.

Thank you!

I would love to add support for other frameworks too, see https://github.com/measuredco/puck/issues/302

There's definitely some overlap!

Gridstack is a great tool for building complex grid layouts with drag and drop for specific use-cases.

Puck is for creating a complete page building experience, which includes not only drag and drop, but also user input via fields, viewport previewing, APIs for fetching data, etc.

Gridstack also provides it's own grid system, whereas Puck currently is unopinionated, supporting any component library that uses `display: grid` internally.

That would be wonderful, but will require some further work. Puck doesn't provide a grid, but it supports user grid implementations.

To support something like you're suggesting would likely require an official Grid component, which I'm now tracking here: https://github.com/measuredco/puck/issues/843

Thank you!

This is awesome. Nice one!

Wonderful - happy you decided to make this open source!

Hello fellow hackers!

We launched Puck in September on Hackernews (https://news.ycombinator.com/item?id=37391848) 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 (today's v0.13 release)

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 as always!

Absolutely useless fun tech demos are the best kind of demos

https://github.com/lpereira/lwan - presume this is the web server library you're referring to? Very cool.

Tracking this here, with proposal: https://github.com/measuredco/puck/issues/41

The data model is detailed here in the docs: https://github.com/measuredco/puck#data

There's not an awful lot to it.

I'm not aware of anything. You could potentially use Puck directly if you wrap your Angular components inside React components for the purpose of editing, and build a custom version of `<Render>` that walks the data object and renders straight to angular.

Thanks! Some answers for you:

1. You can override a bunch of stuff using React-like APIs. `renderHeader` allows you to take over the header, and the plugin API allows you to wrap the root of the preview content page and take over the fields area on the right hand side. We don't yet support full take-overs, but we'll continue to work on these. Plugin API: https://github.com/measuredco/puck#plugins

2. I think you should be able to mimic a bunch of the behaviours. The main missing piece is multi-column support, which is landing soon via the `nested-dropzones` branch: https://github.com/measuredco/puck/pull/37

Thanks for sharing react-page! I hadn't come across this before.

Builder.io is great but the hosted nature made it a non-starter for us.

The name comes from (ChatGPT-researched) folklore: https://en.wikipedia.org/wiki/Puck_(folklore)

Puck is a... fairy... [that takes on] the shape of animals

Puck is also a little, er, mischievous and sometimes seen as a demon. But we prefer the first interpretation.

Great idea - could add this as a core field type so you can use it via the fields API, i.e. `{ type: "css", cssProperties: ["color"] }`

Oh, awesome. Let me know how you get on!

React is what we needed for our use case, but maybe we can eventually evolve it to a place where it can be used with different frameworks.

Great idea - might update it once the dust has settled.

Thank you!

Yes, but turns out I don't know enough about it. Related thread: https://news.ycombinator.com/item?id=37395707

Oh that's fantastic. I wasn't aware and applaud the decision to go open source.

Happy to discuss/collaborate. I'm @chrisvxd on GH/Twitter, and here's my LinkedIn: https://linkedin.com/in/chrisvilla/

Puck is for integrating with your existing component library, so not completely no code.

Having said that, a developer could add any type of form input as a type of component!

Typically marketing sites and blog posts etc. It could probably be extended to applications, but that’s not what we built it for.