What is Xodia
Xodia is a visual editor for your website's real code. It opens your site in a live preview, lets you and your AI edit it, saves each change as a git commit and publishes through the host you already use.
On this page
The Xodia canvas at the Phone breakpoint with Edit on: the Navigator lists the page's layers, the selected heading is outlined on the live preview of a bakery site, and the design panel shows its style.
Your site stays a normal project in your own repository. Xodia reads it and writes to it, the way a developer would, and never turns it into something only Xodia can open. If you stop using Xodia, nothing changes for your site: your host keeps deploying it.
How it worksLink to this section
Bring your site
Import a repository from GitHub, or start from one of five starters: React + Vite, Next.js, Astro, React Router and HTML + Vite, each on Tailwind. See Start or import a project.
Xodia reads the stack
When the preview starts, Xodia detects the framework, styling, package manager, content source and host, and tells you how far visual editing goes on that stack.
Edit visually or ask your AI
Your site runs in its own private preview with your dev server. Click to select and type, restyle in the Style panel, or select an element and ask the AI you connected.
Save
Every change waits as a draft until you save it. Save turns the draft into a commit on a branch, and each save is a restore point you can go back to.
Publish
Publish merges your work into your live branch, and your host builds and deploys it as it always has. See Save, restore and publish.
Three ways to editLink to this section
- Click and type. Select any element on the canvas and edit its text, images and links in place.
- The Style panel. Change layout, spacing, type and colour for each screen size. Xodia writes the change as your site's own Tailwind classes or CSS.
- Ask your AI. Select an element, type what you want in the ask box and send it. Your AI gets the request with the element's place in your code, and its changes land in the same draft as yours.
Your AI, over MCPLink to this section
Xodia works with the AI you already use: Claude Code, the Claude app, Cursor, Codex, VS Code or any app that speaks MCP. Once connected, it gets 26 tools, 9 prompts and 43 core skills for working on websites, under the same rules as you: its changes wait as a draft until you save. See Ways to connect your AI.
What you can edit on your stackLink to this section
How much is visual depends on the framework and styling. Xodia shows the level for each project in its settings.
| Level | What you get | Stacks |
|---|---|---|
| Full visual | Click to edit, inline text, images, links, Style panel, Navigator, Add elements, Variables, class manager, interactions, code and AI. | Vite + React, React Router, Remix, Next.js, Astro, Gatsby, HTML sites on Vite, Tailwind CSS v4 and Tailwind CSS v3 |
| Content visual | Click to edit text, images and links; plain CSS and CSS Modules also get a CSS style panel for single-class rules; other styling through your AI. | Plain CSS, CSS Modules, Sass, styled-components and Emotion |
| Preview and agent | Live preview, AI requests, code editor and screenshots. | Nuxt, SvelteKit, Vue and Svelte, and anything else with a dev server |
Every framework, with its notes, is on the frameworks page.
Where things liveLink to this section
- Your code is in your own repository. Projects started in Xodia keep their code in Xodia's own storage until you connect them to GitHub.
- Previews run in an isolated cloud sandbox for each project, which sleeps when nobody uses it. You can also open a folder on your computer with the xodia command, which uses no preview hours.
- Unsaved work is backed up to a private copy, never to your branch, until you save or discard it.
- Your AI's login stays with your AI app. It signs in to Xodia with OAuth.
- Your live site stays on your host, deployed from your live branch as before.
Next stepsLink to this section
- Create your account and start the free trial.
- Start or import a project.
- Connect your AI.