Properties and Methods
Source: https://github.com/blackboardsh/electrobun/blob/main/docs/src/content/docs/electrobun/apis/browser/electrobun-wgpu-tag.mdx
This snippet demonstrates how to query properties like `wgpuViewId`, `transparent`, `passthroughEnabled`, and `hidden`, and how to use methods to control these states. It also shows how to manage mask selectors and listen for the 'ready' event.
```javascript
const wgpu = document.querySelector("electrobun-wgpu");
// Properties
console.log(wgpu.wgpuViewId);
console.log(wgpu.transparent, wgpu.passthroughEnabled, wgpu.hidden);
// Methods
wgpu.toggleTransparent(true);
wgpu.togglePassthrough(true);
wgpu.toggleHidden(false);
wgpu.syncDimensions(true);
// Masks
wgpu.addMaskSelector("#hud");
wgpu.removeMaskSelector("#hud");
// Events
wgpu.on("ready", (evt) => {
console.log("WGPU view ready", evt.detail);
});
```
--------------------------------
### Switch Electrobun Between Stable and Beta
Source: https://github.com/blackboardsh/electrobun/blob/main/BETA_RELEASE.md
Commands to switch your Electrobun installation between the latest stable release and the beta channel.
```bash
# Switch to stable
npm install electrobun@latest
```
```bash
# Switch to beta
npm install electrobun@beta
```
--------------------------------
### Tray Constructor
Source: https://github.com/blackboardsh/electrobun/blob/main/docs/src/content/docs/electrobun/apis/tray.mdx
Initialize a new Tray instance with various configuration options.
```APIDOC
## Constructor Options
### title
This is the text that will appear in your system tray
### image
This is an optional url to an image to load. You can use the `views://` schema to access local bundled images.
### template
You can use a full-color image like a png but that image will just be shown as is. On MacOS you can create a template image and set the `template` property to true. A template image uses opacity to define a black and white image that adapts to your systems light/dark mode.
### width and height
Set the dimensions of the image used in the system tray
```
--------------------------------
### Copy and Paste Text Example
Source: https://github.com/blackboardsh/electrobun/blob/main/docs/src/content/docs/electrobun/apis/utils.mdx
Demonstrates a basic copy-paste workflow using `Utils.clipboardWriteText()` to copy text and `Utils.clipboardReadText()` to retrieve it.
```javascript
// Copy text to clipboard
Utils.clipboardWriteText("Hello World");
// Later, read it back
const text = Utils.clipboardReadText();
console.log(text); // "Hello World"
```
--------------------------------
### Configure Bundled Assets in `electrobun.config`
Source: https://github.com/blackboardsh/electrobun/blob/main/docs/src/content/docs/electrobun/apis/bundled-assets.mdx
Configure the `electrobun.config` file to bundle static assets using the `views://` schema. The `views` section defines entry points, and the `copy` section specifies assets to be included in the build output.
```javascript
build: {
views: {
mainview: {
entrypoint: "src/mainview/index.ts",
// All Bun.build() options are supported here, e.g.:
// plugins: [myPlugin()],
// sourcemap: "linked",
// minify: true,
},
},
copy: {
"src/mainview/index.html": "views/mainview/index.html",
"src/mainview/style.css": "views/mainview/style.css",
"src/mainview/script.js": "views/mainview/script.js",
},
}
```
--------------------------------
### Get Tray Icon Bounds
Source: https://github.com/blackboardsh/electrobun/blob/main/docs/src/content/docs/electrobun/apis/tray.mdx
Retrieves the position and dimensions of the tray icon. Returns an object with x, y, width, and height.
```javascript
const bounds = tray.getBounds();
console.log(`Tray icon at (${bounds.x}, ${bounds.y}) size ${bounds.width}x${bounds.height}`);
```
--------------------------------
### Run Built Application
Source: https://github.com/blackboardsh/electrobun/blob/main/templates/photo-booth/README.md
Use this command to launch the application after it has been built for production.
```bash
bun start
```
--------------------------------
### Run Electrobun in Dev Mode
Source: https://github.com/blackboardsh/electrobun/blob/main/CLAUDE.md
Use this command from the package folder to build and run the kitchen app in development mode. Ensure you are in the correct directory before executing.
```bash
bun dev
```
--------------------------------
### setPageZoom / getPageZoom
Source: https://github.com/blackboardsh/electrobun/blob/main/docs/src/content/docs/electrobun/apis/browser-window.mdx
Control and get the page zoom level for the window's webview. A value of `1.0` represents 100% zoom.
```APIDOC
## setPageZoom
### Description
Sets the zoom level for the window's webview.
### Method Signature
`win.setPageZoom(level: number): void`
### Parameters
* **level** (number) - Required - The zoom level. `1.0` is 100%.
### Example
```javascript
// Set zoom to 150%
win.setPageZoom(1.5);
// Reset to default zoom
win.setPageZoom(1.0);
```
## getPageZoom
### Description
Gets the current page zoom level for the window's webview.
### Method Signature
`win.getPageZoom(): number`
### Returns
* `number` - The current zoom level. `1.0` represents 100%.
### Example
```javascript
const zoom = win.getPageZoom();
console.log(`Current zoom: ${zoom * 100}%`);
```
### Notes
Page zoom is fully supported on macOS. On Windows and Linux, these methods are available but are no-ops; `getPageZoom()` will always return `1.0`.
```
--------------------------------
### Verify Environment Variable Setup
Source: https://github.com/blackboardsh/electrobun/blob/main/docs/src/content/docs/electrobun/guides/code-signing.mdx
Use this command to confirm that your environment variables, specifically ELECTROBUN_TEAMID, are correctly set in your terminal session.
```bash
echo $ELECTROBUN_TEAMID
```
--------------------------------
### BrowserWindow Constructor with RPC
Source: https://github.com/blackboardsh/electrobun/blob/main/docs/src/content/docs/electrobun/apis/browser-window.mdx
Illustrates setting up Remote Procedure Calls (RPC) for a BrowserWindow, enabling asynchronous communication between the main Electrobun process and the browser context.
```APIDOC
## BrowserWindow Constructor with RPC
### Description
Configure a BrowserWindow to enable Remote Procedure Calls (RPC) between the main Electrobun process and the browser view. This allows defining functions that can be called from either context, with results returned asynchronously.
### Usage
Pass the `rpc` option to the `BrowserWindow` constructor, providing an `RPCSchema` object with handlers for requests and messages.
### Options
- **rpc** (RPCSchema) - An object defining the RPC schema and handlers for communication.
### Example: Defining RPC Handlers in the Main Process
#### Shared Types (`src/shared/types.ts`)
```typescript
export type MyWebviewRPCType = {
// functions that execute in the main process
bun: RPCSchema<{
requests: {
someBunFunction: {
params: { a: number; b: number };
response: number;
};
};
messages: {
logToBun: { msg: string };
};
}>;
// functions that execute in the browser context
webview: RPCSchema<{
requests: {
someWebviewFunction: {
params: { a: number; b: number };
response: number;
};
};
messages: {
logToWebview: { msg: string };
};
}>;
};
```
#### Main Process RPC Setup (`src/bun/index.ts`)
```typescript
import { BrowserWindow, BrowserView } from "electrobun/bun";
import { type MyWebviewRPCType } from "../shared/types";
const myWebviewRPC = BrowserView.defineRPC({
maxRequestTime: 5000,
handlers: {
requests: {
someBunFunction: ({ a, b }) => {
console.log(`browser asked me to do math with: ${a} and ${b}`);
return a + b;
},
},
messages: {
"*": (messageName, payload) => {
console.log("global message handler", messageName, payload);
},
logToBun: ({ msg }) => {
console.log("Log to bun: ", msg);
},
},
},
});
const win = new BrowserWindow({
title: "my window",
url: "views://mainview/index.html",
frame: {
width: 1800,
height: 600,
x: 2000,
y: 2000,
},
rpc: myWebviewRPC,
});
// Calling browser functions from bun
const answer = await win.webview.rpc.request.someWebviewFunction({ a: 4, b: 6 });
// Sending messages to the BrowserView from bun
win.webview.rpc.send.logToWebview({ msg: "my message" });
```
```
--------------------------------
### Screen.getCursorScreenPoint()
Source: https://github.com/blackboardsh/electrobun/blob/main/docs/src/content/docs/electrobun/apis/utils.mdx
Gets the current position of the mouse cursor on the screen in absolute coordinates. This can be used for interactive elements or to determine where the user is currently pointing.
```APIDOC
## Screen.getCursorScreenPoint()
### Description
Returns the current cursor position in screen coordinates.
### Method
`Screen.getCursorScreenPoint()`
### Parameters
None
### Response
* **Point** - An object representing the cursor's coordinates.
* **x** (number) - The x-coordinate of the cursor.
* **y** (number) - The y-coordinate of the cursor.
### Example
```javascript
const cursor = Screen.getCursorScreenPoint();
console.log(`Cursor at: (${cursor.x}, ${cursor.y})`);
```
```
--------------------------------
### Get All Connected Displays Information
Source: https://github.com/blackboardsh/electrobun/blob/main/docs/src/content/docs/electrobun/apis/utils.mdx
Retrieve an array of all connected displays and log their properties, such as dimensions, position, scale factor, and primary status.
```javascript
const displays = Screen.getAllDisplays();
console.log(`Found ${displays.length} display(s)`);
displays.forEach((display, index) => {
console.log(`Display ${index}: ${display.bounds.width}x${display.bounds.height}`);
console.log(` Position: (${display.bounds.x}, ${display.bounds.y})`);
console.log(` Scale: ${display.scaleFactor}x`);
console.log(` Primary: ${display.isPrimary}`);
});
```
--------------------------------
### Enable WebGPU Bundling
Source: https://github.com/blackboardsh/electrobun/blob/main/docs/src/content/docs/electrobun/apis/webgpu.mdx
Configure electrobun.config.ts to bundle the native WebGPU implementation for each platform.
```javascript
// electrobun.config.ts
import { type ElectrobunConfig } from "electrobun";
export const config: ElectrobunConfig = {
build: {
macos: { bundleWGPU: true },
win: { bundleWGPU: true },
linux: { bundleWGPU: true },
},
};
```
--------------------------------
### Get Primary Display Information
Source: https://github.com/blackboardsh/electrobun/blob/main/docs/src/content/docs/electrobun/apis/utils.mdx
Retrieve and log details about the primary connected display, including its dimensions, scale factor, and work area.
```javascript
const primary = Screen.getPrimaryDisplay();
console.log(`Primary display: ${primary.bounds.width}x${primary.bounds.height}`);
console.log(`Scale factor: ${primary.scaleFactor}x`);
console.log(`Work area: ${primary.workArea.width}x${primary.workArea.height}`);
```
--------------------------------
### Babylon.js Integration with WebGPU
Source: https://github.com/blackboardsh/electrobun/blob/main/docs/src/content/docs/electrobun/apis/webgpu.mdx
Renders a rotating cube using Babylon.js and the WebGPU engine. Requires installing the WebGPU context and providing a canvas shim.
```javascript
import { GpuWindow, babylon, webgpu } from "electrobun/bun";
const win = new GpuWindow({ title: "Babylon + WebGPU" });
webgpu.install();
const size = win.getSize();
const canvas = {
width: size.width,
height: size.height,
clientWidth: size.width,
clientHeight: size.height,
style: {},
getContext: (type) => {
if (type !== "webgpu") return null;
return webgpu.createContext(win).context;
},
getBoundingClientRect: () => ({
left: 0,
top: 0,
width: win.getSize().width,
height: win.getSize().height,
}),
addEventListener: () => {},
removeEventListener: () => {},
setAttribute: () => {},
};
const engine = new babylon.WebGPUEngine(canvas, { antialias: false });
await engine.initAsync();
const scene = new babylon.Scene(engine);
scene.clearColor = new babylon.Color4(0.12, 0.12, 0.14, 1);
const camera = new babylon.ArcRotateCamera(
"camera",
Math.PI / 4,
Math.PI / 3,
2.5,
new babylon.Vector3(0, 0, 0),
scene
);
camera.attachControl(canvas, true);
new babylon.HemisphericLight("light", new babylon.Vector3(0.4, 1, 0.6), scene);
const box = babylon.MeshBuilder.CreateBox("box", { size: 0.7 }, scene);
const mat = new babylon.StandardMaterial("mat", scene);
mat.diffuseColor = new babylon.Color3(0.12, 0.12, 0.12);
mat.specularColor = new babylon.Color3(0.4, 0.4, 0.5);
box.material = mat;
engine.runRenderLoop(() => scene.render());
```
--------------------------------
### Importing Electrobun API
Source: https://github.com/blackboardsh/electrobun/blob/main/docs/src/content/docs/electrobun/apis/bun.mdx
Demonstrates two ways to import the Electrobun API for main process development. Ensure you explicitly import from 'electrobun/bun'.
```javascript
import Electrobun from "electrobun/bun";
const win = new Electrobun.BrowserWindow(/*...*/);
```
```javascript
import {
BrowserWindow,
ApplicationMenu,
// other specified imports
} from "electrobun/bun";
const win = new BrowserWindow(/*...*/);
```