Electron with Svelte Project Structure

Svelte renderer for lightweight Electron apps. Compile-time reactivity, tiny bundles, fast runtime.

#electron #svelte #vite #desktop #typescript

PNG PDF

Project Directory

my-electron-app/

package.json

vite.config.ts

svelte.config.js

electron-builder.json

src/

main/

index.ts

window.ts

ipc/

index.ts

files.ts

preload/

index.ts

renderer/

Svelte app

index.html

main.ts

App.svelte

app.css

lib/

components/

TitleBar.svelte

Sidebar.svelte

electron/

IPC bindings

api.ts

events.ts

stores/

app.ts

Svelte stores

routes/

Page components

Home.svelte

Settings.svelte

resources/

icon.icns

icon.ico

Why This Structure?

Svelte compiles away the framework—no virtual DOM, tiny runtime. Perfect for Electron where bundle size affects startup time. Svelte stores integrate naturally with Electron's event-based IPC. Fastest cold starts among framework options.

Key Directories

src/renderer/lib/electron/-Typed IPC wrappers for preload APIs
src/renderer/lib/stores/-Svelte stores for reactive state
src/renderer/lib/components/-Reusable Svelte components
src/renderer/routes/-Page-level components

Getting Started

Use electron-vite with Svelte template
npm create electron-vite
npm install
Configure Svelte adapter for Vite
npm run dev

Svelte Component




{#each $files as file}
  {file}
{/each}

When To Use This

Performance-critical apps
Apps prioritizing small bundle size
Teams familiar with Svelte
Simpler apps without heavy routing needs

Trade-offs

Smaller ecosystem-Fewer component libraries than React/Vue
No official router-Need third-party routing solution
Build complexity-Svelte + Electron config can be tricky