Visual editing for Astro sites
Open your Astro repo on a live preview and click to edit text, images, links and styles right in your .astro files. Set page titles, edit content collections in the Content tab, and let your own AI build new pages, while every change stays a commit in your repo.
Free plan. 14-day Pro trial. No charge unless you choose a plan.
Settings, General: Xodia detected an Astro 6 site with TypeScript, Tailwind 4, npm, content in files in the repo and Netlify, and marks it Full visual editing.
What you edit visually
Your pages, edited where you see them
Click anything on the preview to edit it. Text written as plain HTML in your templates changes in place, in the .astro file that holds it.
- Text, images and links, edited in place in .astro files
- Tailwind classes from the Style panel, or single-class rules in your stylesheets and component style blocks
- Page titles and descriptions your pages pass to their layout, and Markdown frontmatter
- Adding, moving and wrapping elements in .astro files goes through your AI for now
The Xodia editor with Edit on: a pointer clicks a bakery site's heading and double-clicks it, the formatting bar appears, new words replace the old ones in place and the change shows as 1 unsaved.
Nothing to install
How Xodia opens your site without changing it
What click to edit needs is added from outside your repo while the preview runs, and your saves contain only your own changes.
A wrapper config, outside your repo
The preview starts Astro with a config in a folder git ignores. It loads your astro.config and adds Xodia's source tagging, so your file stays as you wrote it.
The site as visitors see it
In the preview, Astro's dev toolbar is off, so the canvas shows your pages without an overlay. The editor script runs only in Xodia's preview.
Nothing extra in your commits
Anything Xodia needs lives outside your repo or is excluded from git, so every save holds only the changes you made.
Versions and skills
The versions it covers, and the skills your AI gets
When your AI works on the site, it loads Xodia's skills for this stack, written for the versions below.
Supported versions
Astro 6 and 7, with TypeScript or JavaScript, on Tailwind, plain CSS or component style blocks.
Content collections, islands and Markdown pages open as they are.
Astro skills
Pages and layouts, scoped styles, islands, content collections and the Astro 6 and 7 changes.
Written for: Astro 4 to 7, with the breaking changes of 6 and 7 called out.
With a headless CMS
Starter and upExtra skills for Sanity, Storyblok and Contentful, so your AI handles the CMS side too.
- Astro with Sanity
- Astro with Storyblok
- Astro with Contentful
Typical setup
From your repo to your first edit
Import the repo from GitHub or open a folder on your computer. Xodia installs your packages in a private preview, detects the stack and opens the editor.
- Install Xodia's GitHub App on the repo and import it, or open the folder on your computer
- Add any environment variables the preview needs in Xodia
- Xodia runs your dev script, detects Astro and opens the editor
- Edit, then save to a branch; your host deploys it as it does today
The New project dialog: the agent step done, then Import from GitHub with the repositories the GitHub App may open, each with Import, beside Start from a template.
Works with
Your content and your host, as they are
Xodia detects where the content lives and where the site is hosted, and keeps both.
Headless CMS
Starter and upSanity, Contentful, Storyblok and Prismic. Sanity: the deepest support, with Content tab editing, drafts to live, publish and discard, Portable Text and the media library.
Content in the repo
Markdown, MDX, JSON and YAML files, Astro content collections, and Keystatic, Decap and TinaCMS.
Hosts
Starter and upVercel, Netlify and Cloudflare connect to show the live address, deploys and build logs; GitHub Pages is detected. Your host keeps deploying the site, exactly as it does now.
Questions
Astro questions
Do I need to change my astro.config?
No. The preview loads your config through a wrapper that git ignores, and your repo keeps the file you wrote.
Do I need Tailwind?
No. With plain CSS or component style blocks, the Style panel edits rules with a single class, and your AI handles the rest. Tailwind sites get the full Style panel.
What about islands and React components?
They open as they are, and the preview runs them the way your dev server does. Anything the canvas can't edit, your AI changes in the code, or you do in the code editor.
Does Xodia change how my site is built or hosted?
No. Your site keeps its own build, and your host deploys it as before. You can stop using Xodia at any time and keep everything. See pricing for every plan.
Keep exploring