electrobun

Electrobun

Electrobun is a TypeScript-first desktop app framework using Bun (runtime + bundler) and the system's native webview. Build apps that are ~14MB, with updates ~14KB, and startup <50ms.

Quick Start

Initialize New Project

bunx electrobun init          # Interactive scaffold
bun run dev                   # Development mode
bun run build                 # Production bundle

Choose from templates:

• hello-world: Minimal starter
• react-tailwind-vite: React + Tailwind + Vite
• svelte: Svelte framework
• photo-booth: Camera access example
• multitab-browser: Tab-based browser example

Project Structure

my-app/
├── electrobun.config.ts      # Build configuration
├── src/
│   ├── bun/
│   │   └── main.ts           # Main process (Bun)
│   └── views/
│       └── mainview/
│           ├── index.html
│           └── index.ts      # Webview frontend
└── package.json

Core Concepts

Main Process vs Webview

• Main Process (src/bun/main.ts): Runs in Bun, has full system access, manages windows, handles RPC
• Webview Process (src/views/*/index.ts): Runs in OS webview, sandboxed, handles UI, calls RPC

BrowserWindow

Create and manage application windows.

import { BrowserWindow } from "electrobun/bun";

const win = new BrowserWindow({
  title: "My App",
  url: "views://mainview/index.html",
  width: 1200,
  height: 800,
  frame: true,  // Standard window frame
  styleMask: ["titled", "closable", "miniaturizable", "resizable"],
});

Key Options:

• title: Window title
• url: Load URL (use views:// protocol for bundled views)
• width, height: Window dimensions
• x, y: Window position (optional)
• frame: Show standard window frame (true/false)
• styleMask: Array of window controls (macOS)
• titleBarStyle: "default" | "hidden" | "hiddenInset"
• trafficLightPosition: Custom position for macOS traffic lights

Methods:

win.loadURL("views://otherview/index.html")
win.setTitle("New Title")
win.resize({ width: 1024, height: 768 })
win.move({ x: 100, y: 100 })
win.show() / win.hide()
win.close()
win.focus()
win.minimize() / win.maximize() / win.fullscreen()