First App

Create a project

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

The CLI lets you choose SvelteKit (full framework) or a library-only project. For learning Svelte itself, either works.

Project structure

my-app/
├── src/
│   ├── routes/          # Pages (SvelteKit)
│   │   └── +page.svelte # Home page
│   ├── lib/             # Shared components
│   └── app.html         # HTML template
├── static/              # Static assets
├── svelte.config.js     # Svelte config
└── vite.config.ts       # Vite config

Your first component

Edit src/routes/+page.svelte:

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<h1>Counter</h1>
<button onclick={() => count++}>
  {count} (doubled: {doubled})
</button>

<style>
  button {
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
  }
</style>

Save the file and the browser updates instantly (HMR).