Visual editor
A visual editor lets you change a website by clicking and editing the page itself, its text, images, layout and styles, instead of writing the code by hand.
Updated
On this page
What it is
Visual editors range from page builders that store the site in their own format to editors that work on real code. The difference shows when you leave: a site in a builder's format stays with that builder, while code can go anywhere.
A good visual editor works at every screen size, keeps styles consistent through shared classes and variables, and shows the page as visitors will see it.
In Xodia
Xodia's visual editor works on your site's own code. Click any element on the canvas to select it, double-click text to type, swap images and links in the panel, and change layout, type, colour and spacing in the Style panel, from Phone to Wide.
Each change writes the code directly, as Tailwind classes or CSS rules in your files, with no AI and no credits, and is saved as you go until you push it to git.
Read more
Related terms
- BreakpointA breakpoint is a screen width at which a website's layout changes, such as moving from one column on phones to two columns on tablets.
- Design tokensDesign tokens are the named values a design system is built from, such as brand colours, font families, text sizes and spacing steps, kept in one place and used everywhere.
- AI-built siteAn AI-built site is a website whose code was written mostly by an AI app, such as Claude Code or Cursor, from descriptions rather than by hand.