Skip to content
Start free

Xodia features, from import to publish

Xodia is a visual editor that works on your site's real code. You bring in a repo, edit it on a live preview or ask your AI, save each change to git and publish through the host you already use. Here is every part, in the order you meet it.

Start freeSee pricing

Free plan. 14-day Pro trial. No charge unless you choose a plan. See how Xodia works.

01 Import

Bring your site in from GitHub, or start fresh

Import a repo through the GitHub App, which only sees the repos you pick, or start from the Xodia template. Xodia then reads your framework, styling and package manager, and says how far visual editing goes.

  • npm, pnpm, Yarn and Bun, and monorepos on npm, Yarn or pnpm workspaces
  • Previews in an isolated cloud sandbox, or on your own Cloudflare account with Pro and Agency
  • Local folder mode: edit a folder on your computer with the xodia command line tool, using no preview hours

See what you can edit on each framework

Settings, General: Xodia detected a Next.js site with TypeScript, Tailwind 4 and shadcn/ui, pnpm, Sanity and Vercel, and marks it Full visual editing.

02 Canvas

A live canvas at every breakpoint

Your site runs as it really is. Click to select anything, double-click text to type over it, and right-click to copy, duplicate, wrap or delete.

  • Six breakpoints from Phone to Wide, or any width you drag to, with zoom and preview mode
  • Navigator, breadcrumbs and keyboard tree walking, undo and redo, Find anything with Cmd+K
  • X-ray, rulers, layout grid and spacing view; colour-blindness, blur and text size simulation
  • Add elements: sections, columns, text, media, buttons, forms and your site's own components

Explore the visual editor

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.

03 Style

Style visually and get clean Tailwind or CSS

The Style panel covers layout, spacing, size, position, typography, backgrounds, borders, effects, transforms and transitions. On Tailwind sites it writes utility classes and your theme tokens; on plain CSS it edits the class rule.

  • Per breakpoint and per state: hover, focus and active, in rem and fluid values
  • Variables for theme tokens and dark mode colours, and a class manager to rename or clean up classes everywhere
  • Component props: change a component's props for one use and see where else it's used
  • Load, scroll and click animations on a timeline, for Astro, Vite and HTML sites. Free includes hover presets on Tailwind sites.Starter and up

More about the Style panel

The Style panel: a pointer sets the heading's weight to 700 Bold, the heading on the canvas turns bold, the change shows as 1 unsaved and the class font-bold appears in the Code tab.

04 Content

Starter and up

Edit content where it already lives

The Content tab lists your collections and entries and builds a form for each from its schema, so writers change text, images and references without opening code.

  • Content files in your repo (Markdown, MDX, JSON, YAML) and Astro content collections
  • Sanity entries with drafts, publish and discard, Portable Text and the Sanity media library
  • Skill packs that teach your AI Sanity, Contentful, Storyblok and Prismic
  • Assets panel: uploads, size warnings, and one-click WebP and AVIF, SVG and GIF compression in your browserEvery plan

See the Content tab and CMS support

The Content tab: a bakery site's menu collection, with each entry's status as Live, Changes or Draft.

05 AI

Ask the AI you already use, with the right tools

Connect Claude Code, the Claude app, Cursor, Codex or any MCP app. Your AI gets 26 tools and 8 prompts to work on your site, and 39 core skills plus 30 stack pack skills that show it how to work.

  • Requests from the editor: select an element, type what you want, pick Content, Design, Page, Fix or Ask, or leave it on Auto
  • Your AI helper: send requests from Xodia's ask box to Claude Code on your computer, with every step and approval shown in Xodia
  • Short commands in Claude Code through Xodia's plugin, such as /xodia:build and /xodia:fix
  • Built-in AI on Pro and Agency: Claude Opus 5.5, Sonnet 5.5 or Haiku 5.5 run by Xodia inside your project, on Xodia's AI tokensPro and up

See how your AI connects

The ask box under the canvas: a request about the selected heading is typed, the Agent panel's Activity tab lists each step the AI takes, and the opening hours appear on the page.

The core skill groups and how many skills each holds.

06 Save

Every change is a draft until you save it

Edits by you and by your AI wait as a draft. Save commits them to this branch, another branch or a new one, and each save becomes a restore point.

  • Unsaved work is autosaved to a private ref, never to your branch
  • Restore any checkpoint; your current work is saved first. Discard goes back to the last save
  • Branches, pull requests and merge; Free works on the main branchStarter and up

See drafts, restore points and branches

The Save changes dialog in Xodia: one change, Style in Home, saved with its message to a new branch named preview.

07 Publish

Publish through the host you already use

Publishing merges your work into the live branch, and your host deploys it as it does today. On the live branch, Save suggests a new branch first, and your AI can't save there on an imported repo.

  • Host connections for Vercel, Netlify and Cloudflare: live address, domains, deploy status and build logsStarter and up
  • Copy your host's environment variables into the preview; they go only to the dev server, never to the AI
  • Send a failed build to your AI to fix

More about publishing

Settings, Publishing: the live site on Vercel with its address, and a failed build on the branch spring-hours with its error and Fix with your agent.

08 Grow

Check search, speed and traffic next to the editor

Set each page's title, description and share image in Page settings, then test the live site and read your analytics without leaving Xodia.

  • Advanced SEO: canonical links, JSON-LD and noindexStarter and up
  • Audits for alt text, headings, contrast, empty links, titles and language
  • SEO tab: Google PageSpeed Insights tests of the live site, from 5 a month on Free
  • Insights from Google Analytics 4, Cloudflare Web Analytics or Vercel Web AnalyticsStarter and up

See the SEO tools

The SEO tab with the four PageSpeed Insights scores of the live site, and Insights with visitors and pageviews from Vercel Web Analytics.

Every plan includes

Included on Free, too

The editor, your own AI and the basics every site needs come with the Free plan too. Compare plans and limits.

  • The full visual editorCanvas, style panels, Navigator, pages, variables, audits, Code tab, inline text and component props.
  • Every major frameworkNext.js, Astro, Vite and React, React Router, Remix; Tailwind v4 or v3, plain CSS.
  • Class managerSee where each class is used, rename it everywhere, clean up unused ones.
  • Drafts, checkpoints and restoreNothing goes live until you save. Restore any checkpoint.
  • Image converterWebP and AVIF, SVG and GIF compression in the Assets panel, in your browser.
  • GitHub import and syncAn imported repo counts as a project.
  • Local folder modeEdit a folder on your computer. Uses no preview hours.
  • MCP access26 tools and 8 prompts for your own AI.
  • Your AI helperThe xodia CLI runs your own AI from Xodia.
  • 39 core skillsPlus framework and styling packs.
  • Page SEO basicsTitle, description and share image on Next.js, Astro and Xodia templates.

Try every feature on your own site.

Start freeSee pricing