Webview is a tiny cross-platform library to make web-based GUIs for desktop applications.

Overview

webview_deno

stars issues ci downloads deno version deno doc license

deno bindings for webview

Webview is a tiny cross-platform library to make web-based GUIs for desktop applications.


⚠️ This project is still in development. Expect breaking changes.


Example Image

Example

Hello from deno v${Deno.version.deno}

`; const webview = new Webview(); webview.navigate(`data:text/html,${encodeURIComponent(html)}`); webview.run();">
import { Webview } from "https://deno.land/x/webview/mod.ts";

const html = `
  
  
    

Hello from deno v${Deno.version.deno}

`; const webview = new Webview(); webview.navigate(`data:text/html,${encodeURIComponent(html)}`); webview.run();

You can run this example directly from the web:

deno run -Ar --unstable https://deno.land/x/webview/examples/local.ts

or in your development environment:

deno run -Ar --unstable examples/local.ts

you can find other examples in the examples/ directory.

Documentation

You can find the official documentation here.

Development

Prerequisites

Linux

  • webkit2gtk (to install using apt: sudo apt-get install libwebkit2gtk-4.0-dev)

Building

Make sure to init the webview submodule with:

$ git submodule update --init --recursive

Building on Windows requires admin privileges.

$ deno task build

Running

To run webview_deno without automatically downloading the binaries from releases you will need to use the environment variable PLUGIN_URL and set it to the path where the built binaries are located. This is usually file://./target/release.

$ deno task build
$ PLUGIN_URL=./build/
$ deno run --unstable -A examples/local.ts

or

$ deno task run examples/local.ts

or if you have the webview library already built and didn't make any changes to it, you can skip the building step with:

$ deno task run:fast examples/local.ts

Environment variables

  • PLUGIN_URL - Set a custom library URL. Defaults to the latest release assets on Github. Setting this also disables cache for plug.

Dependencies

Other

Contribution

Pull request, issues and feedback are very welcome. Code style is formatted with deno task fmt, linted with deno task lint and commit messages are done following Conventional Commits spec.

Licence

Copyright 2020-2022, the webview_deno team. All rights reserved. MIT license.

Comments
  • WebView.run() block deno

    WebView.run() block deno

    After calling WebView.run() we can no longer call any other function. example:

    ...
    webview1.run()
    console.log ("Never print if the window is open");
    
    
    bug 
    opened by IllusionPerdu 27
  • local.ts example doesn't work on macos

    local.ts example doesn't work on macos

    $ git clone [email protected]:webview/webview_deno.git
    Cloning into 'webview_deno'...
    cd eremote: Enumerating objects: 999, done.
    remote: Counting objects: 100% (303/303), done.
    remote: Compressing objects: 100% (217/217), done.
    remote: Total 999 (delta 163), reused 190 (delta 71), pack-reused 696
    Receiving objects: 100% (999/999), 920.60 KiB | 5.86 MiB/s, done.
    Resolving deltas: 100% (530/530), done.
    ^R
    cd Brandons-MacBook-Air:Desktop brandonros 2022-01-26 22:48:59 $ cd webview_deno/
    Brandons-MacBook-Air:webview_deno brandonros 2022-01-26 22:49:04 $ make build
    cargo build
        Updating crates.io index
      Downloaded once_cell v1.9.0
      Downloaded 1 crate (30.7 KB) in 0.79s
       Compiling pkg-config v0.3.18
       Compiling cc v1.0.58
       Compiling once_cell v1.9.0
       Compiling webview-official-sys v0.1.2
       Compiling webview_deno v0.7.0-pre.0 (/Users/brandonros/Desktop/webview_deno)
        Finished dev [unoptimized + debuginfo] target(s) in 1m 15s
    Brandons-MacBook-Air:webview_deno brandonros 2022-01-26 22:50:25 $ PLUGIN_URL=target/debug/  deno run --unstable -A examples/local.ts
    Check file:///Users/brandonros/Desktop/webview_deno/examples/local.ts
    Download target/debug/libwebview_deno.dylib
    
    $ deno --version
    deno 1.18.0 (release, aarch64-apple-darwin)
    v8 9.8.177.6
    typescript 4.5.2
    

    image

    just shows in the dock, click it and no window to be found anywhere

    bug macos 
    opened by brandonros 24
  • apple silicon support?

    apple silicon support?

    Hi, I want to test this library with Mac Mini(m1), but it doesn't work.

    deno run -Ar --unstable https://deno.land/x/webview/examples/local.ts
    ...
    ...
    Download https://deno.land/[email protected]/hash/_wasm/wasm.js
    Download https://deno.land/[email protected]/encoding/base64.ts
    Download https://deno.land/[email protected]/path/_util.ts
    Download https://deno.land/[email protected]/path/_constants.ts
    Download https://deno.land/x/[email protected]/file_fetcher.ts
    Check https://deno.land/x/webview/examples/local.ts
    error: Uncaught (in promise) Error: Could not open library: dlopen(/Users/paosder-mini/Library/Caches/deno/plug/https/github.com/4b121ee5a08490d714e3f7d99bf1bcce7bafae851df6e895a068bf3e7d1866ae.dylib, 5): no suitable image found.  Did find:
    	/Users/paosder-mini/Library/Caches/deno/plug/https/github.com/4b121ee5a08490d714e3f7d99bf1bcce7bafae851df6e895a068bf3e7d1866ae.dylib: mach-o, but wrong architecture
    	/Users/paosder-mini/Library/Caches/deno/plug/https/github.com/4b121ee5a08490d714e3f7d99bf1bcce7bafae851df6e895a068bf3e7d1866ae.dylib: stat() failed with errno=35
        at processResponse (deno:core/core.js:223:11)
        at Object.jsonOpSync (deno:core/core.js:246:12)
        at Object.openPlugin (deno:cli/rt/40_plugins.js:7:17)
        at Module.prepare (https://deno.land/x/[email protected]/plug.ts:82:15)
        at async load (https://deno.land/x/[email protected]/plugin.ts:75:9)
        at async https://deno.land/x/[email protected]/mod.ts:5:1
    

    It seems doesn't support ARM(m1) yet, however Deno support m1 latest release v1.6 using latest rust to build with. How do I solve this problem or is there any plan of supporting arm architecture?

    Thank you :)

    bug macos 
    opened by Paosder 13
  • feat: rewrite to use Deno FFI

    feat: rewrite to use Deno FFI

    Breaking Changes

    • Synchronous API.
      • Most of the calls get offloaded to the web renderer anyways. Also probably don't want to go through the overhead of spawning a tokio green thread in non blocking FFI.
      • Note that this does ~~not~~ block the JS event loop but spawning multiple webviews (one at a time) is still possible. This is a design limitation. One solution to this is native support for FFI callbacks (WIP)
    • Leverage JS setters
      • setTitle changes to a setter on webview.title. Same for setSize

    cc @eliassjogreen

    Closes #96 Closes #98 Closes #94 Closes #6 Closes #76 Closes #89 Closes #79

    opened by littledivy 11
  • Deno.openPlugin is not a function

    Deno.openPlugin is not a function

    With the default example code and the latest version of Deno I get:

    error: Uncaught (in promise) TypeError: Deno.openPlugin is not a function return Deno.openPlugin(file.path);

    opened by justinmchase 10
  • Simple scripts won't run.

    Simple scripts won't run.

    In the examples, only loading from a remote resouce worked.

    await new WebView({
      title: "Remote deno_webview example",
      url: `https://deno.land/`,
      width: 800,
      height: 600,
      resizable: true,
      debug: true,
      frameless: false,
    }).run();
    

    When I try to do this -

    await new WebView({
      title: "Local deno_webview example",
      url: `data:text/html,
        <html>
        <body>
          <h1>Hello from deno</h1>
        </body>
        </html>
        `,
      width: 800,
      height: 600,
      resizable: true,
      debug: true,
      frameless: false,
    }).run();
    

    The content within the webview is empty.

    Here is a screenshot, notice body is empty -

    Screen Shot 2020-05-16 at 10 26 37 AM

    Deno does not throw any permissions isues. I tried a data URL with encoded string as well, no luck.

    Going to try a local file, but don't think that will work either. Any advice would be appreciated.

    bug 
    opened by khrome83 10
  • Deno 1.10 support

    Deno 1.10 support

    deno 1.10.1 (release, x86_64-pc-windows-msvc) v8 9.1.269.27 typescript 4.2.2

    error: TS2345 [ERROR]: Argument of type '{ url: string; }' is not assignable to parameter of type 'boolean | undefined'.
      Type '{ url: string; }' is not assignable to type 'true'.
      { url: `data:text/html,${encodeURIComponent(html)}` },
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        at https://deno.land/x/[email protected]/examples/local.ts:12:3
    
    opened by Dragonrun1 9
  • fix: compiling webview shared library on linux

    fix: compiling webview shared library on linux

    fix https://github.com/webview/webview_deno/issues/114

    stdout had an extra '\n' that was messing the c++ invocation

    Also compiling on two steps doesn't seem to work so I just merged it into one.

    opened by sigmaSd 8
  • Use webview/webview_rust instead of boscop/web-view

    Use webview/webview_rust instead of boscop/web-view

    opened by eliassjogreen 8
  • Type Error for {url:string;}

    Type Error for {url:string;}

    TS2345 [ERROR]: Argument of type '{ url: string; }' is not assignable to parameter of type 'boolean | undefined'. Type '{ url: string; }' is not assignable to type 'true'.

    opened by jrmarcum 7
  • Incompatible with latest Deno (v1.11.3)

    Incompatible with latest Deno (v1.11.3)

    Hi,

    The example, and fix documented in #79 do not work for me in the latest Deno versions (v.1.11.3).

    The advise on that issue is to downgrade to v1.8.3, however that is not always an option.

    Is there an estimated timeline for a new release compatible with the latest Deno?

    John

    opened by John-Dean 7
  • Problems with running in a worker?

    Problems with running in a worker?

    If I try to run webview in a webworker, I get:

    Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'NSWindow drag regions should only be invalidated on the Main Thread!'
    *** First throw call stack:
    (
    	0   CoreFoundation                      0x00000001ad8db3f8 __exceptionPreprocess + 176
    	1   libobjc.A.dylib                     0x00000001ad426ea8 objc_exception_throw + 60
    	2   CoreFoundation                      0x00000001ad904810 _CFBundleGetValueForInfoKey + 0
    	3   AppKit                              0x00000001b0b02a18 -[NSWindow(NSWindow_Theme) _postWindowNeedsToResetDragMarginsUnlessPostingDisabled] + 320
    	4   AppKit                              0x00000001b0af1524 -[NSWindow _initContent:styleMask:backing:defer:contentView:] + 816
    	5   AppKit                              0x00000001b0af11e8 -[NSWindow initWithContentRect:styleMask:backing:defer:] + 48
    	6   5a78a907fb3b54a23d6ec12156baa6a1009 0x0000000108904fd0 _ZN7webview6detail22cocoa_wkwebview_engineC2EbPv + 672
    	7   5a78a907fb3b54a23d6ec12156baa6a1009 0x0000000108904d0c _ZN7webview7webviewC2EbPv + 72
    	8   5a78a907fb3b54a23d6ec12156baa6a1009 0x0000000108903afc _ZN7webview7webviewC1EbPv + 56
    	9   5a78a907fb3b54a23d6ec12156baa6a1009 0x0000000108903a50 webview_create + 56
    	10  deno                                0x000000010325004c ffi_call_SYSV + 76
    
    

    Presumably that's because it's not on the main thread. I'm unclear on how to make this work so I don't have to block my main thread.

    Any thoughts?

    opened by randallb 1
  • feat: allow multiple instances at the same root

    feat: allow multiple instances at the same root

    Motivation

    Due to file lock of Webview2Loader, only 1 instance of webview can run for a given execution path

    Changes

    • Rewrite the preload function in ffi.ts
    • Change caching method of Webview2Loader.dll in favor of internal cache by deno via ejm.sh
    • Refactor some parts
    • Update release url in ffi.ts
    opened by JOTSR 0
  • Readme example

    Readme example "Uncaught NotFound"

    Hey there, I'm having somewhat of a hard time playing around with this. I've managed to get a codebase working with the examples provided in this repo and wanted to create a clean project with the example provided in the Readme.

    import { Webview } from "https://deno.land/x/webview/mod.ts";
    
    const html = `
      <html>
      <body>
        <h1>Hello from deno v${Deno.version.deno}</h1>
      </body>
      </html>
    `;
    
    const webview = new Webview();
    
    webview.navigate(`data:text/html,${encodeURIComponent(html)}`);
    webview.run();
    

    Running this via deno run -Ar --unstable .\src\app.ts results in the WebView2Loader.dll being created in the src folder and the following console error:

    error: Uncaught (in promise) NotFound (os error 2)
      const metadata = await Deno.readTextFile(metapath(url, ns));
                       ^
        at async Object.readTextFile (deno:runtime/js/40_read_file.js:56:20)
        at async metaread (https://deno.land/x/[email protected]/file.ts:138:20)
        at async FileWrapper.read (https://deno.land/x/[email protected]/file.ts:85:18)
        at async FileWrapper.get (https://deno.land/x/[email protected]/file.ts:108:20)
        at async cache (https://deno.land/x/[email protected]/cache.ts:67:10)
        at async Wrapper.cache (https://deno.land/x/[email protected]/cache.ts:21:12)
        at async download (https://deno.land/x/[email protected]/plug.ts:107:16)
        at async prepare (https://deno.land/x/[email protected]/plug.ts:116:16)
        at async https://deno.land/x/[email protected]/src/ffi.ts:102:20
    

    I am running deno 1.28.1 and the examples within the examples folder of this repo (which import webview_deno locally) work flawlessly.

    opened by LauraWebdev 0
  • rename env PLUGIN_URL

    rename env PLUGIN_URL

    the env name should be more absolute than PLUGIN_URL

    https://github.com/webview/webview_deno/blob/9c3bff67c0b6ba2b5dc6066c15b3117da6ad7c68/src/ffi.ts#L4-L7

    this env holds the folder of libwebview.so so rename to ...

    WEBVIEW_DENO_LIBWEBVIEW? WEBVIEW_DENO_LIB? DENO_LIBWEBVIEW? DENO_WEBVIEW_LIB?

    also its not an (optional) "plugin" but an essential dependency

    fix merged in https://github.com/milahu/webview_deno

    opened by milahu 0
  • print command before running

    print command before running

    be more verbose on errors

     deno task build
     Warning deno task is unstable and may drastically change in the future
     Task build deno run -A --unstable script/build.ts
    +Running "pkg-config --cflags --libs gtk+-3.0 webkit2gtk-4.0"
     error: Uncaught (in promise) NotFound: No such file or directory (os error 2)
       const result = await Deno.spawn(cmd, opts);
                                 ^
         at spawnChild (deno:runtime/js/40_spawn.js:36:23)
         at Object.spawn (deno:runtime/js/40_spawn.js:231:12)
         at spawn (file:///tmp/tmp.aGowOqCn9e/vscode/vscode-deno/webview_deno/script/build.ts:43:29)
         at file:///tmp/tmp.aGowOqCn9e/vscode/vscode-deno/webview_deno/script/build.ts:131:30
    

    the No such file error is not helpful

    opened by milahu 0
Releases(0.7.4)
Owner
webview
Tiny cross-platform webview library. Uses WebKit (Gtk/Cocoa) and Edge (Windows)
webview
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Hacker Tools cross-platform desktop App, support windows/MacOS/LInux ....

Hacker Tools cross-platform desktop App, support windows/MacOS/LInux ....

51pwn 29 Jan 8, 2023
A cross-platform desktop application of tools for developers

A cross-platform desktop application of tools for developers ?? Online Web This website provides online version of the same tools echoo ?? Offline Cli

Kyle 133 Dec 24, 2022
A Bilibili Cross-Platform Desktop Client Powered By Tauri

BBHouse 取自常见的『我在B站买了房』的评论 BBHouse 是一款 哔哩哔哩 的第三方应用,基于 Tauri 跨平台构建,支持 Windows macOS Linux. 核心功能 一个支持对视频动态分区展示的首页, 去除了B博和推荐流 一个支持无限添加的 (临时的) 稍后播放列表与配套的播放

ziyu 151 Dec 26, 2022
A cross-platform desktop app with a nice interface to Stable Diffusion and others

GenerationQ GenerationQ (for "image generation queue") is a cross-platform desktop application (screens below) designed to provide a general purpose G

Weston C. Beecroft 25 Dec 28, 2022
A tiny cross-platform client for SQLite3, with precompiled binaries as the only third-party dependencies.

Tiny SQLite3 A tiny cross-platform client for SQLite3, with precompiled binaries as the only third-party dependencies. A nice feature about this modul

Fabio Spampinato 19 Oct 27, 2022
GetOsLocalesCrossPlatform - A cross platform alternative to get locales used on the platform. Works on Node, Electron, NW.js and Browsers

getOsLocalesCrossPlatform A cross platform alternative to get locales used on the platform. Works on Node, Electron, NW.js and Browsers This script is

null 1 Jan 2, 2022
This provides an extension integration with Docker Desktop to run k9s quickly and easily through the Docker Desktop interface.

k9s extension for Docker Desktop This provides an extension integration with Docker Desktop to allow k9s quickly and easily through the Docker Desktop

James Spurin 14 Dec 16, 2022
enables communication between command-line or desktop applications and browser-based Ethereum wallets such as Metamask.

@securerpc/walletbus @securerpc/walletbus Abstract Quickstart Installation Usage Ethers.js Web3.js Configuration options Logging Development Automated

Manifold Finance 8 Dec 27, 2022
macOS Internal Webview App SourceCode

macOS Internal Webview App SourceCode Read First Inspecting Web Views in macOS System Preferences Family Sharing wget https://setup.icloud.com/resourc

不郑 4 Mar 7, 2022
The universal DevTools for LIFF (WebView) browser

LIFF Inspector ?? The universal DevTools for LIFF (WebView) browser LIFF Inspector is the official DevTools for LIFF(LNE Frontend Framework) that is i

LINE 34 Dec 19, 2022
Sample apps showing how to build music and video apps for Xbox using a WebView.

description languages name page_type products urlFragment Sample showing how to build music and video apps using primarily web technologies for Xbox.

Microsoft 11 Dec 14, 2022
A Node.js binding to webview

webview-nodejs English | 中文(简体) A Node.js binding to webview, a tiny cross-platform webview library to build modern cross-platform desktop GUIs using

Winterreisender 12 Dec 13, 2022
A MagicMirror² module which embeds multiple other websites with iframe or webview

MMM-EmbedURL This is a MagicMirror² module which embeds other websites either by "iframe" (default), "webview" or a custom HTML-element to your mirror

Thomas Hirschberger 6 Dec 18, 2022
Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet...

Freewall Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layouts, images layouts, nes

Minh Nguyen 1.9k Dec 27, 2022
Cross platform UI controls for progressive web and hybrid apps (plain JS, jQuery, Angular and React)

Mobiscroll What is Mobiscroll? Mobiscroll is a UI library for progressive webapps and hybrid development. Created with a lot of attention to usability

Mobiscroll 1.5k Dec 31, 2022
A cross-platform systray library for Deno.

deno-systray A cross-platform systray library for Deno using the go systray library. Usage import SysTray from "https://deno.land/x/systray/mod.ts";

Robert Soriano 10 Jul 16, 2022