Vite + @sveltejs/vite-plugin-svelte

React developers who use Vite are already familiar with @vitejs/plugin-react — it adds JSX transform and Fast Refresh to Vite’s dev server. Svelte has a direct equivalent: @sveltejs/vite-plugin-svelte. It compiles .svelte files and wires up Svelte’s own HMR. If you use SvelteKit (the full-stack framework), the plugin is wrapped inside @sveltejs/kit/vite and configured for you automatically.

vite.config comparison

// vite.config.ts (React)
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

// vite.config.ts (Svelte standalone)
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
});

SvelteKit’s vite.config

When you use SvelteKit, the Vite config is even simpler because sveltekit() handles all plugin wiring internally:

// vite.config.ts (SvelteKit)
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
});

You do not import @sveltejs/vite-plugin-svelte directly in a SvelteKit project — sveltekit() re-exports and configures it for you.

Installation

Install the standalone Svelte plugin (non-SvelteKit project):

npm install --save-dev @sveltejs/vite-plugin-svelte svelte

Create a SvelteKit project from scratch:

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

HMR behaviour

Both React and Svelte use Vite’s native HMR infrastructure. The difference is in what happens to component state when a file is saved:

React Fast Refresh preserves local state for components whose hook shape did not change. If you add or remove a useState call, state resets.
Svelte HMR preserves reactive state ($state variables) by default across most edits, even when you change the markup or add new state variables.