Skip to main content

​
Quick start with SvelteKit

The recommended way to start building with Svelte is using SvelteKit, the official application framework powered by Vite. SvelteKit provides routing, server-side rendering, and other features that make building full-featured applications straightforward.
1

Create a new project

Run the sv create command to scaffold a new project:
npx sv create myapp
cd myapp
npm install
The interactive CLI will guide you through selecting project options including TypeScript support, linting, and testing setup.
2

Start the development server

Launch the development server with hot module replacement:
npm run dev
Your app will be available at http://localhost:5173
3

Create your first component

Create a new file src/lib/Counter.svelte:
src/lib/Counter.svelte
<script>
	let count = $state(0);
</script>

<button onclick={() => count++}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

<style>
	button {
		background: #ff3e00;
		color: white;
		border: none;
		padding: 12px 24px;
		border-radius: 8px;
		font-size: 16px;
		cursor: pointer;
		transition: background 0.2s;
	}

	button:hover {
		background: #ff6540;
	}
</style>
4

Use your component

Import and use your component in src/routes/+page.svelte:
src/routes/+page.svelte
<script>
	import Counter from '$lib/Counter.svelte';
</script>

<h1>Welcome to Svelte!</h1>
<Counter />
Don’t worry if you don’t know all of SvelteKit’s features yet! You can focus on learning Svelte itself first and explore SvelteKit’s routing, SSR, and other capabilities later.

​
Understanding the example

Let’s break down the Counter component:

​
Reactive state with $state

let count = $state(0);
The $state rune creates reactive state. When count changes, Svelte automatically updates any part of the UI that depends on it. No need for setState or similar functions — just use regular assignment: 
count++  // This automatically triggers UI updates

​
Event handling

<button onclick={() => count++}>
Event handlers use standard DOM event names (onclick, onkeydown, etc.) and accept inline functions or references to functions defined in your <script> block.

​
Template expressions

{count === 1 ? 'time' : 'times'}
Curly braces {} let you embed JavaScript expressions directly in your markup. Svelte efficiently tracks which expressions depend on which state and updates only what’s necessary.

​
Scoped styles

The <style> block is automatically scoped to this component. The button selector only affects buttons in this component, not buttons elsewhere in your application.

​
Alternative setup with Vite

If you prefer a minimal setup without SvelteKit’s features, you can use Svelte directly with Vite:
1

Create a Vite project

npm create vite@latest myapp -- --template svelte
cd myapp
npm install
Add -ts to the template name for TypeScript support: --template svelte-ts
2

Start development

npm run dev
The standalone Vite setup is great for building single-page apps (SPAs), but you’ll need to choose a routing library separately. For most projects, SvelteKit is the recommended choice.

​
Editor setup

For the best development experience, install the official Svelte extension for your editor:

VS Code

Install the Svelte for VS Code extension for syntax highlighting, IntelliSense, and diagnostics.

Other editors

Check Svelte Society for plugins supporting JetBrains IDEs, Vim, Emacs, and more.

​
Command-line type checking

You can check your code for errors from the command line: 
npx sv check
This is useful for CI/CD pipelines and pre-commit hooks.

​
Next steps

Svelte files

Learn about the structure of .svelte component files

Runes

Understand Svelte’s reactivity system with runes

Template syntax

Explore Svelte’s powerful template features

SvelteKit docs

Dive into full-stack development with SvelteKit

​
Getting help

Join the friendly Svelte community:
  • Discord: Join the Svelte Discord for real-time help and discussion
  • Stack Overflow: Browse and ask questions tagged with svelte
  • GitHub: Report issues or contribute on GitHub