🌟 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
        • ui
        • features
        • layouts
      • stores
        • auth.ts
        • theme.ts
        • settings.ts
      • utils
        • api.ts
        • validation.ts
        • formatting.ts
      • types
        • api.ts
        • models.ts
    • routes
      • +page.svelte
      • +layout.svelte
      • +error.svelte
      • dashboard
        • +page.svelte
        • +layout.svelte
        • settings
          • +page.svelte
  • static
  • tests
  • svelte.config.js
  • 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/components/ui

Contains base UI components like buttons, inputs, and cards that form the foundation of your application's design system.

src/lib/components/features

Contains larger, feature-specific components that combine multiple UI components for specific functionality.

src/lib/components/layouts

Contains different layout components for various sections or types of pages in your application.

src/lib/stores

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

src/lib/stores/auth.ts

Store for managing authentication state, user sessions, and related functionality.

src/lib/stores/theme.ts

Store for managing theme preferences and application-wide styling states.

src/lib/stores/settings.ts

Store for managing application-wide settings and user preferences.

src/lib/utils

Contains utility functions and helper methods used throughout the application.

src/lib/utils/api.ts

Utility functions for making API calls and handling API-related operations.

src/lib/utils/validation.ts

Functions for form validation and data validation throughout the application.

src/lib/utils/formatting.ts

Utility functions for formatting data, dates, numbers, and other content consistently.

src/lib/types

Contains TypeScript type definitions and interfaces used throughout the application.

src/lib/types/api.ts

Type definitions for API requests, responses, and related data structures.

src/lib/types/models.ts

Type definitions for data models and business logic interfaces.

src/routes

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

src/routes/+page.svelte

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

src/routes/+layout.svelte

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

src/routes/+error.svelte

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

src/routes/dashboard

Route directory for dashboard-related pages and functionality.

src/routes/dashboard/settings

Route directory specifically for dashboard settings pages and related functionality.

static

Directory for static assets that will be served directly by the server, such as images and fonts.

tests

Contains test files for components, utilities, and integration tests using testing frameworks like Vitest.

svelte.config.js

Configuration file for Svelte compiler options and SvelteKit settings.

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.