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
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
Tip
When running and building on Windows, it is recommended to use gcc for compilation. E.g.:
v -cc gcc run .importttytm.webviewconsthtml='<!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>'fnmy_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.
- 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-appinto 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.
An overview of exported functions is accessible in the repositories src/lib.v
file and on its vdoc site.
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 clickInspect 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.