Skip to content
Start free
Full visual editing

Visual editing for React Router and Remix

Open your React Router framework mode or Remix v2 site on a live preview. Click to edit text, images and links in your route components, restyle them in the Style panel and set page titles, while your routes, loaders and config stay exactly as they are.

Start freeEvery framework

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

Settings, General: Xodia detected a React Router 7 site with TypeScript, Tailwind 4, pnpm, Contentful and Vercel, and marks it Full visual editing.

What you edit visually

Routes you can click

Click anything on the live preview and change it. Text kept as plain JSX in your route components is edited in place.

  • Text, images and links, edited in place in route components
  • Tailwind classes and theme tokens from the Style panel; single-class rules on plain CSS
  • Titles and descriptions each route renders with React 19, or its meta export when it returns plain values
  • Loaders, actions and routes.ts changes through your AI, with Xodia's React Router skills

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

    Framework mode builds with Vite, so the preview starts it with a config in a folder git ignores. It loads your vite.config and adds Xodia's source tagging.

  • Your app folder, untouched

    The preview points React Router at your project root, so app/root.tsx, routes.ts and your route modules are read where they are.

  • 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.

  • Supported versions

    React Router in framework mode, and Remix v2, which opens as it is. Xodia doesn't upgrade it unless you ask your AI to, as a task of its own.

    Single-page apps that only use the router library are Vite and React sites.

  • React Router skills

    Framework mode and former Remix sites: routes.ts, route module exports, titles and meta, prerendering and SPA mode.

    Written for: React Router 7 and 8 framework mode, and Remix v2 (end of life, kept as is). Page settings needs React 19.

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. Add any environment variables the preview needs in Xodia
  3. Xodia runs your dev script, detects React Router or Remix 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

React Router questions

Do I need to change my config?

No. The preview loads your vite.config through a wrapper that git ignores, and points React Router at your project root. Your repo keeps the files you wrote.

Does it work with Remix v2?

Yes. Remix v2 sites open as they are, with the same click to edit and Style panel as React Router. Xodia never upgrades them unless you ask it to.

Can I edit loaders and actions visually?

No. The canvas edits what a route renders. Your AI changes loaders, actions and routes.ts in code, following Xodia's React Router skills.

Does Xodia change how my site is built or hosted?

No. Your site keeps its own build, and your host deploys it as before. See pricing for every plan.

Keep exploring

Other stacks

Edit your React Router site the way you see it.

Start freeSee pricing