Skip to content

The React + Vite starter

The React + Vite starter is one of New project's starters in Xodia, made for sites and landing pages with react components: a small site with Tailwind v4 that you can edit visually from the first click. A landing page or a small site you want running in seconds, that may grow a few pages later.

Full visual editingFastest preview

Updated

Free plan. No card needed.

Xodia's New project dialog on Pick a template or a starter: React + Vite and HTML + Vite, each with what it suits and its tags, with React + Vite chosen, then the project name, Create project and Plan the site with AI next.

What's inside

The pages and files you start with

Plain code with a few pages, so you or your AI can change all of it. The theme's colours, fonts and fluid sizes are theme tokens in src/index.css.

  • Vite with React and React Router: the Xodia template, the quickest preview to start
  • Home and About pages with a shared layout, and a page for addresses that don't exist
  • Routes listed in src/routes.tsx, pages in src/pages
  • A placeholder image component your AI can swap for matching art

Pages

  • Home /
  • About /about

Xodia's Code tab on a project made from the React + Vite starter: its file tree, with src/pages/Home.tsx open in the editor as the starter ships it.

Start from it

New project, Start a new site, React + Vite

Press New project, choose Start a new site, pick React + Vite, name the project and press Create project. Xodia sets it up and opens its live preview, ready for Edit.

  • Tick Plan the site with AI next, and your AI plans every page before it builds them. See Plan with AI
  • An AGENTS.md in the project tells your AI how the site is built, and it follows the Vite and React stack pack
  • The code stays in Xodia's own storage until you move the project to GitHub, which is also how it publishes to your host

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 Start a new site outlined, and the optional Connect your AI line.

Questions

Questions about the React + Vite starter

Can I change everything in it?

Yes. It's plain code. Click any text, image or link to change it, style it in the Style panel, add sections and pages, or ask your AI. See the visual editor.

Does it come with a CMS?

Not at first. Add a Xodia CMS collection in the Content tab when you need one, such as blog posts or a team, and it lives in the site's own repo. See Xodia CMS.

How do I put it online?

Move the project to a GitHub repository, connect your host (Vercel, Netlify or Cloudflare) and publish. See git and publishing.

The other starters

Compare the starters

Every way to start a site

Start a site from the React + Vite starter.