https://github.com/webviewjs/webview
Robust cross-platform webview library for Node/Deno/Bun
https://github.com/webviewjs/webview
binding bun deno executable hacktoberfest javascript napi node rust tao webview wry
Last synced: 3 months ago
JSON representation
Robust cross-platform webview library for Node/Deno/Bun
- Host: GitHub
- URL: https://github.com/webviewjs/webview
- Owner: webviewjs
- License: mit
- Created: 2024-09-28T11:07:34.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-12-16T04:06:07.000Z (6 months ago)
- Last Synced: 2025-03-14T22:06:39.378Z (3 months ago)
- Topics: binding, bun, deno, executable, hacktoberfest, javascript, napi, node, rust, tao, webview, wry
- Language: Rust
- Homepage: https://npm.im/@webviewjs/webview
- Size: 2 MB
- Stars: 20
- Watchers: 3
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `@webviewjs/webview`
Robust cross-platform webview library for Node.js written in Rust. It is a native binding to [tao](https://github.com/tauri-apps/tao) and [wry](https://github.com/tauri-apps/wry) allowing you to easily manage cross platform windowing and webview.
> [!CAUTION]
> This library is still in development and not ready for production use. Feel free to experiment with it and report any issues you find.
# Installation
```bash
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 | ✅ |
# Examples
## Load external url
```js
import { Application } from '@webviewjs/webview';
// or
const { Application } = require('@webviewjs/webview');
const app = new Application();
const window = app.createBrowserWindow();
const webview = window.createWebview();
webview.loadUrl('https://nodejs.org');
app.run();
```
## IPC
```js
const app = new Application();
const window = app.createBrowserWindow();
const webview = window.createWebview({
html: `
Webview
Hello world!
Click me!
btn.onclick = function send() {
window.ipc.postMessage('Hello from webview');
}
`,
preload: `window.onIpcMessage = function(data) {
const output = document.getElementById('output');
output.innerText = \`Server Sent A Message: \${data}\`;
}`
});
if (!webview.isDevtoolsOpen()) webview.openDevtools();
webview.onIpcMessage((data) => {
const reply = `You sent ${data.body.toString('utf-8')}`;
window.evaluateScript(`onIpcMessage("${reply}")`)
})
app.run();
```
Check out [examples](./examples) directory for more examples, such as serving contents from a web server to webview, etc.
# Building executables
> [!WARNING]
> The CLI feature is very experimental and may not work as expected. Please report any issues you find.
You can use [Single Executable Applications](https://nodejs.org/api/single-executable-applications.html) feature of Node.js to build an executable file. WebviewJS comes with a helper cli script to make this process easier.
```bash
webview --build --input ./path/to/your/script.js --output ./path/to/output-directory --name my-app
```
You can pass `--resources ./my-resource.json` to include additional resources in the executable. This resource can be imported using `getAsset()` or `getRawAsset()` functions from `node:sea` module.