https://github.com/agmmnn/electrobun-controls
🐇🚥 Framework-agnostic native-looking window controls for Electrobun.
https://github.com/agmmnn/electrobun-controls
bun desktop-app electrobun window-controls
Last synced: 2 months ago
JSON representation
🐇🚥 Framework-agnostic native-looking window controls for Electrobun.
- Host: GitHub
- URL: https://github.com/agmmnn/electrobun-controls
- Owner: agmmnn
- License: mit
- Created: 2026-03-30T22:29:26.000Z (2 months ago)
- Default Branch: master
- Last Pushed: 2026-03-31T00:11:36.000Z (2 months ago)
- Last Synced: 2026-04-04T18:51:26.879Z (2 months ago)
- Topics: bun, desktop-app, electrobun, window-controls
- Language: TypeScript
- Homepage:
- Size: 80.1 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# electrobun-controls
[](https://npmjs.com/package/electrobun-controls)
[](https://github.com/agmmnn/electrobun-controls/releases/latest)
[](https://bun.sh)
[](https://github.com/blackboardsh/electrobun)
Framework-agnostic, native-looking window controls for Electrobun.
> One package. No boilerplate. Works with any frontend.
## ✨ Features
- native-style window controls (macOS, Windows, Linux)
- framework-agnostic DOM API (React, Vue, Svelte, Solid, vanilla)
- built-in Electrobun adapter (auto RPC wiring)
- Bun helper for native window actions
- prebuilt renderer + styles
- titlebar utilities with correct drag regions
## 📦 Install
```bash
npm install electrobun-controls
```
If using Electrobun, install it in your host app as well:
```bash
npm install electrobun
```
## ⚡ Quick start
### 1. Electrobun (main process)
```ts
import { BrowserWindow } from "electrobun/bun";
import { createElectrobunWindowControlsRPC } from "electrobun-controls/bun";
let mainWindow: BrowserWindow;
mainWindow = new BrowserWindow({
title: "My App",
url: "views://mainview/index.html",
titleBarStyle: "hidden",
rpc: createElectrobunWindowControlsRPC(() => mainWindow),
});
```
### 2. Renderer
```ts
import "electrobun-controls/style.css";
import { createTitlebar } from "electrobun-controls/dom";
import { createElectrobunAdapter } from "electrobun-controls/electrobun";
const titlebar = createTitlebar({
adapter: createElectrobunAdapter(),
title: "My App",
});
document.body.prepend(titlebar.element);
```
## 🧩 Framework usage
Mount into any framework via a ref or host element:
```ts
import "electrobun-controls/style.css";
import { mountWindowControls } from "electrobun-controls/dom";
import { createElectrobunAdapter } from "electrobun-controls/electrobun";
const mounted = mountWindowControls(hostElement, {
adapter: createElectrobunAdapter(),
});
// cleanup
mounted.destroy();
```
## How it works
- main process exposes window actions via RPC
- renderer adapter connects automatically (no boilerplate)
- DOM renderer handles UI + interaction
- drag regions are applied via Electrobun classes
## Exports
- `electrobun-controls`
- `electrobun-controls/dom`
- `electrobun-controls/electrobun`
- `electrobun-controls/bun`
- `electrobun-controls/style.css`
## Notes
- OS detection: override → `process.platform` → `navigator`
- Linux uses Ubuntu/Yaru-style controls (v1)
- Electrobun adapter auto-detects webview and sets up RPC
- Bun helper maps to native window APIs (`close`, `minimize`, `maximize`, `setFullScreen`)
## Development
```bash
npm install
npm run dev
npm run build
npm run test
```
## License
MIT