# The visual editor URL: https://docs.xodia.ai/editing/visual-editor Last updated: 2026-10-22 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 or plain CSS. _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._ ## The canvas Your site runs on the canvas as it really is, with its own data and components. Turn on Edit in the canvas toolbar to select things; turn it off to click through the site like a visitor. - 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. ## Select and edit With Edit on, click an element to select it. Breadcrumbs above the canvas show where it sits, and the Navigator shows the whole page as a tree. Double-click text to type over it; bold, italic and links are in the bar above the text, and the change is saved to the line it came from. Right-click a selected element for the structural work: select the parent, copy and paste, duplicate, wrap, unwrap, change the tag, move it up or down, or delete it. The same menu asks your AI about the element. _Picture: 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._ Every change has undo and redo. Find anything with `⌘` `K` or `Ctrl` `K`: pages, elements on the page, panels and commands. ## The Style panel 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 (v4 or v3) it writes utility classes and uses your own theme tokens. - On plain CSS and CSS Modules sites, a CSS panel edits the element's class rule, everywhere or in one of the site's own media queries. - Styles apply to the breakpoint you're on and to a state (hover, focus and active), in rem and fluid values. The Settings tab next to it sets an element's ID, tag, text and link, replaces an image and its alt text, hides it at a breakpoint, and adds an aria label or custom attributes. > **Note:** How much you can edit visually depends on the framework and styling. Sass and CSS-in-JS styles are changed through your AI, and some frameworks run with the preview, the Code tab and your AI only. See [What you can edit on your stack](https://docs.xodia.ai/get-started#stacks). ## Add elements and pages Add elements puts a block before, after or inside the element you selected, or you drag it onto the page where it should go: sections, columns, cards, text, media, buttons, links and form fields. Your site's own components are there too; simple ones go in with their import, and ones that take settings go to your AI to fill in. The Pages panel adds, renames and deletes pages, keeps drafts, and opens each page's settings. _Picture: 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 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. Sites that switch to dark mode show the dark colours next to the light ones. Styles is the class manager: see where each class is used, rename it everywhere and clean up unused ones. Component props let you change a component's props for one use and see where else it appears. _Picture: 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._ ### The 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. Changes there join the same draft. ## Next Every edit waits as a draft until you save it: see [Save, restore and publish](https://docs.xodia.ai/get-started/save-and-publish). The visual editor on each framework is on the [frameworks page](https://xodia.ai/frameworks).