Skip to content
Start free
Full visual editing

Visual editing for Vite and React sites

Bring your own Vite and React site, or start from a Xodia template built on Vite, React Router and Tailwind v4. Click to edit text, images and links, style anything in the Style panel and set page titles. Xodia writes clean JSX and classes to your components.

Start freeEvery framework

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

Settings, General: Xodia detected a React site on Vite 7 with TypeScript, Tailwind 4, npm, content in files in the repo and Cloudflare, and marks it Full visual editing.

What you edit visually

React components you can click

Select anything on the preview. Text written as plain JSX is edited in place, and Xodia updates the component that renders it.

  • Text, images and links, edited in place in your components
  • The Style panel writes Tailwind classes and theme tokens; on plain CSS it edits single-class rules
  • Page titles and descriptions on React 19; on older versions your AI sets them in code
  • Add elements, the Navigator and Variables on Tailwind sites

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.

  • A wrapper config, outside your repo

    The preview starts Vite with a config in a folder git ignores. It loads your vite.config and adds Xodia's source tagging plugin, so your file stays as you wrote it.

  • The editor in the preview only

    The preview adds a small script that lets you select and edit elements. It runs only in Xodia's preview, never in your build or on your live site.

  • Templates ready to edit

    Xodia templates come set up for visual editing from the first click, with fluid type and spacing tokens, and live in your own repo like any other site.

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.

  • Supported versions

    React single-page sites on Vite, with TypeScript or JavaScript, and Xodia templates.

    React Router framework mode and Remix have their own page.

  • Vite and React skills

    Routes, pages and head tags on any Vite and React site, plus Xodia's template.

    Written for: Vite 5 to 8 with React 18 or 19; Xodia templates (Vite, React Router, Tailwind 4).

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. Start from a Xodia template, or import your repo from GitHub, or open the folder on your computer
  2. Add any environment variables the preview needs in Xodia
  3. Xodia runs your dev script, detects Vite and React 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

Vite and React questions

Do I need to change my vite.config?

No. The preview loads your config through a wrapper that git ignores and adds Xodia's plugin there. Your repo keeps the file you wrote.

Who owns a site made from a template?

You do. It lives in your own git repo, and you can stop using Xodia at any time and keep everything.

Do I need Tailwind?

For the full Style panel, yes. Without it you still click to edit text, images and links, the Style panel edits rules with a single class in plain CSS and CSS Modules, and your AI handles everything else.

What does it cost?

Start free with 1 project. See pricing for every plan and the Pro trial.

Keep exploring

Other stacks

Edit your React site the way you see it.

Start freeSee pricing