# A website builder with a code editor built in

URL: https://xodia.ai/product/code
Description: Xodia is a website builder with a code editor built in: open any file of your site in the Code tab, add custom code to the head and body, or use your editor.
Last updated: 2026-11-08

Xodia is a website builder with a code editor beside the canvas: the Code tab opens any file of your site in the same editor engine as VS Code, and what you type is the code your host deploys.

[Start free](https://app.xodia.ai/auth/sign-up?ref=product-code) [See pricing](https://xodia.ai/pricing)

Free plan. No card needed.

Beside the canvas

Every plan

## Every file of the site, one tab from the canvas

Design, Content and Code are three views of the same project. Change a class in Code and the canvas shows it; change it on the canvas and the file shows it.

- The site's file tree, with the folders you use open and bulky ones folded
- Syntax colours for TypeScript, JavaScript, JSON, CSS, HTML, Markdown, SVG and YAML; other files open as plain text
- Save with Cmd+S or Ctrl+S, and the preview reloads with the change
- Code edits join the visual ones in Xodia, so they are pushed to Git and restored together

Managed by Xodia

## Xodia's own files, kept out of your way

Starters carry a small .vce folder that lets the editor select and edit elements in the preview. It shows in the tree, read only, marked Managed by Xodia.

- Xodia keeps those files up to date, so you never merge changes to them
- Sites you import from GitHub get no extra files: pushes hold only the changes you made

Custom code

Starter and up

## Custom code in the head and body

Settings, Custom code adds code to every page, such as analytics, a chat widget, fonts or a site verification tag. Paste it in Head code or Before the closing body tag.

- On the React template, Vite sites and HTML sites, for every page of the site
- Your AI can add code to one page in that page's own file, when you ask it to
- Included on Starter, Pro and Agency. [Compare plans](https://xodia.ai/pricing), or read [what custom code is](https://xodia.ai/glossary/custom-code)

Your editor too

## Your AI and your own editor work on the same code

The project is plain code in your git repo, so you can also clone it and open it in your own editor, then push your commits to GitHub as usual.

- Your AI edits files through Xodia's tools, and its changes stay in Xodia for you to review
- Push your work from Xodia with Push to Git before you pull it into your editor. See [GitHub](https://xodia.ai/integrations/github)
- Commits pushed on GitHub show up in Xodia. See [git and publishing](https://xodia.ai/product/git-and-publishing)

Questions

## Questions about code

**Do I need to code to use Xodia?**

No. You can build and edit a site with the canvas, the panels and your AI. The Code tab is there when you want the file itself.

**Which editor does the Code tab use?**

Monaco, the editor that powers VS Code, in a dark or light theme to match your computer, with word wrap on.

**Which plans include the Code tab?**

Every plan. Custom code in the head and body is on Starter, Pro and Agency. See [pricing](https://xodia.ai/pricing).

**Can I edit files Xodia manages?**

No, files under .vce are read only in the Code tab. Everything else in your site is yours to change.

**Does custom code work on every framework?**

Settings, Custom code works on the React template, Vite sites and HTML sites, for every page. For one page, ask your AI to add it in that page's file.

Keep exploring

## Related pages

- [Visual editor Canvas, Style panel, Pages in folders and Variables](https://xodia.ai/product/visual-editor)
- [GitHub Import repos, push as commits, branches and pull requests](https://xodia.ai/integrations/github)
- [Git and publishing Autosave, branches, restore points and deploys](https://xodia.ai/product/git-and-publishing)
- [Interactions Hover effects, scroll reveals and timelines](https://xodia.ai/product/interactions)
- [Frameworks The stacks Xodia supports and what you can edit](https://xodia.ai/frameworks)
- [For developers Your stack, your repo, your AI](https://xodia.ai/solutions/developers)
- [Product overview Every feature in the order you use it](https://xodia.ai/product)
- [Pricing Plans, limits and what Free includes](https://xodia.ai/pricing)

## Build visually, edit the code when you want.

[Start free](https://app.xodia.ai/auth/sign-up?ref=product-code-cta) [See pricing](https://xodia.ai/pricing)