Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .github/workflows/CI.yml
Original file line number Diff line number Diff line change
Expand Up @@ -65,13 +65,13 @@ jobs:
# Linux x86_64
- os: ubuntu-latest
target: x86_64-unknown-linux-gnu
sys_deps: pkg-config libwebkit2gtk-4.1-dev libsoup-3.0-dev libglib2.0-dev libcairo2-dev libpango1.0-dev libatk1.0-dev libgdk-pixbuf2.0-dev libgtk-3-dev
sys_deps: pkg-config libwebkit2gtk-4.1-dev libsoup-3.0-dev libglib2.0-dev libcairo2-dev libpango1.0-dev libatk1.0-dev libgdk-pixbuf2.0-dev libgtk-3-dev libxdo-dev

# Linux ARM64
- os: ubuntu-latest
target: aarch64-unknown-linux-gnu
cross_arch: arm64
cross_sys_deps: libglib2.0-dev:arm64 libwebkit2gtk-4.1-dev:arm64 libsoup-3.0-dev:arm64 libcairo2-dev:arm64 libpango1.0-dev:arm64 libatk1.0-dev:arm64 libgdk-pixbuf2.0-dev:arm64 libgtk-3-dev:arm64
cross_sys_deps: libglib2.0-dev:arm64 libwebkit2gtk-4.1-dev:arm64 libsoup-3.0-dev:arm64 libcairo2-dev:arm64 libpango1.0-dev:arm64 libatk1.0-dev:arm64 libgdk-pixbuf2.0-dev:arm64 libgtk-3-dev:arm64 libxdo-dev:arm64
cross_gcc: gcc-aarch64-linux-gnu
cross_gpp: g++-aarch64-linux-gnu
cross_triplet: aarch64-linux-gnu
Expand All @@ -91,7 +91,7 @@ jobs:
- os: ubuntu-latest
target: armv7-unknown-linux-gnueabihf
cross_arch: armhf
cross_sys_deps: libglib2.0-dev:armhf libwebkit2gtk-4.1-dev:armhf libsoup-3.0-dev:armhf libcairo2-dev:armhf libpango1.0-dev:armhf libatk1.0-dev:armhf libgdk-pixbuf2.0-dev:armhf libgtk-3-dev:armhf
cross_sys_deps: libglib2.0-dev:armhf libwebkit2gtk-4.1-dev:armhf libsoup-3.0-dev:armhf libcairo2-dev:armhf libpango1.0-dev:armhf libatk1.0-dev:armhf libgdk-pixbuf2.0-dev:armhf libgtk-3-dev:armhf libxdo-dev:armhf
cross_gcc: gcc-arm-linux-gnueabihf
cross_gpp: g++-arm-linux-gnueabihf
cross_triplet: arm-linux-gnueabihf
Expand Down
3 changes: 3 additions & 0 deletions Cargo.toml
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ napi-derive = "3.5.1"
tao = { version = "0.34.5", features = ["rwh_06"] }
wry = { version = "0.53.5", features = ["devtools", "fullscreen"] }

[target.'cfg(not(target_os = "android"))'.dependencies]
muda = { version = "0.17", features = ["libxdo"] }

[target.'cfg(target_os = "linux")'.dependencies]
gtk = "0.18"
glib = "0.18"
Expand Down
158 changes: 147 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,20 @@ npm install @webviewjs/webview

# Supported platforms

| Platform | Supported |
| ----------------------- | --------- |
| x86_64-apple-darwin | ✅ |
| x86_64-pc-windows-msvc | ✅ |
| i686-pc-windows-msvc | ✅ |
| aarch64-apple-darwin | ✅ |
| aarch64-linux-android | ✅ |
| armv7-linux-androideabi | ✅ |
| aarch64-pc-windows-msvc | ✅ |
| Platform | Supported |
| ---------------------------- | --------- |
| x86_64-pc-windows-msvc | ✅ |
| i686-pc-windows-msvc | ✅ |
| aarch64-pc-windows-msvc | ✅ |
| x86_64-apple-darwin | ✅ |
| aarch64-apple-darwin | ✅ |
| x86_64-unknown-linux-gnu | ✅ |
| i686-unknown-linux-gnu | ✅ |
| aarch64-unknown-linux-gnu | ✅ |
| armv7-unknown-linux-gnueabihf| ✅ |
| aarch64-linux-android | ✅ |
| armv7-linux-androideabi | ✅ |
| x86_64-unknown-freebsd | ✅ |

