Visual editing for Astro, with no second source of truth

Description and use

Astro developers can visually edit pages directly in source files, keeping changes in the same commits and PRs, with optional AI for complex edits.

Problem

Developers using Astro want to edit page content visually without creating a separate CMS or second source of truth, while keeping edits in the same source files and Git workflow.

Outcome

Developers can visually edit Astro pages directly in source files, with deterministic changes recorded in diffs and optional AI assistance for complex transformations, all while keeping the workflow within Git and avoiding a separate CMS.

Workflow

• Install @sudodevstudio/astro-ai via npm
• Add buildWithAI integration to astro.config.mjs
• Start Astro dev server and open Build with AI toolbar
• Select an element on the rendered page
• Perform deterministic edit (e.g., change heading text) or AI-assisted request
• Integration updates the source file and Vite HMR renders changes
• Undo/redo via patch-transaction store if needed

Evidence

Editing a heading produces this: ...

Source

Deterministic edits replace specific source ranges without regenerating the file from an AST.

Source

The toolbar, instrumentation, and agent bridge are enabled only in the dev server.

Source