SvelteKit + Electrobun Skeleton
A minimal skeleton project demonstrating SvelteKit running in a desktop app powered by Electrobun.
What's Inside
- SvelteKit with file-based routing
- Svelte 5 with runes
- Electrobun for desktop app framework
- Bun runtime for fast development
- Vite with HMR support
- adapter-static for prerendered static output
Project Structure
├── src/
│ ├── bun/
│ │ └── index.ts # Main process (Electrobun)
│ ├── routes/
│ │ ├── +layout.ts # Global prerender config
│ │ ├── +page.svelte # Home page
│ │ └── about/
│ │ └── +page.svelte # About page
│ └── app.css # Global styles with CSS variables
│ └── app.html # SvelteKit app template
├── electrobun.config.ts # Electrobun configuration
├── svelte.config.ts # SvelteKit configuration
└── vite.config.ts # Vite configuration
Getting Started
Install Dependencies
bun install
Development
Option 1: Standard dev mode (no HMR)
bun run dev
Option 2: Dev mode with HMR
bun run dev:hmr
This runs the Vite dev server on http://localhost:5173 alongside Electrobun. Changes to your Svelte components will hot-reload instantly.
Production Build
bun run build
Builds the SvelteKit app with adapter-static and packages it with Electrobun.
Production build with channel:
bun run build:prod
Key Features
SvelteKit Routing
File-based routing works seamlessly in the desktop app:
/- Home page with interactive counter/about- About page demonstrating navigation
Prerendering
All routes are prerendered at build time using adapter-static. The +layout.ts file sets global prerender configuration:
export const prerender = true;
export const ssr = true;
CSS Architecture
Global styles use CSS variables for easy theming:
- Colors:
--color-primary,--color-secondary,--color-text - Shadows:
--shadow-primary,--shadow-primary-hover - Reusable button classes:
.primary,.secondary
Bun Integration
All Vite commands use bunx --bun vite to ensure Bun's runtime is used instead of Node.js.
Configuration
Minimal SvelteKit Config
The svelte.config.ts uses minimal configuration with sensible defaults:
import adapter from '@sveltejs/adapter-static';
export default {
kit: {
adapter: adapter({
pages: 'dist',
assets: 'dist'
})
},
compilerOptions: {
runes: true
}
};
Electrobun Config
The electrobun.config.ts copies the built SvelteKit app to Electrobun's views directory:
buildConfig: {
copy: [
{ from: 'dist', to: 'views/mainview' }
]
}
Tech Stack
- Electrobun - Desktop app framework
- SvelteKit - Web framework with file-based routing
- Svelte 5 - UI framework with runes
- Bun - Fast JavaScript runtime
- Vite - Build tool with HMR
- adapter-static - SvelteKit adapter for static site generation
- TypeScript - Type safety
Learn More
