GitHub - ttytm/webview: V binding for webview - a tiny cross-platform library to build modern cross-platform GUI applications.

This repository provides a V binding for webview - a tiny cross-platform library to build modern cross-platform GUI applications. It allows to combine V as a fast, compiled general purpose programming language with modern web technologies to design a graphical user interface.

Installation

Build Tools and WebKit

Linux - Example for debian based destributions

# Build tools, such as a C compiler
sudo apt install build-essential
# WebKit
sudo apt install libgtk-3-dev libwebkit2gtk-4.0-dev

macOS
Windows

E.g., https://www.msys2.org/ provides instructions to install MinGW

Installing V from source

Webview Module

Install the module

After the installation, build the webview C library to which the webview V module will bind.\

# Linux/macOS
v ~/.vmodules/ttytm/webview/build.vsh
# PowerShell
v $HOME/.vmodules/ttytm/webview/build.vsh

Usage Example

Tip

When running and building on Windows, it is recommended to use gcc for compilation. E.g.:

import ttytm.webview

const html = '<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body {
        background: linear-gradient(to right, #274060, #1B2845);
        color: GhostWhite;
        font-family: sans-serif;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Your App Content!</h1>
    <button onclick="callV()">Call V!</button>
  </body>
  <script>
    async function callV() {
      // Call a V function that takes an argument and returns a value.
      const res = await window.my_v_func(\'Hello from JS!\');
      console.log(res);
    }
  </script>
</html>'

fn my_v_func(e &webview.Event) string {
	println('Hello from V from V!')
	e.eval("console.log('Hello from V from JS!');")
	str_arg := e.get_arg[string](0) or { '' } // Get string arg at index `0`
	return str_arg + ' Hello back from V!'
}

w := webview.create(debug: true)
w.bind('my_v_func', my_v_func)
w.set_size(600, 400, .@none)
w.set_html(html)
w.run()

Output when pressing Call V!

Hello from V from V!
CONSOLE LOG Hello from V from JS!
CONSOLE LOG Hello from JS! Hello back from V!

Additional Examples

Examples that can be found in the examples/ directory of the repository.

v-js-interop-simple - simple example with a similar complexity as the readme example above.
v-js-interop-app - shows the basic code architecture of an application.
project-structure - organizes 2. v-js-interop-app into a directory structure that can be used as orientation for more complex projects.
astro-project - uses a modern web framework for the UI.

External Examples

LVbag - minimal example that automates embedding of the UI into the executable.
emoji-mart-desktop - application that combines above concepts. It uses SvelteKit for the UI and embeds it inside a single executable.

Documentation

An overview of exported functions is accessible in the repositories src/lib.v file and on its vdoc site.

Debugging

Note

The debug feature currently works on Linux and Windows.

Use the webview_debug flag to enable developer tools - this enables the Web Inspector (allowing for e.g., right click Inspect Element) and console.log prints to the terminal. E.g.:

Alternatively, control the debug mode explicitly for a window by using the optional debug argument.

webview.create() // enabled when the application was build with `-d webview_debug`
webview.create(debug: true) // explicitly enabled for the window
webview.create(debug: false) // explicitly disabled for the window, even when built with `-d webview_debug`

Disclaimer

Until a stable version 1.0 is available, new features will be introduced, existing ones may change, or breaking changes may occur in minor(0.<minor>.*) versions.

Complementary Projects

Dialog - Cross-platform utility library to open system dialogs - files, message boxes etc.
LVbag - Generate embedded file lists for directories.

License

Open source software under the MIT license.