Getting Started with SvelteKit: A Complete Beginner's Guide

Introduction

SvelteKit is the official application framework for Svelte, designed to make building web applications fast, fun, and production-ready. If you have been curious about Svelte but were not sure where to start, this guide will walk you through everything you need to get your first SvelteKit project up and running.

By the end of this tutorial, you will have a working SvelteKit application with multiple pages, a shared layout, and a solid understanding of the project structure.

Prerequisites

Before we begin, make sure you have the following installed:

• Node.js version 18 or later
• npm, pnpm, or bun as your package manager
• A code editor (VS Code is recommended)

You can verify your Node.js installation by running:

node --version

Creating Your First SvelteKit Project

Open your terminal and run the following command to scaffold a new SvelteKit project:

npx sv create my-first-app

The CLI will ask you a series of questions. For this tutorial, select the following options:

• Template: SvelteKit minimal
• Type checking: TypeScript
• Additional options: Choose what you like (ESLint, Prettier, etc.)

Once the scaffolding is complete, navigate into the project directory and install dependencies:

cd my-first-app
npm install

Now start the development server:

npm run dev

Open your browser and visit http://localhost:5173. You should see the default SvelteKit welcome page.

Understanding the Project Structure

Let us take a look at the files and folders that SvelteKit created for you:

my-first-app/
├── src/
│   ├── routes/
│   │   └── +page.svelte
│   ├── lib/
│   │   └── index.ts
│   └── app.html
├── static/
├── svelte.config.js
├── vite.config.ts
├── tsconfig.json
└── package.json

Key Files and Directories

• src/routes/ — This is where all your pages live. SvelteKit uses file-based routing, which means the file structure inside routes/ directly maps to the URLs of your app.
• src/lib/ — Shared code, components, and utilities go here. You can import from this folder using the $lib alias.
• src/app.html — The HTML shell for your application. SvelteKit injects your app into the %sveltekit.body% placeholder.
• svelte.config.js — Configuration for the Svelte compiler and SvelteKit adapter.
• vite.config.ts — Vite build tool configuration.
• static/ — Files in this directory are served as-is (images, fonts, favicon, etc.).

Your First Page: +page.svelte

The heart of SvelteKit routing is the +page.svelte file. Open src/routes/+page.svelte and replace its contents:

<script lang="ts">
  let name = 'Getting Started with SvelteKit';
</script>

<svelte:head>
  <title>Home | My First App</title>
</svelte:head>

<main>
  <h1>Welcome to {name}</h1>
  <p>This is your first SvelteKit page. Edit this file at <code>src/routes/+page.svelte</code>.</p>

  <a href="/about">Go to About page</a>
</main>

<style>
  main {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem;
    font-family: system-ui, sans-serif;
  }

  h1 {
    color: #ff3e00;
  }

  a {
    color: #0070f3;
    text-decoration: underline;
  }
</style>

Save the file and check your browser. The page updates instantly thanks to Vite's hot module replacement (HMR).

Adding a Second Page

Let us create an About page. Create a new folder and file at src/routes/about/+page.svelte:

mkdir -p src/routes/about

Now create the file src/routes/about/+page.svelte:

<svelte:head>
  <title>About | My First App</title>
</svelte:head>

<main>
  <h1>About This App</h1>
  <p>
    This is a SvelteKit application built from scratch. SvelteKit provides
    file-based routing, server-side rendering, and much more out of the box.
  </p>

  <a href="/">Back to Home</a>
</main>

<style>
  main {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem;
    font-family: system-ui, sans-serif;
  }
</style>

Navigate to http://localhost:5173/about in your browser. Your second page is live.

Creating a Shared Layout

You will notice that both pages share the same styling for the <main> element. Instead of duplicating styles, SvelteKit lets you define a layout that wraps all pages.

Create a file at src/routes/+layout.svelte:

<script lang="ts">
  import type { Snippet } from 'svelte';

  let { children }: { children: Snippet } = $props();
</script>

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

<div class="content">
  {@render children()}
</div>

<style>
  nav {
    display: flex;
    gap: 1rem;
    padding: 1rem 2rem;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
  }

  nav a {
    color: #333;
    text-decoration: none;
    font-weight: 500;
  }

  nav a:hover {
    color: #ff3e00;
  }

  .content {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem;
    font-family: system-ui, sans-serif;
  }
</style>

Now every page inside src/routes/ will automatically be wrapped with this navigation bar and content container. You can remove the duplicated <main> wrappers and styles from your individual pages.

Adding a Contact Page

Let us add one more page to make our navigation complete. Create src/routes/contact/+page.svelte:

<svelte:head>
  <title>Contact | My First App</title>
</svelte:head>

<h1>Contact Us</h1>

<form>
  <label>
    Name
    <input type="text" name="name" placeholder="Your name" />
  </label>

  <label>
    Email
    <input type="email" name="email" placeholder="you@example.com" />
  </label>

  <label>
    Message
    <textarea name="message" rows="5" placeholder="Your message..."></textarea>
  </label>

  <button type="submit">Send</button>
</form>

<style>
  form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-weight: 500;
  }

  input, textarea {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
  }

  button {
    padding: 0.75rem 1.5rem;
    background: #ff3e00;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
  }

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

Working with Components

SvelteKit encourages you to build reusable components. Let us create a simple Card component.

Create the file src/lib/components/Card.svelte:

<script lang="ts">
  let { title, description }: { title: string; description: string } = $props();
</script>

<div class="card">
  <h3>{title}</h3>
  <p>{description}</p>
</div>

<style>
  .card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    transition: box-shadow 0.2s;
  }

  .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  h3 {
    margin: 0 0 0.5rem;
  }

  p {
    margin: 0;
    color: #666;
  }
</style>

Now use it in your home page:

<script lang="ts">
  import Card from '$lib/components/Card.svelte';
</script>

<svelte:head>
  <title>Home | My First App</title>
</svelte:head>

<h1>Welcome to SvelteKit</h1>
<p>Here are some things you can build:</p>

<div class="grid">
  <Card title="Blog" description="Create a markdown-powered blog with static generation." />
  <Card title="E-commerce" description="Build a full online store with server-side rendering." />
  <Card title="Dashboard" description="Real-time dashboards with WebSocket integration." />
</div>

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
  }
</style>

Building for Production

When you are ready to deploy, SvelteKit needs an adapter to target your hosting platform. The most common options are:

• @sveltejs/adapter-auto — Automatically detects your deployment platform
• @sveltejs/adapter-node — For Node.js servers
• @sveltejs/adapter-static — For static site generation
• @sveltejs/adapter-vercel — For Vercel deployment

Install the adapter you need (adapter-auto is included by default):

npm install -D @sveltejs/adapter-node

Then update your svelte.config.js:

import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter()
  }
};

export default config;

Build your project:

npm run build

Preview the production build locally:

npm run preview

Summary

In this tutorial, you learned how to:

1. Create a new SvelteKit project using the CLI
2. Understand the project structure and key files
3. Create pages with +page.svelte files
4. Add navigation with a shared +layout.svelte
5. Build components in $lib and import them
6. Build for production with the right adapter

SvelteKit gives you an excellent developer experience with fast HMR, file-based routing, and sensible defaults. From here, you can explore more advanced features like data loading, form actions, API routes, and server-side rendering.

Next Steps

• Learn about SvelteKit routing in depth
• Explore Svelte 5 runes for reactivity
• Try form actions for server-side form handling
• Understand load functions for data fetching

Happy building with SvelteKit!