Project Structure in Svelte

From the SvelteKit cheat sheet · Setup & Project Structure · verified Jul 2026

Project Structure

SvelteKit file and folder organization

javascript
my-app/
├── src/
│   ├── routes/          # File-based routing
│   ├── lib/             # Shared utilities ($lib alias)
│   ├── app.html         # HTML template
│   └── app.d.ts         # TypeScript definitions
├── static/              # Static assets
├── tests/               # Test files
├── package.json
├── svelte.config.js     # SvelteKit config
└── vite.config.js       # Vite config
📁 File-based routing in src/routes
🔗 $lib alias for easy imports
🎯 Special +page/+layout naming convention
⚙️ Separate client and server hooks

More Svelte tasks

Back to the full SvelteKit cheat sheet