# What is Xodia

URL: https://docs.xodia.ai/get-started
Last updated: 2026-10-22

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.

_Picture: 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 works

1. 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](https://docs.xodia.ai/get-started/new-project).
2. 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.
3. 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.
4. 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.
5. 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](https://docs.xodia.ai/get-started/save-and-publish).

## Three ways to edit

- **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 MCP

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](https://docs.xodia.ai/ai).

## What you can edit on your stack

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](https://xodia.ai/frameworks).

## Where things live

- **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 steps

- [Create your account](https://docs.xodia.ai/get-started/account) and start the free trial.
- [Start or import a project](https://docs.xodia.ai/get-started/new-project).
- [Connect your AI](https://docs.xodia.ai/ai).