webui-dev / zig-webui Goto Github PK

View Code? Open in Web Editor NEW

262.0 14.0 8.0 1.71 MB

Use any web browser as GUI, with Zig in the backend and HTML5 in the frontend.

Home Page: https://webui.me/

License: MIT License

Zig 70.59% HTML 17.95% Python 0.34% TypeScript 0.95% CSS 5.76% JavaScript 4.41%

gui webui zig zig-webui

zig-webui's Introduction

WebUI Zig

WebUI is not a web-server solution or a framework, but it allows you to use any web browser as a GUI, with your preferred language in the backend and HTML5 in the frontend. All in a lightweight portable lib.

Features

Parent library written in pure C
Lightweight ~200 Kb & Small memory footprint
Fast binary communication protocol between WebUI and the browser (Instead of JSON)
Multi-platform & Multi-Browser
Using private profile for safety

API Document

Online Document: https://webui-dev.github.io/zig-webui/

Examples

There are several examples for newbies, they are in the examples directory.

You can use zig build --help to view all buildable examples.

Like zig build run_minimal, this will build and run the minimal example.

Installation

Zig `0.11`

Add this to build.zig.zon

.@"zig-webui" = .{
        // It is recommended to replace the following branch with commit id
        .url = "https://github.com/webui-dev/zig-webui/archive/main.tar.gz",
        .hash = <hash value>,
    },

This tells zig to fetch zig-webui from a tarball provided by GitHub. Make sure to replace the COMMIT part with an actual commit SHA in long form, like 219faa2a5cd5a268a865a1100e92805df4b84610. Every time you want to update zig-webui you'll have to update this commit.

Config build.zig

Add this:

const zig_webui = b.dependency("zig-webui", .{
    .target = target,
    .optimize = optimize,
    .enable_tls = false, // whether enable tls support
    .is_static = true, // whether static link
});

// add module
exe.addModule("webui", zig_webui.module("webui"));

// link library
exe.linkLibrary(zig_webui.artifact("webui"));

Zig `0.12` \ `nightly`

To be honest, I don’t recommend using the nightly version because the API of the build system is not yet stable, which means that there may be problems with not being able to build after nightly is updated.

Add to build.zig.zon

# It is recommended to replace the following branch with commit id
zig fetch --save https://github.com/webui-dev/zig-webui/archive/main.tar.gz
# Of course, you can also use git+https to fetch this package!

Config build.zig

Add this:

// To standardize development, maybe you should use `lazyDependency()` instead of `dependency()`
// more info to see: https://ziglang.org/download/0.12.0/release-notes.html#toc-Lazy-Dependencies
const zig_webui = b.dependency("zig-webui", .{
    .target = target,
    .optimize = optimize,
    .enable_tls = false, // whether enable tls support
    .is_static = true, // whether static link
});

// add module
exe.root_module.addImport("webui", zig_webui.module("webui"));
// note: see this issue for the API changes above,
// https://github.com/ziglang/zig/pull/18160

// link library
exe.linkLibrary(zig_webui.artifact("webui"));

It is not recommended to dynamically link libraries under Windows, which may cause some symbol duplication problems. see this issue: ziglang/zig#15107

UI & The Web Technologies

Borislav Stanimirov discusses using HTML5 in the web browser as GUI at the C++ Conference 2019 (YouTube).

Web application UI design is not just about how a product looks but how it works. Using web technologies in your UI makes your product modern and professional, And a well-designed web application will help you make a solid first impression on potential customers. Great web application design also assists you in nurturing leads and increasing conversions. In addition, it makes navigating and using your web app easier for your users.

Why Use Web Browsers?

Today's web browsers have everything a modern UI needs. Web browsers are very sophisticated and optimized. Therefore, using it as a GUI will be an excellent choice. While old legacy GUI lib is complex and outdated, a WebView-based app is still an option. However, a WebView needs a huge SDK to build and many dependencies to run, and it can only provide some features like a real web browser. That is why WebUI uses real web browsers to give you full features of comprehensive web technologies while keeping your software lightweight and portable.

How Does it Work?

Think of WebUI like a WebView controller, but instead of embedding the WebView controller in your program, which makes the final program big in size, and non-portable as it needs the WebView runtimes. Instead, by using WebUI, you use a tiny static/dynamic library to run any installed web browser and use it as GUI, which makes your program small, fast, and portable. All it needs is a web browser.

Runtime Dependencies Comparison

	WebView	Qt	WebUI