# Examples

Expand All @@ -45,6 +50,129 @@ webview.loadUrl('https://nodejs.org');
app.run();
```

## Menu System

WebviewJS provides a cross-platform menu system that works on macOS, Windows, and Linux.

### Basic Menu Setup

```js
import { Application, initMenuSystem } from '@webviewjs/webview';

// Initialize menu system (recommended, especially for macOS)
initMenuSystem();

const app = new Application();

// Set global application menu
app.setMenu({
items: [
{
label: "File",
submenu: {
items: [
{ id: "new", label: "New", accelerator: "CmdOrCtrl+N" },
{ id: "open", label: "Open", accelerator: "CmdOrCtrl+O" },
{ role: "separator" },
{ id: "quit", label: "Quit", accelerator: "CmdOrCtrl+Q" }
]
}
},
{
label: "Edit",
submenu: {
items: [
{ role: "copy" },
{ role: "paste" },
{ role: "cut" },
{ role: "selectall" }
]
}
}
]
});

const window = app.createBrowserWindow();
const webview = window.createWebview({ url: 'https://nodejs.org' });

app.run();
```

### Menu Event Handling

```js
import { Application, WebviewApplicationEvent } from '@webviewjs/webview';

const app = new Application();

// Handle menu events
app.bind((event) => {
if (event.event === WebviewApplicationEvent.CustomMenuClick) {
const menuEvent = event.customMenuEvent;
console.log(`Menu item clicked: ${menuEvent.id}`);
console.log(`From window: ${menuEvent.windowId}`);

// Handle specific menu items
switch (menuEvent.id) {
case 'new':
console.log('Creating new document...');
break;
case 'open':
console.log('Opening file...');
break;
case 'quit':
app.exit();
break;
}
}
});

// Set up menu...
app.setMenu({ /* ... */ });
```

### Window-Specific Menus

```js
const app = new Application();

// Create window with custom menu
const window = app.createBrowserWindow({
title: "Custom Window",
menu: {
items: [
{
id: "window-action",
label: "Window Action",
accelerator: "Ctrl+W"
}
]
}
});

// Or check if window has a menu
if (window.hasMenu()) {
console.log('This window has a menu');
}
```

### Menu Item Options

- **`id`**: Unique identifier for the menu item (used in events)
- **`label`**: Display text for the menu item
- **`enabled`**: Whether the item is clickable (default: true)
- **`accelerator`**: Keyboard shortcut (e.g., "CmdOrCtrl+N", "Alt+F4")
- **`submenu`**: Nested menu items
- **`role`**: Predefined menu items with built-in behavior

### Predefined Menu Roles

- **`"copy"`**: Standard copy action
- **`"paste"`**: Standard paste action
- **`"cut"`**: Standard cut action
- **`"selectall"`**: Select all text action
- **`"separator"`**: Visual separator line

## IPC

```js
Expand Down Expand Up @@ -120,7 +248,15 @@ webview.reload();

For more details on closing applications and cleaning up resources, see the [Closing Guide](./docs/CLOSING_GUIDE.md).

Check out [examples](./examples) directory for more examples, such as serving contents from a web server to webview, etc.
Check out [examples](./examples) directory for more examples:

- **[menu-system.mjs](./examples/menu-system.mjs)** - Comprehensive menu system demonstration with all features
- **[window-menus.mjs](./examples/window-menus.mjs)** - Window-specific vs global menu examples
- **[http/](./examples/http/)** - Serving content from a web server to webview
- **[transparent.mjs](./examples/transparent.mjs)** - Transparent window example
- **[close-example.mjs](./examples/close-example.mjs)** - Graceful application closing

Run any example with: `node examples/menu-system.mjs` (after building the project)

# Building executables

Expand All @@ -141,7 +277,7 @@ You can pass `--resources ./my-resource.json` to include additional resources in

- [Bun](https://bun.sh/) >= 1.3.0
- [Rust](https://www.rust-lang.org/) stable toolchain
- [Node.js](https://nodejs.org/) >= 18 (for testing)
- [Node.js](https://nodejs.org/) >= 24 (for testing)

## Setup

Expand Down
Loading