This repository provides a V binding for
- 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
xcode-select --install
Windows
E.g.,
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
Usage Example
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!
———
Additional Examples
Examples that can be found in the
directory of the repository.
- simple example with a similar complexity as the readme example above.
- shows the basic code architecture of an application.
- organizes 2. v-js-interop-app into a directory structure that can be used as orientation for more complex projects.
- uses a modern web framework for the UI.
External Examples
- minimal example that automates embedding of the UI into the executable.
- 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
file and on its
.
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 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`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
- Cross-platform utility library to open system dialogs - files, message boxes etc.
- Generate embedded file lists for directories.
License
Open source software under the MIT license.