Quick start

Get started building your first SvelteKit application in minutes

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

1. 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.

2. 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.

3. 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.

4. 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:

1. Each page is a Svelte component — Pages are defined in .svelte files that export your component
2. 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

npm run build

You can preview the production build with:

npm

npm 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)

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.

Node.js

For Node.js servers:

npm install @sveltejs/adapter-node

svelte.config.js

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

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

Static

For static site generation:

npm install @sveltejs/adapter-static

svelte.config.js

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

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

Vercel

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