svelte/documentation/docs/01-introduction/02-getting-started.md

title
Getting started

We recommend using SvelteKit, which lets you build almost anything. It's the official application framework from the Svelte team and powered by Vite.

Create a new project with your preferred package manager:

npm:

npx sv create myapp
cd myapp
npm install
npm run dev

yarn:

yarn dlx sv create myapp
cd myapp
yarn install
yarn dev

pnpm:

pnpm dlx sv create myapp
cd myapp
pnpm install
pnpm dev

bun:

bunx sv create myapp
cd myapp
bun install
bun dev

See the CLI docs for more information about the sv command line tool.

Don't worry if you don't know Svelte yet! You can ignore all the nice features SvelteKit brings on top for now and dive into it later.

Alternatives to SvelteKit

You can also use Svelte directly with Vite by running npm create vite@latest and selecting the svelte option. With this, npm run build will generate HTML, JS, and CSS files inside the dist directory using vite-plugin-svelte. In most cases, you will probably need to choose a routing library as well.

[!NOTE] Vite is often used in standalone mode to build single page apps (SPAs), which you can also build with SvelteKit.

There are also plugins for other bundlers, but we recommend Vite.

Installing Svelte in an existing project

If you have an existing project for example via Inertia and want to add Svelte to it, you can install Svelte and vite-plugin-svelte manually.

First, install Svelte and the Vite plugin:

npm:

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

yarn:

yarn add --dev --exact svelte @sveltejs/vite-plugin-svelte

pnpm:

pnpm add --save-dev --save-exact svelte @sveltejs/vite-plugin-svelte

bun:

bun add --dev --exact svelte @sveltejs/vite-plugin-svelte

Then, add the Svelte plugin to your vite.config.js:

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [
    svelte({
      /* plugin options */
    })
  ]
});

Editor tooling

The Svelte team maintains a VS Code extension, and there are integrations with various other editors and tools as well.

You can also check your code from the command line using sv check to check for Unused CSS Svelte A11y hints, JavaScript/TypeScript compiler errors.

Alternatively, you can install svelte-check (powers sv check) directly:

npm:

npm install --save-dev --save-exact svelte-check

yarn:

yarn add --dev --exact svelte-check

pnpm:

pnpm add --save-dev --save-exact svelte-check

bun:

bun add --dev --exact svelte-check

Getting help

Don't be shy about asking for help in the Discord chatroom! You can also find answers on Stack Overflow.