Astro

Edit your Astro site with AI.

Q: Does it work with a static Astro build?

Yes. The pages you list in editablePages render on demand during astro dev and are prerendered in the build, so the published site stays static.

Q: What does it need in production?

DRAFT_MODE_SECRET to authorize draft renders, a publish token for the publish route, and editorOrigins , which is also the CORS allowlist for the editor API. astro dev needs none of these, which is why they are easy to miss.

The Avocado Studio integration for Astro gives your site an AI editor with click-to-select editing and a live draft preview, while your own .astro components do all the rendering. No React islands, nothing ported, no second copy of your templates.

Read the docs Try the live demo

Framework: Astro 5 or later
Package: @avocadostudio-ai/astro
Rendering: Your own .astro components, no React
Publishing: Back to files in your repo, or to your CMS
AI models: Your Anthropic, OpenAI or Google Gemini key
Licence: Apache-2.0, free to self-host

One integration in astro.config

Install the packages, add the integration, and name two things: the content module that says where your pages come from, and the pages that are editable. The integration mounts the editor API routes, injects the preview bridge and makes those pages render on demand in astro dev.

// npm install @avocadostudio-ai/astro @avocadostudio-ai/site-sdk @avocadostudio-ai/shared
import { defineConfig } from "astro/config"
import avocado from "@avocadostudio-ai/astro"

export default defineConfig({
  output: "static",
  integrations: [
    avocado({
      siteId: "my-site",
      content: "./src/avocado/content.ts",
      editablePages: ["src/pages/index.astro"],
    }),
  ],
})

The site renders itself

Avocado supplies the schema, the draft props, the editable markers and publishing; your components render. Avocado calls this mode site-renders-itself, and it is what makes Astro workable at all — the alternative would be re-implementing every .astro component as a React block, which is a rewrite disguised as an integration.

What you provide is a content module: one default export saying where your pages come from, which block types exist, and what publishing means for your site.

Publishing on a static site

On a static template, publishing can write the edited page back to a file under src/. That is not a workaround; it is what “published” means for a static site. The file is committed, reviewed as a diff, and the site rebuilt from it — so AI edits go through the same Git review as any other change.

Marking a field editable

blockProps returns the attributes the editor overlay looks for, and data-editable-target names the field. On a published page it emits nothing at all: no classes, no data attributes, no view-transition names.

---
import { blockProps } from "@avocadostudio-ai/astro/markers"

const { avocado } = Astro.locals
const { block } = Astro.props
---
<section {...blockProps(Boolean(avocado?.isEditor), block.id, block.type)}>
  <h1 data-editable-target="title">{block.props.title}</h1>
</section>

FAQ

Astro: common questions

Does the Astro integration need React?

No. The integration has no React and adds no islands: your own .astro components render the page in the editor’s preview exactly as they do in production.

Which Astro versions are supported?

Astro 5 and later. The editor itself needs Node.js 22 or later.

Does it work with a static Astro build?

Yes. The pages you list in editablePages render on demand during astro dev and are prerendered in the build, so the published site stays static.

Can every page be editable?

Every page you list. It is a list rather than “every page” because a route built from getStaticPaths cannot render on demand, which the editor’s draft preview needs.

What does it need in production?

DRAFT_MODE_SECRET to authorize draft renders, a publish token for the publish route, and editorOrigins, which is also the CORS allowlist for the editor API. astro dev needs none of these, which is why they are easy to miss.

Try it on a real site in one command.

Scaffold the demo site with the editor, or run it inside an existing Next.js project to wire Avocado Studio in. Open source under Apache-2.0; bring your own Anthropic, OpenAI or Gemini key.

npm create avocado-site@latest