SvelteKit Basics

SvelteKit is a framework built on top of Svelte, adding routing, page loading, and deployment tools needed for a complete web application. Plain Svelte handles individual components well, while SvelteKit handles an entire multi-page site.

Why SvelteKit Matters

A real website usually needs several pages, a way to move between them, and a plan for loading data before a page displays. Building all of this manually with plain Svelte takes considerable extra setup. SvelteKit provides these pieces ready-made, letting you focus on building the actual pages instead.

How Pages Map To Files

SvelteKit reads the folder structure inside the routes directory and turns each folder into a web address automatically, without a separate routing configuration file.

src/routes/+page.svelte           -> the home page
src/routes/about/+page.svelte     -> the about page
src/routes/contact/+page.svelte   -> the contact page

Folder To Address Diagram

src/routes/
 ├── +page.svelte           -> yoursite.com/
 ├── about/
 │    └── +page.svelte      -> yoursite.com/about
 └── contact/
      └── +page.svelte      -> yoursite.com/contact

Creating a new folder with a +page.svelte file inside it instantly creates a new page reachable at a matching address, without touching any separate configuration file.

A Simple Page File

<!-- src/routes/+page.svelte -->
<h2>Welcome To Our Site</h2>
<p>This is the home page.</p>

This file looks just like a regular Svelte component, since a SvelteKit page is a Svelte component placed in a specific location.

Linking Between Pages

<a href="/about">About Us</a>

A standard anchor tag links pages together, and SvelteKit automatically upgrades this link to load the new page quickly without a full browser reload, keeping navigation fast and smooth.

Loading Data Before A Page Renders

<!-- src/routes/products/+page.js -->
export async function load() {
  const response = await fetch("https://example.com/api/products");
  const products = await response.json();
  return { products };
}

<!-- src/routes/products/+page.svelte -->
<script>
  export let data;
</script>

{#each data.products as product}
  <p>{product.name}</p>
{/each}

The load function runs before the page renders, fetching the products first. The page component receives the result through a prop named data, ready to display immediately without showing a loading state on the visitor's first view.

A Layman Analogy

Think of plain Svelte as a set of furnished rooms and SvelteKit as the entire building holding those rooms together, complete with hallways connecting them, an address system for visitors, and a front desk that prepares each room before a guest walks in.

Key Features SvelteKit Adds

• File-based routing that maps folders directly to page addresses
• A load function for preparing data before a page renders
• Fast client-side navigation between pages without full reloads
• Built-in support for building and deploying a finished site

Dynamic Route Parameters

A folder name wrapped in square brackets creates a dynamic segment, matching a range of addresses instead of just one fixed address.

src/routes/products/[id]/+page.svelte

<script>
  export let data;
</script>

<p>Product ID: {data.id}</p>

Visiting an address like yoursite.com/products/42 matches this route, and the value 42 becomes available for the page to read and display.

Key Points

• SvelteKit adds routing and app-level features on top of plain Svelte
• Folders inside the routes directory map directly to page addresses
• A load function fetches data before a page displays it
• Standard links between pages load quickly without a full page reload