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.

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

  xcode-select --install

• Windows

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

V

• Installing V from source

Webview Module

• Install the module

  v install ttytm.webview

• 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

v -cc gcc run .

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!

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

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

External Examples

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

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

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.:

v -d webview_debug run .

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`

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.

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

Open source software under the MIT license.