Creating a project

A Svelte project is created by the official sv utility. It sets up a ready SvelteKit skeleton: build settings, the first page and the commands to run it. All you need is Node.js 20 or newer.

Creating

npx sv create todo-app

The utility asks a few questions. These answers suit the course:

Add-ons such as Prettier, ESLint or Vitest can be added later with npx sv add.

Running

cd todo-app
npm run dev

The terminal prints the address http://localhost:5173. Open it — you see the heading "Welcome to SvelteKit". The dev server watches the files: save a change and the page updates without a reload.

What is inside

todo-app/
├── src/
│   ├── lib/              shared code and components
│   ├── routes/
│   │   └── +page.svelte  the home page of the site
│   └── app.html          HTML template for all pages
├── static/               files served as they are
├── package.json
├── svelte.config.js      Svelte and SvelteKit settings
└── vite.config.js        settings of the Vite bundler

The folders that matter at the start are src/routes and src/lib. Every +page.svelte file in src/routes is a page of the site. src/lib holds components and modules used in different places.

First edit

Open src/routes/+page.svelte and replace its content:

<!-- src/routes/+page.svelte -->
<h1>My tasks</h1>
<p>The list is empty for now.</p>

After saving, http://localhost:5173 shows the heading and a line of text. This file will be the home of the to-do list in the next lessons.

The $lib alias

To avoid long relative paths like ../../lib/components/TodoItem.svelte, SvelteKit provides the $lib alias — it points to the src/lib folder:

// src/routes/+page.svelte (inside the script block)
import TodoItem from '$lib/components/TodoItem.svelte';

Create the src/lib/components folder yourself when you need the first component.

Project commands

Common mistake

Creating a page file without the plus sign — for example, src/routes/page.svelte. SvelteKit does not treat such files as pages, and the address returns 404. Route files always start with +: +page.svelte, +layout.svelte, +page.server.js.