Svelte logo

SvelteKit by Example: Filesystem & Routing

SvelteKit is a meta-framework to build full-stack web applications with Svelte. SvelteKit comes with routing and the necessary build tools to create an application.

If you want to follow along, run npx sv create to create a new project. These examples use Svelte 5 and SvelteKit 3. SvelteKit 3 requires Node.js 22.17 or newer.

In this example, we'll review the skeleton of a SvelteKit app and its file-based routing.

A hidden folder for SvelteKit to cache and temporarily store generated code.

Your application lives in src.

Use lib to store application code not tied to specific routes.

The routes folder dictates the structure of your application.

Each page has a +page.svelte component. The one in routes is your home page.

SvelteKit also supports layout components and scripts to apply a layout to all descendants.

Use subfolders for additional pages, this one will be used for the /about page. Page components can be accompanied by page scripts & server scripts to fetch & prepare data.

This will be the index page for your lists at /lists. Use square brackets to add a route parameter. This will be the "show" page of a todo list at /lists/<id>.

Your application's main CSS file and HTML skeleton.

SvelteKit 3 configuration lives in vite.config.js, passed to the sveltekit plugin. Older projects used svelte.config.js, which is no longer supported in SvelteKit 3.

.svelte-kit


src/

——— lib/



——— routes/


——— ——— +page.svelte



——— ——— +layout.js
——— ——— +layout.svelte


——— ——— about/
——— ——— ——— +page.js
——— ——— ——— +page.server.js
——— ——— ——— +page.svelte




——— ——— lists/
——— ——— ——— +page.svelte
——— ——— ——— [id]/
——— ——— ——— ——— +page.svelte



——— app.css
——— app.html

.gitignore

package.json

README.md

vite.config.js

Use a package import to refer to src/lib as #lib. Add this mapping to package.json, then import files like #lib/server/db.js. Include the file extension. Older SvelteKit projects used $lib instead.

{
  "imports": {
    "#lib/*": "./src/lib/*"
  }
}