Skip to content
Start free

A website builder with a code editor built in

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 freeSee pricing

Free plan. No card needed.

Xodia's Code tab: the site's file tree with src/pages/Home.tsx open in the editor, the heading's line highlighted with its Tailwind classes, and Save.

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

Xodia's Design tab with the home page heading selected, the design panel open and the ask box ready.

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

Xodia's Code tab on .vce/bridge.ts, one of the files Xodia keeps for the editor, marked Managed by Xodia with a lock and read only.

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, or read what custom code is

Settings, Custom code: an analytics script and a site verification tag in Head code, a chat widget before the closing body tag, written to index.html, with Save 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
  • Commits pushed on GitHub show up in Xodia. See git and publishing

Settings, Code and Git: the project's GitHub repository, risebakery/website, and the branch main, with the note that edits you save are committed to this branch.

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.

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

Build visually, edit the code when you want.

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