SvelteKit + Electron Starter

A modern desktop application starter template combining SvelteKit and Electron.

Features

• Electron
• Electron vite
• SvelteKit
• TailwindCSS v4

Testing and code quality

• Vitest
• ESLint
• Prettier

Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

Building

# For macos
npm run build:mac

# For windows
npm run build:win

# For linux
npm run build:linux

Testing

# Run vitest tests
npm run test

File protocol

For loading files use the custom fs:// protocol. The default electron files protocol doesn't work with sveltekit.

<!-- Example -->
<img src="fs:///Users/user/Downloads/image.jpeg" alt="" />

Project Structure

project
├── resources                   # Application resources
├── src                         #
│   ├── main                    # Main scripts
│   ├── preload                 # Preload scripts
│   ├── renderer                # SvelteKit (renderer) folder
│   │   ├── lib                 # Lib folder for SvelteKit
│   │   └── routes              # Routes
│   └── shared                  # Shared files between main, preload and renderer
├── static                      # Static assets for SvelteKit
├── electron.vite.config.ts
├── eslint.config.mjs
├── package.json
├── svelte.config.js
├── tsconfig.json
├── vite.config.ts
└── vitest-setup-client.ts