<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:media="http://search.yahoo.com/mrss/"><channel><title>Puck on Adventures in Claude</title><link>https://adventuresinclaude.ai/tags/puck/</link><description>Recent content in Puck on Adventures in Claude</description><image><title>Adventures in Claude</title><url>https://adventuresinclaude.ai/og-default.png</url><link>https://adventuresinclaude.ai/og-default.png</link></image><generator>Hugo -- 0.166.0</generator><language>en-us</language><lastBuildDate>Mon, 28 Sep 2026 18:06:46 -0600</lastBuildDate><atom:link href="https://adventuresinclaude.ai/tags/puck/index.xml" rel="self" type="application/rss+xml"/><item><title>Building Book Sites with Puck</title><link>https://adventuresinclaude.ai/posts/building-book-sites-with-puck/</link><pubDate>Mon, 28 Sep 2026 18:00:35 -0600</pubDate><guid>https://adventuresinclaude.ai/posts/building-book-sites-with-puck/</guid><description>The magic under AuthorMagic&amp;#39;s book-site builder is Puck - an open-source React visual editor we embed, configure with our components, and extend with Claude.</description><content:encoded><![CDATA[<table cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="max-width:600px;width:100%;margin:0 auto;"><tr><td><div style="text-align:center;margin-bottom:24px;"><a href="https://adventuresinclaude.ai" style="display:inline-block;"><img src="https://adventuresinclaude.ai/images/email-header.png" alt="Adventures in Claude" width="600" style="max-width:100%;display:block;border:0;" /></a></div><p>I&rsquo;ve been working on <a href="https://authormagic.com/" target="_blank" rel="noopener noreferrer">AuthorMagic&rsquo;s website builder</a>
 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.</p>
<p>The breakthrough is <a href="https://puckeditor.com" target="_blank" rel="noopener noreferrer">Puck</a>
.</p>
<p>Puck is an open-source visual editor for React. It&rsquo;s MIT licensed. You don&rsquo;t send users to someone else&rsquo;s hosted canvas. You don&rsquo;t have to build a bunch of custom website editing code. Instead, you drop <code>&lt;Puck&gt;</code> into <em>your</em> app, hand it a config of <em>your</em> components, and it becomes a drag-and-drop page builder that speaks your app&rsquo;s language.</p>
<p>Think &ldquo;page builder&rdquo; or &ldquo;CMS&rdquo; but the blocks are real React components, not a foreign schema you have to translate or a bunch of code you have to build.</p>
<p>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&rsquo;t to rebuild everything. It was to build a lightweight translation layer between AuthorMagic&rsquo;s schema and Puck.</p>
<p>A thin data bridge converts between AuthorMagic&rsquo;s data structure and Puck&rsquo;s <code>Data</code> shape. This split matters. Phin and I can mutate schemas, adapters, and field factories without having to deal with a proprietary page blob.</p>
<p>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&rsquo;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.</p>
<p>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&rsquo;s own <code>@puckeditor/plugin-ai</code> 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.</p>
<p>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 <em>your</em> React catalog as config, keep your own JSON, hang AI off the field and plugin APIs. Don&rsquo;t rent a page builder and hope it grows a brain.</p>
<p>I&rsquo;m so impressed with <a href="https://puckeditor.com" target="_blank" rel="noopener noreferrer">Puck</a>
 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&rsquo;ll connect you with the founder.</p>
</td></tr></table>]]></content:encoded><media:content url="https://adventuresinclaude.ai/images/building-book-sites-with-puck-hero.jpg" medium="image"/><category>ai</category><category>authormagic</category><category>puck</category><category>claude</category></item></channel></rss>