Skip to content
Start free
Preview and AI

Live preview, code and your AI for SvelteKit sites

Open your SvelteKit or Svelte repo in Xodia and it runs on a live preview at every screen size. Edit the code in the browser, or ask your own AI, which follows Xodia's Svelte skills. Clicking to edit .svelte files isn't available yet, so changes go through the code or your AI.

Start freeEvery framework

Free plan. 14-day Pro trial. No charge unless you choose a plan.

Settings, General: Xodia detected a SvelteKit 2 site with TypeScript, plain CSS, npm, content in files in the repo and Vercel, and marks it Preview and agent: live preview, your agent and the code editor, with click to edit to come for this framework.

What works today

Your SvelteKit site, running as it does on your machine

Xodia runs your site with Vite in a private preview, so you see every change as soon as it's saved, on the canvas's phone, tablet and desktop sizes.

  • The live preview at six breakpoints, with screenshots your AI can take to check its work
  • The Code tab, to read and edit any file in the browser
  • Your AI on the site over MCP, with skills for config, svelte:head and the static folder
  • Markdown in a content folder, and Sanity documents, edited in the Content tab
  • Saves as commits, branches, pull requests and publishing, as on every stack

The Code tab on a SvelteKit site: the file tree with src/routes/+page.svelte open, its svelte:head title and description and the hero markup, in plain text, ready to edit by hand.

Editing level

What you change, and how

SvelteKit and Svelte sites get the Preview and AI level. Here is what that means in practice.

  • In Xodia

    The preview, the Code tab, the Content tab for files and Sanity, saving, branches and publishing.

  • Through your AI

    Layout, styles, new routes and components. Describe the change in the ask box under the preview, and your AI edits the .svelte files and checks the result.

  • Not yet

    Clicking to edit, editing text in place and the Style panel aren't available on .svelte files yet.

Versions and skills

The versions it covers, and the skills your AI gets

When your AI works on the site, it loads Xodia's skills for this stack, written for the versions below.

  • Supported versions

    SvelteKit 2 and 3, Svelte 5 with runes and Svelte 4, and Svelte apps built with Vite.

  • SvelteKit and Svelte skills

    Agent and code only: config in vite.config, head tags in svelte:head and the static folder. Click editing isn't available on these sites yet.

    Written for: SvelteKit 3 (current, 3.1) and SvelteKit 2, Svelte 5 (runes) and Svelte 4, and Svelte apps on Vite. Click editing isn't available on .svelte files.

Typical setup

From your repo to your first edit

Import the repo from GitHub or open a folder on your computer. Xodia installs your packages in a private preview, detects the stack and opens the editor.

  1. Install Xodia's GitHub App on the repo and import it, or open the folder on your computer
  2. Add any environment variables the preview needs in Xodia
  3. Xodia runs your site with Vite and opens the preview
  4. Ask your AI for a change or edit the code, then save to a branch; your host deploys it as it does today

The New project dialog: the agent step done, then Import from GitHub with the repositories the GitHub App may open, each with Import, beside Start from a template.

Works with

Your content and your host, as they are

Xodia detects where the content lives and where the site is hosted, and keeps both.

  • Headless CMS

    Starter and up

    Sanity, Contentful, Storyblok and Prismic. Sanity: the deepest support, with Content tab editing, drafts to live, publish and discard, Portable Text and the media library.

  • Content in the repo

    Markdown, MDX, JSON and YAML files, Astro content collections, and Keystatic, Decap and TinaCMS.

  • Hosts

    Starter and up

    Vercel, Netlify and Cloudflare connect to show the live address, deploys and build logs; GitHub Pages is detected. Your host keeps deploying the site, exactly as it does now.

Questions

SvelteKit questions

Can I click to edit a SvelteKit page?

Not yet. The preview, the Code tab and your AI work today; clicking to edit, inline text and the Style panel aren't available on .svelte files yet.

Do I need to change my svelte.config or vite.config?

No. The preview loads your config as it is, and your saves contain only your own changes.

Can I edit content without code?

Yes, when it lives in Markdown files in a content folder or in Sanity: the Content tab shows it as forms, on Starter, Pro and Agency. Content from other CMSs goes through your AI.

What does it cost?

SvelteKit and Svelte sites work on every plan, the free one too. See pricing for the limits of each.

Keep exploring

Other stacks

Preview your SvelteKit site and let your AI do the edits.

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