Skip to content
Start free

Edit a Claude Code website visually

To edit a Claude Code website visually, import its repository into Xodia and click any text, image or style on the live preview, while Claude Code keeps working on the same code through Xodia's MCP server.

Updated

Start freeConnect Claude Code

Free plan. No card needed.

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 top bar shows Saving while the change is kept.

Step by step

How to edit a Claude Code website visually

Five steps from the folder Claude Code wrote to a change on your live site. No rebuild, no export.

  1. 1

    Put the site's code on GitHub

    If Claude Code built the site in a folder on your computer, push the folder to a GitHub repository. If it's already live, you can import it by its address instead.

  2. 2

    Connect GitHub and import the repository

    In Xodia, open Connections and connect GitHub, then install the Xodia GitHub App on the repository. Press New project, choose Import from GitHub and import it. Xodia installs your packages in a private preview and detects the framework and styling.

  3. 3

    Click what you want to change

    In the Design tab, click any element. Double-click any text on the page and type, swap an image or a link in the panel, and change colour, size and spacing in the Style panel. Pick a screen size in the top bar to change the layout on phones only.

  4. 4

    Connect Claude Code to the same site

    In your terminal, run claude plugin marketplace add https://app.xodia.ai/plugin/marketplace.json, then claude plugin install xodia@xodia. Restart Claude Code, type /mcp, choose xodia and sign in. Claude Code now works on the same live preview you see in Xodia.

  5. 5

    Push, then deploy to your host

    Every edit, yours or Claude Code's, is saved in Xodia as you go. Push it as a commit to a branch, open a pull request if you review changes, and Deploy merges it into your live branch, which your host deploys.

Import

The code stays as Claude Code wrote it

Xodia opens the repository as it is. It adds nothing to an imported repo, and every push holds only the lines you changed.

  • React with Vite (with or without React Router) and plain HTML sites open with full visual editing
  • Styling with Tailwind v4, plain CSS or CSS Modules is edited in its own system
  • Next.js, Astro and other frameworks are refused at import, with the reason. See frameworks

Xodia's New project dialog asking how you want to start: Start a new site from a template or a starter, Import from GitHub to open a site you already have, or Import a website by its address, with Import from GitHub outlined, and the optional Connect your AI line.

Keep Claude Code

Claude Code and the canvas, on one site

The Xodia plugin gives Claude Code tools to read and edit your site, take screenshots and run checks, and short commands such as /xodia:build and /xodia:work.

  • Select an element, type a request in the ask box and Claude Code picks it up with /xodia:work, knowing exactly which element you meant
  • Its changes land next to yours, for you to review before you push
  • Small fixes you make yourself, with no prompt. See the visual editor

Xodia's New project dialog on its first step, with Connect your AI opened under Start a new site, Import from GitHub and Import a website and the Claude Code tab open: install the Xodia plugin with two terminal commands, sign in with /mcp, try /xodia:build, and an optional permission rule.

Push and deploy

Every change is a commit in your repo

Pushes go to your branch with your name on them, and edits by Claude Code carry an AI co-author line. Your host deploys the live branch as it does today.

The Push to Git dialog in Xodia: it commits every change on main since the last push with the message Make the hero heading bold, and takes a restore point.

Questions

Questions about editing Claude Code sites

Do I have to stop using Claude Code?

No. Connect it to Xodia and it works on the same site and branch. Use the canvas for quick changes and Claude Code for bigger ones.

Does Xodia change how my site is built?

No. It runs your site's own dev script in the preview and writes changes into the same files, in the same framework and styling.

Can I edit without GitHub?

Yes, if the site is live: Import a website copies its pages into a project kept in Xodia's storage, and you can connect GitHub later. See Import a website.

Does it work with other AI apps?

Yes. Cursor, Codex, the Claude app and any MCP app connect the same way. See connect your AI.

Keep exploring

Related guides and pages

See every guide

Primary sources

Official docs

Updated

Open your Claude Code site in Xodia.

Start freeSee pricing

May we use Google Analytics to see how people find and use this site? It sets cookies only if you allow it. Cookie policy