Skip to content
Start free
Full visual editing

Visual editing for HTML and CSS sites

Open a site made of plain .html pages and edit it on a live preview. Click to change text, images and links, edit CSS rules in the Style panel and set each page's title and description, while your pages stay plain HTML files in your repo.

Start freeEvery framework

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

Settings, General: Xodia detected HTML pages built with Vite 7, plain CSS, npm and Cloudflare, and marks it Visual editing, with single-class CSS rules in the Style panel.

What you edit visually

Plain HTML, edited in place

Click anything on the live preview and change it. Xodia edits the markup in the page's .html file, so text stays plain HTML.

  • Text, images and links, edited in each page's .html file
  • Rules with a single class in your .css files, at the top level or inside a media query
  • Each page's title, description and share image, in its own head
  • Tailwind sites get the full Style panel; Sass and Less files go through your AI

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.

Nothing to install

How Xodia opens your site without changing it

What click to edit needs is added from outside your repo while the preview runs, and your saves contain only your own changes.

  • Built with Vite

    Xodia runs HTML sites with Vite, including multi-page builds and a base path for sites served from a subfolder. Your repo needs Vite and a dev script in package.json.

  • A wrapper config, outside your repo

    The preview starts Vite with a config in a folder git ignores, which loads yours and adds Xodia's source tagging. No framework or templating plugin is ever added.

  • Nothing extra in your commits

    Anything Xodia needs lives outside your repo or is excluded from git, so every save holds only the changes you made.

Versions and skills

The versions it covers, and the skills your AI gets

When your AI works on the site, it loads Xodia's skills for this stack, written for the versions below.

  • HTML sites skills

    Sites made of .html pages: head tags on every page, listing each page in a multi-page build, the public folder and base URLs.

    Written for: Vite 5 to 8 multi-page HTML sites: build.rolldownOptions on Vite 8, build.rollupOptions before.

  • Plain CSS skills

    CSS variables as tokens, and exactly which rules Xodia's Style panel can edit.

    Written for: Plain CSS on any framework Xodia opens; component style blocks in Astro, Vue and Svelte.

Typical setup

From your repo to your first edit

Import the repo from GitHub or open a folder on your computer. Xodia installs your packages in a private preview, detects the stack and opens the editor.

  1. Install Xodia's GitHub App on the repo and import it, or open the folder on your computer
  2. Make sure package.json has Vite and a dev script, or ask your AI to add them
  3. Xodia runs the dev script, finds your .html pages and opens the editor
  4. Edit, then save to a branch; your host deploys it as it does today

The New project dialog: the agent step done, then Import from GitHub with the repositories the GitHub App may open, each with Import, beside Start from a template.

Works with

Your content and your host, as they are

Xodia detects where the content lives and where the site is hosted, and keeps both.

  • Headless CMS

    Starter and up

    Sanity, Contentful, Storyblok and Prismic. Sanity: the deepest support, with Content tab editing, drafts to live, publish and discard, Portable Text and the media library.

  • Content in the repo

    Markdown, MDX, JSON and YAML files, Astro content collections, and Keystatic, Decap and TinaCMS.

  • Hosts

    Starter and up

    Vercel, Netlify and Cloudflare connect to show the live address, deploys and build logs; GitHub Pages is detected. Your host keeps deploying the site, exactly as it does now.

Questions

HTML site questions

Does my site need a framework?

No. Plain .html pages and CSS work without one. Xodia runs them with Vite, so the repo needs Vite in its package.json and a dev script.

Does every page get its own title?

Yes. Page settings edits the title, description and share image in each page's head, so no page keeps a copied title.

Can I add a new page?

Yes. Ask your AI: it adds the .html file to the multi-page build, with your shared header and footer.

What does it cost?

Start free, then pick the plan that fits. See pricing for every plan.

Keep exploring

Other stacks

Edit your HTML site the way you see it.

Start freeSee pricing