I’ve been working on AuthorMagic’s website builder for a few months and had a huge breakthrough over the summer. We are releasing a full product alpha on 10/1 with the goal of now having AuthorMagic in production by the end of the year.
The breakthrough is Puck .
Puck is an open-source visual editor for React. It’s MIT licensed. You don’t send users to someone else’s hosted canvas. You don’t have to build a bunch of custom website editing code. Instead, you drop <Puck> into your app, hand it a config of your components, and it becomes a drag-and-drop page builder that speaks your app’s language.
Think “page builder” or “CMS” but the blocks are real React components, not a foreign schema you have to translate or a bunch of code you have to build.
AuthorMagic already had forty-two components making up the author-site vocabulary. Things like Book Info, Reviews, Purchase Links, Sample Chapters, Events, and Contact Info. The Puck work wasn’t to rebuild everything. It was to build a lightweight translation layer between AuthorMagic’s schema and Puck.
A thin data bridge converts between AuthorMagic’s data structure and Puck’s Data shape. This split matters. Phin and I can mutate schemas, adapters, and field factories without having to deal with a proprietary page blob.
The data can be live (from the AuthorMagic database), sampled (chosen by the author from the database), or manually entered by the author. If it’s live, it can be dynamically updated as new data appears. For example, the Reviews block can read what AuthorMagic already knows about the book, instead of making someone retype Amazon reviews.
There are two AI layers on top of this editor. One is ours: a copy-assistant layer that knows book context and can rewrite a field or reshape a page through structured actions. The other is Puck’s own @puckeditor/plugin-ai that includes a design mode that can invent markup inside the same canvas so the author can create custom pages by just typing what they want in the app.
If you are building anything in React where non-engineers need to rearrange real product components, this pattern is worth stealing: embed a visual editor that takes your React catalog as config, keep your own JSON, hang AI off the field and plugin APIs. Don’t rent a page builder and hope it grows a brain.
I’m so impressed with Puck that I decided to invest in the company. If you are a seed investor and this is your cup of tea, toss me an email and I’ll connect you with the founder.
