Autonnel v0.1.0
Get started

Puck editor

The drag-drop component editor, the component catalog, and island-rendering behavior.

The visual page builder backs the manual drag-drop, AI generation, and template creation paths. It enables Island rendering, funnel-aware links, and component-level prop editing.

Opening the editor

Navigate to Pages, select a page, and click Edit. The editor has three panels:

  • Left palette — all available components, organized by category. Drag any component onto the canvas to add it to the page.
  • Center canvas — a live preview of the page layout. Click any component to select it.
  • Right props panel — editable properties for the currently selected component.

Component catalog

Layout

  • HeroBanner — full-width hero section with background image, headline, subheadline, and CTA button. Supports fullWidth.
  • CheckoutLayout — the structural wrapper for checkout pages; contains address, payment, and summary regions.
  • FloatingOrderBar — a bar fixed to the bottom of the viewport showing the cart total and a checkout CTA.
  • AnnouncementBar — a slim top bar for promotional messages with configurable background color and link.
  • StoreNavBar — top navigation with logo, nav links, and optional search and cart icons.

Product

  • ProductShowcase — multi-image carousel with product title, description, and key details.
  • ProductSelector — a 2×2 grid product picker with variant selection and a “Most Popular” badge option.
  • ProductCardGrid — a customizable grid of product cards with image, name, price, compare price, badge, and link.
  • CategoryGrid — a grid of category tiles with circular or square images, category name, and link.
  • StockCounter — displays remaining inventory count to create urgency. Supports fullWidth.
  • DiscountBadge — a circular badge showing a discount percentage alongside a headline.

Checkout

  • AddressForm — the customer shipping address form. Interactive; hydrated client-side.
  • PaymentForm — the payment form integrating PayPal and Stripe. Interactive.
  • PayPalExpressButton — the PayPal one-click express checkout button. Interactive.
  • OrderSummary — line items, subtotal, discounts, shipping, and total. Interactive (responds to product selection and coupons).
  • OrderDetails — post-purchase order confirmation details. Interactive (requires order data injection).
  • CouponInput — a standalone coupon code entry field. Interactive.
  • ExpressCheckout — the PayPal express checkout block with an “Or” divider above the standard form.

Upsell

  • AddToOrderButton — the primary upsell accept button. Interactive; triggers the upsell API call.
  • CountdownTimer — a visible countdown clock for time-limited offers. Interactive.
  • MiniCountdown — a compact HH:MM:SS countdown strip. Interactive.

Content

  • CustomerReviews — a vertical list of customer review cards.
  • ReviewCarousel — horizontally scrolling review slides.
  • FAQSection — an accordion-style FAQ block.
  • ExpertSection — a featured expert or endorsement block.
  • UsageSteps — numbered steps explaining how to use a product.
  • ImageTextSection — a side-by-side or stacked image and text layout.
  • RichTextContent — a rich text block for long-form copy.
  • BenefitsList — a checkmark-icon list of product benefits.
  • SimpleImage — a configurable image with size, alignment, and style options.
  • SaleBanner — a gradient promotional banner. Supports fullWidth.
  • TextCtaBanner — a centered headline with a CTA button, no image.

LP advertorial

  • StickyLpHeader — a sticky top bar with countdown timer, logo, and scroll progress bar. Interactive; supports fullWidth.
  • SaleCta — a promotional CTA strip with headline, product image, link button, and trust copy.
  • Footer — the page footer with links and legal text. Supports fullWidth.
  • CheckoutFooter — a minimal checkout footer with brand name and navigation links. Supports fullWidth.
  • SSLNotice — a lock icon with “256-bit encrypted” trust signal.
  • FeatureIconsBar — an icon row for free-shipping, secure payment, and similar trust features. Supports inline and card layouts.
  • OrderTracking — a form where customers enter their email to look up order status. Interactive.

CTA buttons and navigation links support a funnel-cta link type in addition to plain URLs. A funnel-cta link does not point to a hard-coded URL; at render time, it resolves to the correct next step for the current funnel. This means you can reuse the same page across multiple funnels without editing the links.

When building landing pages that feed into a funnel, set CTA button links to funnel-cta. The funnel configuration determines where the click goes.

Full-width breakout

Some page layouts set a maximum content width. Components that should extend their background color or image edge-to-edge while keeping their inner content within that width use the fullWidth prop.

Set fullWidth to true on any supporting component.

Components that support fullWidth: HeroBanner, Footer, SaleBanner, StockCounter, UpsellHeroSection, CheckoutFooter, StickyLpHeader.

Island rendering

Interactive components (forms, payment buttons, timers) load JavaScript on the client; static components are server-rendered only. This makes pages fast without needing manual optimization.

Autosave and publishing

Every edit in the visual editor is autosaved to your draft immediately. There is no manual save button. Clicking Publish promotes the current draft to the live version. Visitors always see the published version, not the draft.

Caveats

  • Adding a new component requires a code change; you cannot add components from the admin UI.
  • The editor JavaScript only loads on the editor route, not on public storefront pages.