SvelteKit + Electron: Create your desktop web app
Tags: javascript, webdev, electron, svelte
Published: 2023-02-13 14:34:21

---
title: SvelteKit + Electron: Create your desktop web app
published: true
description: Create desktop apps with electron and SvelteKit, i create ad SvelteKit adapter for make this in 1 line of code 
tags: javascript, webdev, electron, svelte
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cyf20saiim410alp14dv.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-02-13 14:20 +0000
---

I make a new [Adapter](https://kit.svelte.dev/docs/adapters) for SvelteKit apps that prerenders your entire site as a collection of static files for use with [Electron](https://electronjs.org). 

🏗 https://github.com/ptkdev/sveltekit-electron-adapter
🙏 Support me with ⭐️ on github 

## 💡 Features

-   [✔️] Easy to use
-   [✔️] MIT License
-   [✔️] Make desktop apps with svelte kit and electron

## 👔 Screenshot

[![sveltekit-electron-adapter](https://raw.githubusercontent.com/ptkdev/sveltekit-electron-adapter/main/.github/assets/screenshot.png)](https://raw.githubusercontent.com/ptkdev/sveltekit-electron-adapter/main/.github/assets/screenshot.png)


## 🚀 Setup

1. Create [new SvelteKit Project](https://kit.svelte.dev/docs/creating-a-project)
2. Install this adapter `npm install @ptkdev/sveltekit-electron-adapter --save-dev`
3. Edit `svelte.config.js` and replace default adapter with electron-adapter:

```js
import adapter from "@ptkdev/sveltekit-electron-adapter";

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter({
			strict: false,
		}),
	},
};
```

4. Run `npm run build` (⚠️ IMPORTANT: Only pages with `export const prerender = true;` are supported)
5. Create [new Electron Forge Project](https://www.electronforge.io/)
6. Copy `build` content from sveltekit project and paste in `src` folder of electron forge project
7. Run Electron project with `npm run start` or generate binary with `npm run make`

I make a boilerplate that "automate" this process, but is working in progress: check [this repo](https://github.com/ptkdev-boilerplate/svelte-electron-boilerplate).


## 🧰 Options

The `adapter({ options })` parameters list:

| Parameter   | Description                                                     | Values | Default value                                               | Available since |
| ----------- | --------------------------------------------------------------- | ------ | ----------------------------------------------------------- | --------------- |
| pages       | See official [docs](https://kit.svelte.dev/docs/adapter-static) |        |                                                             |                 |
| assets      | See official [docs](https://kit.svelte.dev/docs/adapter-static) |        |                                                             |                 |
| fallback    | See official [docs](https://kit.svelte.dev/docs/adapter-static) |        |                                                             |                 |
| precompress | See official [docs](https://kit.svelte.dev/docs/adapter-static) |        |                                                             |                 |
| strict      | See official [docs](https://kit.svelte.dev/docs/adapter-static) |        |                                                             |                 |
| policy      | Set meta-tag `content-security-policy`                          | String | Empty                                                       | v0.2.0          |
| viewport    | Set meta-tag `viewport`                                         | String | `width=device-width, initial-scale=1.0, viewport-fit=cover` | v0.2.0          |


## Examples:
See [examples](https://github.com/ptkdev/sveltekit-electron-adapter/tree/main/examples) folder on github

## ❤️ Thanks! Leave a feedback!