SvelteKit overview

Introduction

SvelteKit helps you build fast websites and apps easily. It handles loading pages, routing, and server tasks so you can focus on your code.

You want to create a website that loads quickly and feels smooth.

You need to build a web app with multiple pages and navigation.

You want to use server-side code and client-side code together simply.

You want automatic handling of URLs and page changes without full reloads.

You want to deploy your app easily on many platforms with minimal setup.

Syntax

Svelte

<script>
  import { page } from '$app/stores';

  export let data;

  // Your component code here
</script>

<main>
  <h1>Welcome to SvelteKit</h1>
</main>

SvelteKit uses +page.svelte files for pages and +page.js or +page.server.js for loading data.

Routing is file-based: the file location matches the URL path automatically.

Examples

A simple page component receiving data from a load function.

Svelte

// +page.svelte
<script>
  export let data;
</script>

<h1>{data.title}</h1>

This load function sends data to the page component before it renders.

Svelte

// +page.js
export function load() {
  return { title: 'Hello from SvelteKit!' };
}

File location controls the URL path without extra setup.

Svelte

// src/routes/about/+page.svelte
<h1>About Us</h1>
<p>This page is at /about URL automatically.</p>

Sample Program

This example shows a page that loads a message from the server and displays it. The load function runs before the page shows, so the message is ready immediately.

Svelte

// src/routes/+page.js
export function load() {
  return { message: 'Welcome to SvelteKit!' };
}

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

<main>
  <h1>{data.message}</h1>
  <p>This page loads data and shows it.</p>
</main>

Important Notes

SvelteKit combines server and client code smoothly, so you can write less and do more.

It supports many deployment targets like static sites, serverless functions, and Node.js servers.

Use the src/routes folder to organize your pages and APIs by URL.

Summary

SvelteKit is a tool to build fast, modern web apps with less setup.

It uses file-based routing and load functions to manage pages and data.

It works well for both simple websites and complex apps with server logic.