Add astro recipe

[chrisvxd]

Description

Add astro.build recipe

Considerations

N/A

Proposals

Proposal 1

N/A

[sumukhj1219]

can I work upon this

[chrisvxd]

@sumukhj1219 yes, please do!

[chrisvxd]

@sumukhj1219 are you still working on this?

[FedericoBonel]

#1414 requested for this recipe, I'm attaching their feature request description to consider it when taking on this issue:

Description

Currently, Puck does not provide an example or integration demonstrating how it can be used with Astro. Astro is widely known for its content-focused use cases, including marketing sites, blogs, and documentation portals. This makes Astro a natural fit for Puck, as developers who build content-heavy websites in Astro would benefit from a visual editor that integrates smoothly with Astro's flat-file structure and Collections API. Puck is an open-source visual editor for React applications that enables developers to embed drag-and-drop editing experiences directly into their sites. Since Astro supports React components, creating an Astro + Puck starter or integration recipe would help expand Puck's adoption and showcase its framework-agnostic design philosophy. The expected outcome is to make Puck easy to use within Astro projects, either for local editing (writing to Astro's collections) or live editing in SSR mode with proper authentication.

Considerations

• Astro's React integration allows React components like Puck's editor to run seamlessly inside .astro files.
• Astro's Collections API stores structured content (Markdown, MDX, JSON) — aligning with Puck's portable JSON data model.
• The integration may need a bridge that converts Puck's output into Astro-readable collection entries (Markdown or JSON).
• For live editing, Astro's SSR adapters (e.g., Vercel, Node, Cloudflare) can handle server-side routes for Puck's onPublish event.
• Puck has no built-in authentication, so production use would require protecting the editor behind a login wall or /admin route.
• The Puck GitHub repo already includes examples for frameworks like Next.js and Remix, so an Astro recipe would fit naturally within that examples directory.
• This integration may inspire future work on adapters for other static-site frameworks that support React components.

Proposals

Proposal 1: Astro + Puck Starter / Integration Recipe

Create an official example and starter template demonstrating how to use Puck within an Astro project. The starter could include:

• A working setup of Puck embedded inside an Astro page using React components.
• Example configuration for reading/writing data to Astro's Collections (for static builds).
• An optional SSR-based example where Puck saves data via an API route instead of writing to files.
• A minimal authentication wrapper (optional) to show how to safely run Puck in production.
• Documentation and folder structure similar to:

examples/
  astro-puck/
    src/
    puck.config.ts
    astro.config.mjs

Example Developer Workflow

# Possible starter command
npx create-puck-app --template astro

Example Usage

---
// src/pages/editor.astro
import { Puck } from '@measured/puck';
import config from '../puck-config';
import Layout from '../layouts/Layout.astro';
---

<Layout>
  <Puck
    config={config}
    data={Astro.props.pageData}
    onPublish={(data) => saveToAstroCollection(data)}
  />
</Layout>

Pros

• Expands Puck's reach to Astro developers and static-site creators.
• Positions Puck as a visual editor for content-driven and hybrid websites.
• Demonstrates Puck's flexibility beyond React and Next.js.
• Encourages contributions and experimentation from the Astro community.

Cons

• Requires adapting Puck's file storage logic for Astro's static content workflow.
• Adds some maintenance overhead to support the new example.
• Authentication and SSR handling will depend on external user configuration.