Project structure in Svelte

Introduction

Project structure helps organize your files so your app is easy to build and maintain.

Starting a new Svelte app to keep code neat

Adding new pages or components to your project

Working with others on the same Svelte project

Preparing your app for deployment or updates

Syntax

Svelte

my-svelte-app/
├── static/
│   ├── global.css
│   └── favicon.png
├── src/
│   ├── routes/
│   │   ├── +page.svelte
│   │   └── about/+page.svelte
│   ├── lib/
│   │   └── Button.svelte
│   └── app.html
├── package.json
└── svelte.config.js

static/ holds static files like images and global styles.

src/ contains your app code: pages in routes/, reusable parts in lib/.

Examples

This is the main homepage component file.

Svelte

src/routes/+page.svelte

This file creates an About page at URL /about.

Svelte

src/routes/about/+page.svelte

A reusable button component you can use anywhere in your app.

Svelte

src/lib/Button.svelte

Sample Program

This simple Svelte component shows a button that counts clicks. It would live inside a file like src/routes/+page.svelte.

It uses accessible button markup with an aria-label and updates the count on each click.

Svelte

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment} aria-label="Increment counter">
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

Important Notes

Keep your src/routes folder organized by pages and subpages for easy navigation.

Use src/lib for components you want to reuse in many places.

Static files like images and fonts go in static so they load fast.

Summary

Project structure organizes your app files clearly.

src/routes holds pages, src/lib holds reusable components.

static stores static assets like images and styles.