🌟 We are Open Source! Check out our repository on GitHub

Svelte Project Structure

A scalable and maintainable folder structure for Svelte applications

File Structure

  • src
    • lib
      • components
      • stores
    • routes
      • +page.svelte
      • +layout.svelte
      • +error.svelte
  • package.json
  • README.md

Directory Structure Explanation

src/

The main source directory containing all application code. This is where most of your development work will happen.

src/lib

A special directory in SvelteKit for reusable code that can be imported using the $lib alias. Contains components, utilities, and stores.

src/lib/components

Contains reusable Svelte components that can be shared across multiple pages and features.

src/lib/stores

Contains Svelte stores for state management, using Svelte's built-in store mechanism for reactive state handling.

src/routes

The routes directory that defines your application's page structure using SvelteKit's file-based routing system.

+page.svelte

Defines a page component in SvelteKit. The '+' prefix indicates it's a SvelteKit route file.

+layout.svelte

Defines a layout component that wraps pages, providing consistent UI elements across routes.

+error.svelte

A special component for handling and displaying error states when they occur in your application.

package.json

Defines project metadata, dependencies, and scripts for running, building, and testing the application.

README.md

Documentation file containing project information, setup instructions, and other important details.