Skip to content
Start free
Every plan

A visual editor for your real website code

Xodia's visual editor runs your site on a live canvas and writes each change into its source files. Select any element, type over text, and style it in a panel that writes Tailwind classes (v4 or v3) or plain CSS.

It works on Vite + React, React Router, Remix, Next.js, Astro, Gatsby and HTML sites on Vite.

Start freeSee pricing

Free plan. 14-day Pro trial. No charge unless you choose a plan.

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.

Canvas

A live canvas at every breakpoint

Your site runs as it really is, with its own data and components. Turn on Edit, click to select anything, and double-click text to type over it.

  • Six breakpoints from Phone to Wide, or any width you drag to, with zoom and preview mode
  • X-ray, rulers, a layout grid and a spacing view to see how the page is built
  • Colour-blindness, blur and text size simulation to check what visitors see
  • Inline text with bold, italic and links, saved to the line it came from

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.

Style panel

Style it in a panel, get clean classes

The Style panel covers layout, spacing, size, position, typography, backgrounds, borders, effects, flex and grid children, transforms and transitions. Each change is a readable edit to your component.

  • On Tailwind sites it writes utility classes and your own theme tokens
  • On plain CSS and CSS Modules a CSS panel edits the class rule, everywhere or in the site's media queries
  • Per breakpoint and per state (hover, focus and active), in rem and fluid values

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.

Navigator and Add elements

Find any element and add new ones

The Navigator shows the page as a tree, with breadcrumbs above the canvas. Add elements puts a block before, after or inside the one you selected.

  • Sections, columns, cards, text, media, buttons, links and form fields
  • Your site's own components: simple ones go in with their import, ones that take settings go to your AI to fill in
  • Pages: add, rename and delete pages, keep drafts, and open each page's settings

The Add elements panel beside the canvas: a heading is selected, After is chosen, and the site's own components sit above blocks for structure, text and media.

Variables and styles

Change the whole site from its theme

Variables reads your theme tokens (colours, fonts, text sizes, spacing and corner radius) from the file they live in. Change one and every element that uses it follows.

  • Dark mode colours next to the light ones, for sites that switch
  • Styles, the class manager: see where each class is used, rename it everywhere and clean up unused ones
  • Component props: change a component's props for one use and see where else it appears

The Variables panel: the bakery site's paper, ink and accent colours, its display font, fluid text sizes and spacing, read from src/index.css, with Light and Dark mode.

Menus and keys

Right-click, keyboard and Find anything

The right-click menu does the structural work: select the parent, copy and paste, duplicate, wrap, unwrap, convert the tag, move up or down, or delete.

  • Walk the tree with the keyboard, with undo and redo for every change
  • Find anything with Cmd+K: pages, elements on the page, panels and commands
  • Ask your AI about the selected element from the same menu

The right-click menu on a selected heading: Select parent, Copy, Duplicate, Wrap in, Unwrap, Convert to, Create component, Move up and down, Ask your agent about this and Delete.

More in the editor

Everything a page needs, in one place

The rest of the editor, one panel each, all on the same live page.

  • Element settings

    Set an element's ID, tag, text and link, replace an image and its alt text, hide it at a breakpoint, and add an aria label or custom attributes.

  • InteractionsStarter and up

    Load, scroll and click animations on a timeline, for Astro, Vite and HTML sites. Free includes hover presets on Tailwind sites.

  • Assets

    Upload images with size warnings, and convert them to WebP or AVIF or compress SVG and GIF files in your browser, in one click.

  • Audits

    Check each page for missing alt text, heading order, low contrast, empty links, the title and the language. See the SEO tools.

  • Code tab

    Open any file in a code editor with the file tree beside it, for the change that is quicker to type than to click.

  • Your AI, on the same page

    Select an element and ask the AI you already use for the change. It works on the same draft. See bring your own AI.

Works on

How far visual editing goes on your stack

Every framework gets the live preview, the code editor and your AI. How much you can click to edit depends on the framework and the styling.

See what you can edit on each framework

The three levels of visual editing and the frameworks in each.

Questions

Visual editor questions

Do I need to change my code to use the visual editor?

No. An imported site needs no Xodia package or config file. Xodia runs your own dev server in its preview, and each save contains only the lines you changed.

Does the Style panel write Tailwind or CSS?

Both. On sites styled with Tailwind v4 or v3 it writes utility classes and uses your theme tokens. On plain CSS and CSS Modules it edits the class rule in your stylesheet. Sass and CSS-in-JS styles are changed through your AI.

Which frameworks get full visual editing?

Vite + React, React Router, Remix, Next.js, Astro, Gatsby and HTML sites on Vite, styled with Tailwind. Other frameworks run in the preview with the code editor and your AI. See every framework.

Can someone who doesn't code use it safely?

Yes. Every edit stays a draft until someone saves it, and each save becomes a restore point. Teams can save to a branch and review it before it goes live.

Keep exploring

Related pages

Edit your own site visually.

Start freeSee pricing