Runtime Dependencies on Windows	WebView2	QtCore, QtGui, QtWidgets	*A Web Browser*
Runtime Dependencies on Linux	GTK3, WebKitGTK	QtCore, QtGui, QtWidgets	*A Web Browser*
Runtime Dependencies on macOS	Cocoa, WebKit	QtCore, QtGui, QtWidgets	*A Web Browser*

Supported Web Browsers

Browser	Windows	macOS	Linux
Mozilla Firefox	✔️	✔️	✔️
Google Chrome	✔️	✔️	✔️
Microsoft Edge	✔️	✔️	✔️
Chromium	✔️	✔️	✔️
Yandex	✔️	✔️	✔️
Brave	✔️	✔️	✔️
Vivaldi	✔️	✔️	✔️
Epic	✔️	✔️	not available
Apple Safari	not available	coming soon	not available
Opera	coming soon	coming soon	coming soon

License

Licensed under the MIT License.

zig-webui's People

Contributors

Stargazers

Watchers

Forkers

mubaidr becksclair iacore ewaldhorn brugarolas pyjcode oxyo ttytm

zig-webui's Issues

Build zig-webui on Windows 11, Linking errors

OS: Windows 11
Zig Version: 0.12.0-dev.1856+94c63f31f

zig build run_minimal
info(WebUI): link mode is static
zig build-exe minimal Debug native: error: the following command failed with 24 compilation errors:

[Enhance]: Experimental documentation

Try to add zig's auto generating documentation support

unable to find artifact 'webui'

init:

zig version
# 0.11.0

mkdir webuix
cd webuix
zig init-exe

build.zig:

const std = @import("std");

pub fn build(b: *std.Build) void {
    const target = b.standardTargetOptions(.{});

    const optimize = b.standardOptimizeOption(.{});

    const exe = b.addExecutable(.{
        .name = "webuix",
        .root_source_file = .{ .path = "src/main.zig" },
        .target = target,
        .optimize = optimize,
    });

    const zig_webui = b.dependency("zig-webui", .{
        .target = target,
        .optimize = optimize,
        .enable_tls = false,
        .is_static = true,
    });

    // add module
    exe.addModule("webui", zig_webui.module("webui"));

    // link library
    exe.linkLibrary(zig_webui.artifact("webui"));

    b.installArtifact(exe);

    const run_cmd = b.addRunArtifact(exe);

    run_cmd.step.dependOn(b.getInstallStep());

    if (b.args) |args| {
        run_cmd.addArgs(args);
    }

    const run_step = b.step("run", "Run the app");
    run_step.dependOn(&run_cmd.step);

    const unit_tests = b.addTest(.{
        .root_source_file = .{ .path = "src/main.zig" },
        .target = target,
        .optimize = optimize,
    });

    const run_unit_tests = b.addRunArtifact(unit_tests);

    // Similar to creating the run step earlier, this exposes a `test` step to
    // the `zig build --help` menu, providing a way for the user to request
    // running the unit tests.
    const test_step = b.step("test", "Run unit tests");
    test_step.dependOn(&run_unit_tests.step);
}

build.zig.zon

.{
    .name = "webuix",
    .version = "0.0.1",
    .minimum_zig_version = "0.11.0",
    .dependencies = .{
        .@"zig-webui" = .{
            .url = "https://github.com/webui-dev/zig-webui/archive/main.tar.gz",
            .hash = "122031d4effb8bc751acb64f311bae1913a1792bc23fb5de1b81278d60cf09048e29",
        },
    },
    .paths = .{
        "",
    },
}

error when run zig build run:

info(WebUI): link mode is static
thread 14892 panic: unable to find artifact 'webui'
D:\Scoop\apps\zig\current\lib\std\debug.zig:374:22: 0x7ff6b5085e84 in panicExtra__anon_47138 (build.exe.obj)
    std.builtin.panic(msg, trace, ret_addr);
                     ^
D:\Scoop\apps\zig\current\lib\std\debug.zig:349:15: 0x7ff6b505fd4c in panic__anon_29074 (build.exe.obj)
    panicExtra(null, null, format, args);
              ^
D:\Scoop\apps\zig\current\lib\std\Build.zig:1550:18: 0x7ff6b503c6f8 in artifact (build.exe.obj)
            panic("unable to find artifact '{s}'", .{name});
                 ^
E:\xk\Code\xkyss\xkyss.zpp\playz\v0.11\webuix\build.zig:26:39: 0x7ff6b4ffbcea in build (build.exe.obj)
    exe.linkLibrary(zig_webui.artifact("webui"));
                                      ^
D:\Scoop\apps\zig\current\lib\std\Build.zig:1638:33: 0x7ff6b4feb7f5 in runBuild__anon_7300 (build.exe.obj)
        .Void => build_zig.build(b),
                                ^
