Why I made an Electron + Svelte template
Raphael Tang / December 24, 2021
2 min read
The common Electron stack typically involves React, Vue, or Angular. There are by no means no issues with the existing frameworks, but some templates built with these stacks typically are extremely huge and difficult to understand, making the onboarding process difficult, especially if you're new to Electron.
Here's an alternative that you may want to use in your next project.
Introducing, electron-svelte-ts. It's a template that aims to be a minimal alternative to the other templates out there. Here's everything it covers:
- The Electron layer uses electron-forge. It's easy to get up and running, and allows for easy configuration through
- The template uses Electron security features by default. By connecting the frontend and the backend through IPC and preloading the required variables through
- Together with Svelte, Tailwind CSS is used to power the styling. It allows you to use class names to style the HTML directly.
The file structure is as follows:
src/main — The main process in Electron. Run code that does heavy processing here.
src/renderer — The renderer process in Electron. It's what the main process loads on startup.
public — Contains assets that can be loaded in the browser.
scripts — Contains scripts that are used for deployment, development and production.
All components should go in
src/renderer/components if you need them, and views should go in
For example, if you were to have a view based application, you would have a view named
Home.svelte and another named
App.svelte, you should import both views and load the appropriate view by storing the current page in a svelte store named currentPage.
These best practices allow you to have a clean and concise structure that anyone can understand for your Electron applications.
Check out the template here.
Subscribe to the newsletter
Get emails from me about software development, SaaS, and early access to new articles.