# Edit a Claude Code website visually URL: https://xodia.ai/guides/edit-claude-code-site-visually Description: How to edit a Claude Code website visually: import its repo into Xodia, click and style the live page, and keep Claude Code working on the same code. Last updated: 2026-11-08 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](https://xodia.ai/glossary/mcp) server. Updated October 28, 2026 [Start free](https://app.xodia.ai/auth/sign-up?ref=guides-edit-claude-code-site-visually) [Connect Claude Code](https://xodia.ai/ai/claude-code) Free plan. No card needed. 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](https://xodia.ai/glossary/visual-editor) - 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](https://xodia.ai/frameworks) 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](https://xodia.ai/product/visual-editor) 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. 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](https://xodia.ai/start#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](https://xodia.ai/ai). Keep exploring ## Related guides and pages - [Edit a site built with Cursor, visually Import the repo and keep Cursor on the same code](https://xodia.ai/guides/edit-cursor-site-visually) - [Edit an AI-built site exported to GitHub Import the repo an AI tool made and keep editing](https://xodia.ai/guides/edit-ai-built-site-github) - [Connect an MCP server to build and edit your website Add Xodia to Claude Code, Cursor or any MCP app](https://xodia.ai/guides/connect-mcp-server-website) - [Claude Code Connect it in two commands](https://xodia.ai/ai/claude-code) - [GitHub Import a repo and keep it in sync](https://xodia.ai/integrations/github) - [Sites built with AI Edit the site your AI built, without prompts](https://xodia.ai/solutions/ai-built-sites) [See every guide](https://xodia.ai/guides) Primary sources ## Official docs Updated October 28, 2026 - [Connect Claude Code to tools via MCP, Claude Code docs](https://code.claude.com/docs/en/mcp) - [Plugins, Claude Code docs](https://code.claude.com/docs/en/plugins) - [About using GitHub Apps, GitHub docs](https://docs.github.com/en/apps/using-github-apps/about-using-github-apps) ## Open your Claude Code site in Xodia. [Start free](https://app.xodia.ai/auth/sign-up?ref=guides-edit-claude-code-site-visually-ct) [See pricing](https://xodia.ai/pricing)