First App

npx sv create my-app
cd my-app
npm install
npm run dev

The CLI asks you to pick a template. Choose “Skeleton project” for a minimal starting point.

Add a page

Create src/routes/about/+page.svelte:

<h1>About</h1>
<p>This is the about page.</p>

Visit http://localhost:5173/about. No configuration needed - the file path is the URL.

Add a layout

Create src/routes/+layout.svelte:

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

<main>
  {@render children()}
</main>

<style>
  nav { display: flex; gap: 1rem; padding: 1rem; }
  main { padding: 1rem; }
</style>

The layout wraps every page. Navigation links work without full page reloads.

Add data loading

Create src/routes/+page.server.ts:

export function load() {
  return {
    greeting: "Hello from the server!",
    timestamp: new Date().toISOString()
  };
}

Use it in src/routes/+page.svelte:

<script>
  let { data } = $props();
</script>

<h1>{data.greeting}</h1>
<p>Loaded at: {data.timestamp}</p>