Quick start

The easiest way to start building a SvelteKit app is to run npx sv create:

Create a new project

Run the following command to scaffold a new SvelteKit project:

npx sv create my-app
cd my-app

The CLI will ask if you’d like to set up some basic tooling such as TypeScript, ESLint, and Prettier. Choose the options that work best for your project.

See the CLI documentation for more information about available options.

Install dependencies

If you didn’t install dependencies during project creation, run:

npm install

You can use npm, pnpm, yarn, or bun as your package manager.

Start the development server

Launch the development server:

npm run dev

Your app will be running at http://localhost:5173. The development server features hot module replacement, so changes you make will be reflected instantly in the browser.

Build your first page

Try editing the files to get a feel for how everything works. Let’s create a simple page.Edit src/routes/+page.svelte:

<script>
  /** @type {import('./$types').PageData} */
  export let data;
</script>

<h1>Welcome to SvelteKit</h1>
<p>The answer is {data.answer}</p>

Create src/routes/+page.js to load data:

/** @type {import('@sveltejs/kit').Load} */
export async function load({ fetch }) {
  const res = await fetch('/api/answer');
  const { answer } = await res.json();
  return { answer };
}

Create an API endpoint at src/routes/api/answer/+server.js:

import { json } from '@sveltejs/kit';

export function GET() {
  return json({ answer: 42 });
}

Two basic concepts

There are two fundamental concepts to understand:

Each page is a Svelte component — Pages are defined in .svelte files that export your component
You create pages by adding files to src/routes — The file structure determines your app’s routes

These pages are server-rendered by default so that a user’s first visit is as fast as possible, then a client-side app takes over for subsequent navigation.

Editor setup

We recommend using Visual Studio Code with the Svelte extension, but support also exists for numerous other editors.

VS Code extensions

Svelte for VS Code

Provides syntax highlighting, IntelliSense, and more for Svelte components

Svelte Intellisense

Auto-completion and type checking for Svelte files

Building for production

To create a production version of your app:

npm run build

pnpm build

yarn build

bun run build

You can preview the production build with:

npm run preview

pnpm preview

yarn preview

bun run preview

The preview command is for local testing only. For production deployment, you need to use an adapter.

Deployment

To deploy your app, you’ll need to install an adapter for your target environment. Adapters are small plugins that take the built app and prepare it for deployment to your platform of choice.

Quick deployment options

Auto (recommended)
Node.js
Static
Vercel

The default adapter automatically detects your deployment platform:

svelte.config.js

import adapter from '@sveltejs/adapter-auto';

export default {
  kit: {
    adapter: adapter()
  }
};

Works with Vercel, Netlify, Cloudflare Pages, and more.

For Node.js servers:

npm install @sveltejs/adapter-node

svelte.config.js

import adapter from '@sveltejs/adapter-node';

export default {
  kit: {
    adapter: adapter()
  }
};

For static site generation:

npm install @sveltejs/adapter-static

svelte.config.js

import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter()
  }
};

For Vercel with platform-specific features:

npm install @sveltejs/adapter-vercel

svelte.config.js

import adapter from '@sveltejs/adapter-vercel';

export default {
  kit: {
    adapter: adapter()
  }
};

Next steps

Now that you have a working SvelteKit app, explore these topics:

Project structure

Understand the files and folders in your project

Routing

Learn how file-based routing works

Loading data

Fetch data for your pages

Form actions

Handle form submissions

Getting Started

Core Concepts

Build and Deploy

Advanced

Two basic concepts

Editor setup

VS Code extensions

Svelte for VS Code

Svelte Intellisense

Building for production

Deployment

Quick deployment options

Next steps

Project structure

Routing

Loading data

Form actions

​Two basic concepts

​Editor setup

​VS Code extensions

Svelte for VS Code

Svelte Intellisense

​Building for production

​Deployment

​Quick deployment options

​Next steps

Project structure

Routing

Loading data

Form actions

Two basic concepts

Editor setup

VS Code extensions

Building for production

Deployment

Quick deployment options

Next steps