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.
You can re-run the script at any point to rebuild the parent library with the latest upstream changes.# 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 .
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.
- 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 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent