Deep Dive: Building a Desktop App with Deno , Tutorial from 0 to Deploy

So far, if you want to build a desktop app with JavaScript/TypeScript, the standard option is only Electron , or if you want something more lightweight, Tauri. But Electron is known to be heavy (each app brings its own Chromium), while Tauri requires Rust behind it. Well, Deno 2.9 comes with an interesting solution: a built-in WebView API that lets you build native desktop apps without a bundler, without Webpack, and without the hassle.

In this tutorial, I will show you step by step how to build a desktop app from scratch to deployment. The app we are going to build is Markdown Notes , a simple note-taking app that uses Markdown, complete with real-time preview.

What Makes Deno Suitable for Desktop Apps?

Deno 2.9 has several features that make it very suitable for desktop app development:

Native WebView API , Deno 2.9+ hasDeno.webViewAPI that can render HTML/CSS/JS directly in a native window. No large Chromium needed.

TypeScript first class , You can write desktop apps using TypeScript without any setup. No tsconfig needed, no Webpack needed, no bundler needed.

Single binary , Deno can compile your app into a single executable file. Similar to Go or Rust.

Permissions model , Deno uses an explicit permission system, so your app cannot access the file system or network without permission.

Complete standard library , File system, HTTP, SQLite, and others are already included without needing npm install.

Compare it to Electron which needs ~150MB per app (Chromium + Node.js), a Deno app can be just ~15-30MB. Compared to Tauri which requires Rust knowledge, Deno just uses pure TypeScript.

Step 1: Setup Deno 2.9

Make sure you have installed Deno 2.9 or newer. Check the version:

If you don't have it yet, install it via:

Or if you use macOS:

Step 2: Init Project

Create a project folder and the main file:

No need for package.json, no need for tsconfig.json, no need webpack.config.js. Just two files. This is what you call zero-config.

File index.html , UI App

Create a simple UI using HTML + CSS + vanilla JavaScript. No need for React, no need for a framework:

Note that we use a dark mode theme (Catppuccin Mocha) so it's easy on the eyes. This UI has a sidebar for the list of notes, a toolbar, a Markdown editor on the left, and a preview on the right.

Step 3: Backend Connection , main.ts

Now we create the main Deno file that will load the WebView, render HTML, and handle interactions from the frontend via Deno.webView API:

Explanation of the code above:

Deno.webView(), creates a native window and renders HTML inside it. This uses WebView2 on Windows, WebKit on macOS, and GTK WebView on Linux.

ipcHandler, the function that will be called every time the frontend sends a message viawindow.ipc.postMessage(). Here you can handle various actions like reading/writing files.

File system API usesDeno.readTextFile,Deno.writeTextFile, andDeno.remove, all native, no need to npm install fs-extra.

Step 4: Frontend JavaScript (app.js)

To make it cleaner, we separate the frontend JavaScript into a separate file. But since we use a WebView that renders directly from an HTML string, we need to inject the script. Save it as app.js in the same folder:

Step 5: Run the App

Run the app with the appropriate permissions:

The arguments --allow-read and --allow-write are required because our app reads/writes note files. --allow-env is required by the internal WebView.

Once it's running, you will see a native window appear with the Markdown Notes app ready to use. Try creating a new note, writing Markdown, and seeing its real-time preview.

Step 6: Compile to Single Binary

One of the advantages of Deno , you can compile the app into a single executable file that can be distributed to users without needing to install Deno:

The result is a binary file markdown-notes that can be run directly. Its size is around 20-25MB (depending on the OS). Compare that to Electron which is at least 150MB.

Step 7: Distribution

There are several ways to distribute a Deno Desktop app:

Single binary , Directly send the executable file to the user. Suitable for internal tools or CLI.

Homebrew , Create a Homebrew formula so macOS users can install viabrew install markdown-notes.

GitHub Releases , Upload the binary to GitHub Releases, complete with assets for Windows (.exe), macOS (.app), and Linux.

Scoop/Chocolatey , Create a package manifest for Windows users.

To create a binary ready for distribution to various platforms, you can use CI/CD like GitHub Actions:

Comparison: Deno Desktop vs Electron vs Tauri

To make it clearer, here is a comparison of the three technologies:

Comparison of Deno Desktop vs Electron vs Tauri:

Bundle Size:Deno ~20-30 MB vs Electron ~150-250 MB vs Tauri ~3-10 MB

Language:Deno uses pure TypeScript/JS vs Electron JS/TS + Node.js vs Tauri Rust + JS/TS

Setup Complexity:Deno is very simple (zero-config) vs Electron is simple vs Tauri requires Rust knowledge

Performance:Deno is good vs Electron is decent vs Tauri is very good

Ecosystem:Deno is new (growing) vs Electron is mature & large vs Tauri is developing

Ideal for:Deno is suitable for internal tools & utility apps vs Electron for complex applications (VS Code-like) vs Tauri for high-performance applications

If you want to read further documentation, check Deno WebView docs andDeno compile docs.

Conclusion

Deno 2.9 opens a new path for JavaScript/TypeScript developers who want to build desktop apps without the hassle. With a built-in WebView API, zero-config TypeScript, and the ability to compile to a single binary, Deno becomes a viable alternative to Electron for certain use cases.

Of course, Deno Desktop is still relatively new , its ecosystem isn't as large as Electron's yet. But for internal tools, utility apps, or side projects, Deno offers a much lighter and faster developer experience.

The most interesting part: you can start building an app in 5 minutes without needing to install anything other than Deno. Try it yourself!

Don't forget to leave a comment or share your experience trying this out in the discussion section. If there are any errors or you're confused, just ask , I'll help answer.