D:\Scoop\apps\zig\current\lib\build_runner.zig:297:29: 0x7ff6b4fe7795 in main (build.exe.obj)
        try builder.runBuild(root);
                            ^
D:\Scoop\apps\zig\current\lib\std\start.zig:339:65: 0x7ff6b4feba7c in WinStartup (build.exe.obj)
    std.os.windows.kernel32.ExitProcess(initEventLoopAndCallMain());
                                                                ^
???:?:?: 0x7ffcde457343 in ??? (KERNEL32.DLL)
???:?:?: 0x7ffcde7226b0 in ??? (ntdll.dll)
error: the following build command failed with exit code 3:
E:\xk\Code\xkyss\xkyss.zpp\playz\v0.11\webuix\zig-cache\o\098a2f4861e4a3c3c2a4b8de9b8ea9c3\build.exe D:\Scoop\apps\zig\current\zig.exe E:\xk\Code\xkyss\xkyss.zpp\playz\v0.11\webuix E:\xk\Code\xkyss\xkyss.zpp\playz\v0.11\webuix\zig-cache C:\Users\xkyii\AppData\Local\zig run

Did I miss any important information?

home page broken

https://webui.me/

> curl https://webui.me
curl: (60) SSL certificate problem: certificate has expired
More details here: https://curl.se/docs/sslcerts.html

curl failed to verify the legitimacy of the server and therefore could not
establish a secure connection to it. To learn more about this situation and
how to fix it, please visit the web page mentioned above.

What is the minimum compatible version?

/Users/xiusin/.cache/zig/p/122076f23d5abf8e9dd2069e6ed5fab237a4000a6409d0e6da902023f6c5d0ab3038/build.zig:65:51: error: no field named 'iterate' in struct 'fs.Dir.OpenDirOptions'
        std.fs.openDirAbsolute(examples_path, .{ .iterate = true }) catch |err| {
                                                  ^~~~~~~
/opt/zig/lib/std/fs.zig:1701:32: note: struct declared here
    pub const OpenDirOptions = struct {
                               ^~~~~~
referenced by:
    build: /Users/xiusin/.cache/zig/p/122076f23d5abf8e9dd2069e6ed5fab237a4000a6409d0e6da902023f6c5d0ab3038/build.zig:45:5
    runBuild__anon_16843: /opt/zig/lib/std/Build.zig:1882:27
    remaining reference traces hidden; use '-freference-trace' to see all reference traces

0.12.0-dev.1571+03adafd80

Unable to build, hash mismatch

/zig fetch --save https://github.com/webui-dev/zig-webui/archive/main.tar.gz produces a build.zig.zon with the hash

    .dependencies = .{
        .@"zig-webui" = .{
            .url = "https://github.com/webui-dev/zig-webui/archive/main.tar.gz",
            .hash = "12203e8f6c6eb2977088f54aa7b182abd0d357efc547612233b02b5a72bd7035096c",
        },
    },

but trying to build results in a hash mismatch:

Fetch Packages [2/2] zig-webui.webui... /Users/alecstein/.cache/zig/p/12203e8f6c6eb2977088f54aa7b182abd0d357efc547612233b02b5a72bd7035096c/build.zig.zon:8:21: error: hash mismatch: expected: 1220d4b5a9c49e9651c796f1f5a4277e7e4d8e4bdc0122eb98c366466849aa5ca0dd, found: 122076f23d5abf8e9dd2069e6ed5fab237a4000a6409d0e6da902023f6c5d0ab3038
            .hash = "1220d4b5a9c49e9651c796f1f5a4277e7e4d8e4bdc0122eb98c366466849aa5ca0dd",
                    ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

If I keep putting in the expected hash, I eventually end up with a 'module not found' error, so that's not a solution.

Unable to size window dimensions with `setSize`

For a minimal repro, try this:

zig-webui/src/examples/call_js_from_zig

pub fn main() !void {
    var nwin = webui.newWindow();

    _ = nwin.setSize(10, 10);     // try resize before show

    _ = nwin.show(html);

   _ = nwin.setSize(10, 10);     // resize after .show

    _ = nwin.bind("MyButton1", my_function_count);
    _ = nwin.bind("MyButton2", my_function_exit);

    webui.wait();


    webui.clean();
}

In neither case does nwin.setSize(...) actually change the window size.

I'm not sure if this is a bug with this library (which essentially wraps WebUI) or with WebUI itself, but I'm posting it here just in case.

@hassandraga

And I plan to continue to improve the buildz.zig of the webui library later.