WebUI

https://github.com/webui-dev/webui
Admin
WebUI is a lightweight, portable library that allows you to use any web browser or WebView as a GUI,...
Tokens:14,578
Snippets:83
Trust Score:7.3
License:MIT
Update:10 months ago
Show doc for...
Tokens:
Raw
### Call Deno Script with Parameters (JavaScript)

Source: https://github.com/webui-dev/webui/blob/main/examples/C/serve_a_folder/index.html

This JavaScript function demonstrates how to make an HTTP request to execute a Deno script with query parameters. Ensure Deno is installed and configured as the default runtime in the backend. It sends a GET request and displays the response.

```javascript
function call_deno_file() {
  // Note:
  // You need to set Deno as default runtime in the backend
  // Simple HTTP Request
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open('GET', 'deno_test.ts?foo=123&bar=456', false);
  xmlHttp.send(null);
  alert(xmlHttp.responseText);
}
```

--------------------------------

### Call Node.js Script with Parameters (JavaScript)

Source: https://github.com/webui-dev/webui/blob/main/examples/C/serve_a_folder/index.html

This JavaScript function illustrates how to invoke a Node.js script with query parameters using a simple HTTP GET request. The Node.js runtime must be installed and configured as the default in the backend. The script's output is presented in an alert box.

```javascript
function call_nodejs_file() {
  // Note:
  // You need to set Nodejs as default runtime in the backend
  // Simple HTTP Request
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open('GET', 'node_test.js?foo=123&bar=456', false);
  xmlHttp.send(null);
  alert(xmlHttp.responseText);
}
```

--------------------------------

### Call Bun Script with Parameters (JavaScript)

Source: https://github.com/webui-dev/webui/blob/main/examples/C/serve_a_folder/index.html

This JavaScript function shows how to call a Bun script with query parameters via an HTTP request. It requires Bun to be installed and set as the default backend runtime. The response from the script is displayed in an alert.

```javascript
function call_bun_file() {
  // Note:
  // You need to set Bun as default runtime in the backend
  // Simple HTTP Request
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open('GET', 'bun_test.ts?foo=123&bar=456', false);
  xmlHttp.send(null);
  alert(xmlHttp.responseText);
}
```

--------------------------------

### Serve Folder Example (C++)

Source: https://github.com/webui-dev/webui/blob/main/examples/C++/serve_a_folder/index.html

This C++ code snippet configures WebUI to serve files from a specific folder. It demonstrates basic HTML serving and mentions the capability to use Deno or Node.js for executing JavaScript/TypeScript files within the WebUI environment. No specific dependencies beyond a standard C++ compiler and the WebUI library are implied.

```c++
#include <webui.h>

int main() {
    webui_init();
    webui_show("index.html");
    webui_run();
    webui_free();
    return 0;
}

```

--------------------------------

### Serve Folder with Multiple Files using WebUI C++

Source: https://github.com/webui-dev/webui/blob/main/examples/C++/README.md

Example demonstrating how to use WebUI in C++ to serve a folder containing multiple files. This is useful for web applications that need to load assets like HTML, CSS, and JavaScript from the local filesystem.

```c++
/*
  This is a placeholder for the actual C++ code of the serve_a_folder example.
  The actual code would involve using WebUI's file serving capabilities.
*/
#include <webui.h>

int main() {
    webui_init();
    // Serve files from a specific folder (e.g., "./public")
    // Assuming './public' contains index.html, styles.css, etc.
    webui_serve_folder("public");
    webui_show("index.html"); // Show the main HTML file from the served folder
    webui_wait();
    webui_exit();
    return 0;
}
```

--------------------------------

### Build WebUI C++ Examples

Source: https://github.com/webui-dev/webui/blob/main/examples/C++/README.md

Build instructions for WebUI C++ examples on Windows, Linux, and macOS. Supports G++, MSVC, and Clang compilers.

```shell
# Windows
# G++
mingw32-make

# MSVC
nmake
```

```shell
# Linux
# G++
make

# Clang
make CXX=clang
```

```shell
# macOS
make
```

--------------------------------

### WebUI JavaScript API Example

Source: https://github.com/webui-dev/webui/blob/main/examples/C/serve_a_folder/index.html

This JavaScript code demonstrates how to use the WebUI API to interact with the backend. It includes setting event callbacks for connection status and calling backend functions using different methods (global, property, and webui.call). It requires the 'webui.js' file to be included.

```javascript
/*
document.addEventListener('DOMContentLoaded', function() {
  // DOM is loaded. Check if `webui` object is available
  if (typeof webui !== 'undefined') {
    // Set events callback
    webui.setEventCallback((e) => {
      if (e == webui.event.CONNECTED) {
        // Connection to the backend is established
        console.log('Connected.');
        webuiTest();
      } else if (e == webui.event.DISCONNECTED) {
        // Connection to the backend is lost
        console.log('Disconnected.');
      }
    });
  } else {
    // The virtual file `webui.js` is not included
    alert('Please add webui.js to your HTML.');
  }
});

function webuiTest() {
  // Call a backend function
  if (webui.isConnected()) {
    // When you bind a func in the backend
    // webui will create the `func` object
    // in three places:
    //
    // Global : func(...)
    // Property : webui.func(...)
    // Method : webui.call('func', ...)
    //
    // [!] Note: Objects creation fails when
    // a similar object already exist.
    const foo = 'Hello';
    const bar = 123456;

    // Calling as global object
    myBackendFunction(foo, bar).then((response) => {
      // Do something with `response`
    });

    // Calling as property of `webui.` object
    webui.myBackendFunction(foo, bar).then((response) => {
      // Do something with `response`
    });

    // Calling using the method `webui.call()`
    webui.call('myBackendFunction', foo, bar).then((response) => {
      // Do something with `response`
    });

    // Using await
    // const response = await myBackendFunction(foo, bar);
    // const response = await webui.myBackendFunction(foo, bar);
    // const response = await webui.call('myBackendFunction', foo, bar);
  }
}
*/
```

--------------------------------

### Minimal WebUI C++ Application

Source: https://github.com/webui-dev/webui/blob/main/examples/C++/README.md

Example of creating a minimal WebUI application using C++. This serves as a basic starting point for WebUI development.

```c++
/*
  This is a placeholder for the actual C++ code of the minimal example.
  The actual code would involve including WebUI headers and setting up a basic window.
*/
#include <webui.h>

int main() {
    webui_init();
    webui_show("<html><body>Hello, WebUI!</body></html>");
    webui_wait();
    webui_exit();
    return 0;
}
```

--------------------------------

### Example Project Builds (CMake)

Source: https://github.com/webui-dev/webui/blob/main/CMakeLists.txt

Conditionally builds example projects (minimal, call_js_from_cpp, call_js_from_c) if WEBUI_BUILD_EXAMPLES is enabled. It links the WebUI library to these examples and sets Windows-specific subsystem flags for MSVC builds.

```cmake
#//////////////////////////
# Build examples 
#//////////////////////////

if (WEBUI_BUILD_EXAMPLES)
    message(STATUS "WebUI Source directory is " ${CMAKE_CURRENT_SOURCE_DIR})
    message(STATUS "WebUI Build directory is " ${CMAKE_BINARY_DIR})

    include_directories(${CMAKE_CURRENT_SOURCE_DIR}/include)

    add_executable(minimal ${CMAKE_CURRENT_SOURCE_DIR}/examples/C++/minimal/main.cpp)
    add_executable(call_js_from_cpp ${CMAKE_CURRENT_SOURCE_DIR}/examples/C++/call_js_from_cpp/main.cpp)
    add_executable(call_js_from_c ${CMAKE_CURRENT_SOURCE_DIR}/examples/C/call_js_from_c/main.c)

    target_link_libraries(minimal webui)
    target_link_libraries(call_js_from_cpp webui)
    target_link_libraries(call_js_from_c webui)

    if (MSVC)
        set_target_properties(minimal PROPERTIES LINK_FLAGS "/SubSystem:\"Windows\"" VS_DPI_AWARE "ON")
        set_target_properties(call_js_from_cpp PROPERTIES LINK_FLAGS "/SubSystem:\"Windows\"" VS_DPI_AWARE "ON")
        set_target_properties(call_js_from_c PROPERTIES LINK_FLAGS "/SubSystem:\"Windows\"" VS_DPI_AWARE "ON")
    endif()

    if (MSVC)
        set_property(DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR} PROPERTY VS_STARTUP_PROJECT call_js_from_cpp)
    endif()
endif()
```

--------------------------------

### Installation Rules (CMake)

Source: https://github.com/webui-dev/webui/blob/main/CMakeLists.txt

Defines installation rules for the WebUI library. It installs header files to 'include' and the library itself to 'lib' (for archives, libraries, and runtimes). It also installs a CMake configuration file for easier integration into other projects.

```cmake
# Install headers
install(FILES include/webui.h include/webui.hpp DESTINATION include)

# Install targets
install(TARGETS webui
    EXPORT webui
    ARCHIVE DESTINATION lib
    LIBRARY DESTINATION lib
    RUNTIME DESTINATION bin)

install(EXPORT webui
    FILE webui-config.cmake
    NAMESPACE webui::
    DESTINATION share/webui
)
```

--------------------------------

### Project Setup and Standards (CMake)

Source: https://github.com/webui-dev/webui/blob/main/CMakeLists.txt

Initializes the CMake project, sets the project name, version, and description. It also defines the C and C++ standards to be used (C99 and C++17 respectively).

```cmake
cmake_minimum_required(VERSION 3.18)

# Project name
project(WebUILibrary 
    VERSION 2.5.0
    DESCRIPTION "Use any web browser or WebView as GUI, with your preferred language in the backend and modern web technologies in the frontend, all in a lightweight portable library."
    HOMEPAGE_URL "https://webui.me/")

# Set C & C++ standard
set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
set(CMAKE_C_STANDARD 99)
set(CMAKE_C_STANDARD_REQUIRED ON)
```

--------------------------------

### Build WebUI Library on Linux with SSL/TLS (GCC/Clang)

Source: https://github.com/webui-dev/webui/blob/main/README.md

Commands to build the WebUI library on Linux with SSL/TLS support using GCC and Clang. Requires the `libssl-dev` package to be installed. This command enables TLS support during the build process.

```shell
sudo apt update
sudo apt install libssl-dev

# GCC
make WEBUI_USE_TLS=1

# Clang
make WEBUI_USE_TLS=1 CC=clang
```

--------------------------------

### Call C++ from JavaScript in WebUI

Source: https://github.com/webui-dev/webui/blob/main/examples/C++/README.md

Example demonstrating how to call C++ functions from JavaScript within a WebUI application. This allows for bridging native code execution with web interface interactions.

```c++
/*
  This is a placeholder for the actual C++ code of the call_c_from_js example.
  The actual code would involve defining C++ functions and binding them to be callable from JavaScript.
*/
#include <webui.h>
#include <iostream>

// Example C++ function to be called from JavaScript
void greet(const char* name) {
    std::cout << "Hello, " << name << " from C++!\n";
}

int main() {
    webui_init();
    // Bind the C++ function to a JavaScript function name
    webui_bind("greet_from_js", greet);
    webui_show("<html><body><button onclick=\"call_c_from_js('World')\">Greet</button></body></html>");
    webui_wait();
    webui_exit();
    return 0;
}
```

--------------------------------

### Call JavaScript from C++ in WebUI

Source: https://github.com/webui-dev/webui/blob/main/examples/C++/README.md

Example showcasing how to invoke JavaScript functions from C++ code within a WebUI application. This enables control over the web interface's behavior from the native side.

```c++
/*
  This is a placeholder for the actual C++ code of the call_js_from_c example.
  The actual code would involve executing JavaScript code or calling JavaScript functions from C++.
*/
#include <webui.h>

int main() {
    webui_init();
    webui_show("<html><body><script>function showMessage(msg) { alert(msg); }</script></body></html>");
    // Call a JavaScript function from C++
    webui_run_script("showMessage('Hello from C++!')");
    webui_wait();
    webui_exit();
    return 0;
}
```

--------------------------------

### Build WebUI Library on macOS with SSL/TLS

Source: https://github.com/webui-dev/webui/blob/main/README.md

Commands to build the WebUI library on macOS with SSL/TLS support. Requires OpenSSL to be installed via Homebrew. This command enables TLS support during the build process.

```shell
brew install openssl
make WEBUI_USE_TLS=1
```

--------------------------------

### Execute JavaScript from C and Get Response (C)

Source: https://context7.com/webui-dev/webui/llms.txt

This snippet shows how to execute JavaScript code from a C application using the `webui_script` function. It demonstrates retrieving the return value of a JavaScript function, handling potential errors or window closures, and then executing another JavaScript function without waiting for a response using `webui_run`. Dependencies include the `webui.h` header and standard C libraries.

```c
#include "webui.h"
#include <stdio.h>
#include <stdlib.h>

void my_function_count(webui_event_t* e) {
    char response[64];

    // Execute JavaScript and get return value
    if (!webui_script(e->window, "return GetCount();", 0, response, 64)) {
        if (!webui_is_shown(e->window))
            printf("Window closed.\n");
        else
            printf("JavaScript Error: %s\n", response);
        return;
    }

    // Process the response
    int count = atoi(response);
    count++;

    // Execute JavaScript without waiting for response (fire and forget)
    char js[64];
    sprintf(js, "SetCount(%d);", count);
    webui_run(e->window, js);
}

int main() {
    const char* html = 
        "<!DOCTYPE html>\n"
        "<html>\n"
        "  <head><script src=\"webui.js\"></script></head>\n"
        "  <body>\n"
        "    <h1 id=\"count\">0</h1>\n"
        "    <button onclick=\"my_function_count();\">Increment Count</button>\n"
        "    <script>\n"
        "      let count = 0;\n"
        "      function GetCount() { return count; }\n"
        "      function SetCount(n) { document.getElementById('count').innerHTML = n; count = n; }\n"
        "    </script>\n"
        "  </body>\n"
        "</html>";

    size_t window = webui_new_window();
    webui_bind(window, "my_function_count", my_function_count);
    webui_show(window, html);
    webui_wait();
    webui_clean();

    return 0;
}

```

--------------------------------

### WebUI Virtual File System C++ Example

Source: https://github.com/webui-dev/webui/blob/main/examples/C++/virtual_file_system/ui/index.html

This C++ code demonstrates the integration of the WebUI virtual file system. The file itself is embedded directly into the C++ application, allowing it to be served as part of the application's assets. No external dependencies are required for this core functionality.

```cpp
// This file is embedded in this C++ application.

```

--------------------------------

### Value Manipulation API

Source: https://github.com/webui-dev/webui/wiki/Home

APIs for getting and setting values within the WebUI interface.

```APIDOC
## Value Manipulation API

### Description
Functions to interact with values in the WebUI, allowing retrieval and modification.

### Methods
#### `get_value(key)`
Retrieves the value associated with a given key.

- **Parameters:**
  - `key` (string) - The key of the value to retrieve.
- **Returns:** (string) - The value associated with the key.
- **Usage:** `std::string foo = my_window.get_value("bar");`

#### `set_value(key, value)`
Sets or updates the value associated with a given key.

- **Parameters:**
  - `key` (string) - The key of the value to set.
  - `value` (string) - The new value to associate with the key.
- **Returns:** (string) - The previous value associated with the key.
- **Usage:** `std::string foo = my_window.set_value("bar", "new value");`
```

--------------------------------

### Get Value from WebUI

Source: https://github.com/webui-dev/webui/wiki/Home

Illustrates how to retrieve a value associated with a specific key using the WebUI library. This function is useful for fetching data from the web interface into the application. It takes a key as input and returns the corresponding string value.

```c++
std::string foo = my_window.get_value("bar");
```

--------------------------------

### Configure Window Properties with WebUI (C)

Source: https://context7.com/webui-dev/webui/llms.txt

This C code snippet demonstrates how to configure various properties of a WebUI window, such as size, position, and display mode. It also shows how to specify which browser to use and how to close the window programmatically. Dependencies include the 'webui.h' header file.

```c
#include "webui.h"

int main() {
    size_t window = webui_new_window();

    // Set window size
    webui_set_size(window, 800, 600);

    // Set minimum window size
    webui_set_minimum_size(window, 400, 300);

    // Set window position
    webui_set_position(window, 100, 100);

    // Center window on screen
    webui_set_center(window);

    // Set window to kiosk mode (fullscreen)
    webui_set_kiosk(window, true);

    // Hide window initially
    webui_set_hide(window, true);

    // Show window with specific browser
    webui_show_browser(window, "index.html", Chrome);
    // Options: Chrome, Firefox, Edge, Safari, Chromium, Opera, Brave, Vivaldi, Epic, Yandex, Webview

    // Or show as WebView (native window)
    webui_show_wv(window, "index.html");

    // Set WebView-specific options
    webui_set_frameless(window, true);      // Frameless window
    webui_set_transparent(window, true);    // Transparent background
    webui_set_resizable(window, true);      // Allow window resizing

    // Configure browser profile and proxy
    webui_set_profile(window, "MyProfile", "/path/to/profile");
    webui_set_proxy(window, "http://127.0.0.1:8888");

    // Set custom browser parameters
    webui_set_custom_parameters(window, "--disable-gpu");

    // Navigate to different URL after window is open
    webui_navigate(window, "http://example.com");

    // Close window programmatically
    webui_close(window);

    // Get window information
    const char* url = webui_get_url(window);
    size_t port = webui_get_port(window);
    size_t parent_pid = webui_get_parent_process_id(window);
    size_t child_pid = webui_get_child_process_id(window);

    webui_wait();
    webui_clean();

    return 0;
}

```

--------------------------------

### Build WebUI Application on Windows with SSL/TLS (GCC/MSVC)

Source: https://github.com/webui-dev/webui/blob/main/README.md

Commands to build a WebUI application on Windows with SSL/TLS support, using GCC and MSVC. Options include static or dynamic linking. Replace placeholders with actual paths to your WebUI include and library directories.

```shell
# GCC Static
gcc -Os -Wl,-subsystem=windows my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-secure-static -lws2_32 -Wall -luser32 -static -lole32 -lstdc++ -luuid -o my_application.exe
```

```shell
# GCC Dynamic
gcc -Wl,-subsystem=windows my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" "webui-2-secure.dll" -lws2_32 -Wall -luser32 -lole32 -lstdc++ -luuid -o my_application.exe
```

```shell
# MSVC Static
cl my_application.c /I"_PATH_TO_WEBUI_INCLUDE_" /link /LIBPATH:"_PATH_TO_WEBUI_LIB_" /SUBSYSTEM:WINDOWS webui-2-secure-static.lib user32.lib Advapi32.lib Shell32.lib Ole32.lib /OUT:my_application.exe
```

```shell
# MSVC Dynamic
cl my_application.c /I"_PATH_TO_WEBUI_INCLUDE_" /link /LIBPATH:"_PATH_TO_WEBUI_LIB_" /SUBSYSTEM:WINDOWS webui-2-secure.lib user32.lib Advapi32.lib Shell32.lib Ole32.lib /OUT:my_application.exe
```

--------------------------------

### Configure WebUI Global Settings and Multi-Client Mode (C)

Source: https://context7.com/webui-dev/webui/llms.txt

This C code snippet demonstrates how to configure global settings for WebUI, such as disabling blocking events, enabling folder monitoring, and activating multi-client mode. It also shows how to set up custom logging and SSL/TLS certificates. Dependencies include the 'webui.h' header.

```c
#include "webui.h"

int main() {
    // Configure global behavior (call before webui_show)
    webui_set_config(show_wait_connection, false);     // Don't wait for connection
    webui_set_config(ui_event_blocking, false);        // Non-blocking events
    webui_set_config(folder_monitor, true);            // Auto-reload on file changes
    webui_set_config(multi_client, true);              // Allow multiple clients
    webui_set_config(use_cookies, true);               // Enable auth cookies

    // Set timeout for window connection
    webui_set_timeout(30);  // 30 seconds

    // Set custom logger
    void my_logger(size_t level, const char* log, void* user_data) {
        printf("[%zu] %s\n", level, log);
    }
    webui_set_logger(my_logger, NULL);

    // SSL/TLS configuration (requires webui-2-secure library)
    const char* cert_pem = "-----BEGIN CERTIFICATE-----\n...";
    const char* key_pem = "-----BEGIN PRIVATE KEY-----\n...";
    webui_set_tls_certificate(cert_pem, key_pem);

    size_t window = webui_new_window();

    // Enable public network access
    webui_set_public(window, true);

    // Set custom port
    if (!webui_set_port(window, 8080)) {
        printf("Port 8080 is not available.\n");
        size_t free_port = webui_get_free_port();
        webui_set_port(window, free_port);
    }

    // Start server without showing window
    const char* url = webui_start_server(window, "/path/to/root");
    printf("Server started at: %s\n", url);

    // Check if window is shown
    if (webui_is_shown(window)) {
        printf("Window is open.\n");
    }

    // Set JavaScript/TypeScript runtime
    webui_set_runtime(window, Deno);  // Options: None, Deno, NodeJS, Bun

    // Per-window event blocking
    webui_set_event_blocking(window, true);

    webui_wait();

    // Cleanup and profile management
    webui_delete_profile(window);       // Delete window profile
    webui_delete_all_profiles();        // Delete all profiles
    webui_clean();                      // Free all memory

    return 0;
}

```

--------------------------------

### Minimal WebUI Application in C

Source: https://github.com/webui-dev/webui/blob/main/README.md

A basic C program demonstrating how to create a new WebUI window, display HTML content, and wait for user interaction. It includes the necessary WebUI header and functions.

```c
#include "webui.h"

int main() {
  size_t my_window = webui_new_window();
  webui_show(my_window, "<html><head><script src=\"webui.js\"></script></head> Hello World ! </html>");
  webui_wait();
  return 0;
}
```

--------------------------------

### Show Window in WebUI

Source: https://github.com/webui-dev/webui/wiki/Home

Demonstrates how to display a new window using the WebUI library. It shows the default behavior and how to specify different browsers like Firefox, Chrome, and Edge. No external dependencies are required beyond the WebUI library itself.

```c++
my_window.show();                           // Default
my_window.show(webui::browser::firefox));   // Firefox
my_window.show(webui::browser::chrome));    // Chrome
my_window.show(webui::browser::edge));      // Edge
```

--------------------------------

### Build WebUI Application on Windows (GCC/MSVC)

Source: https://github.com/webui-dev/webui/blob/main/README.md

Commands to build a WebUI application on Windows using GCC and MSVC, with options for static or dynamic linking. Ensure the `_PATH_TO_WEBUI_INCLUDE_` and `_PATH_TO_WEBUI_LIB_` placeholders are replaced with actual paths.

```shell
# GCC Static
gcc -Os -Wl,-subsystem=windows my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-static -lws2_32 -Wall -luser32 -static -lole32 -lstdc++ -luuid -o my_application.exe
```

```shell
# GCC Dynamic
gcc -Wl,-subsystem=windows my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" "webui-2.dll" -lws2_32 -Wall -luser32 -lole32 -o -lstdc++ -luuid my_application.exe
```

```shell
# MSVC Static
cl my_application.c /I"_PATH_TO_WEBUI_INCLUDE_" /link /LIBPATH:"_PATH_TO_WEBUI_LIB_" /SUBSYSTEM:WINDOWS webui-2-static.lib user32.lib Advapi32.lib Shell32.lib Ole32.lib /OUT:my_application.exe
```

```shell
# MSVC Dynamic
cl my_application.c /I"_PATH_TO_WEBUI_INCLUDE_" /link /LIBPATH:"_PATH_TO_WEBUI_LIB_" /SUBSYSTEM:WINDOWS webui-2.lib user32.lib Advapi32.lib Shell32.lib Ole32.lib /OUT:my_application.exe
```

--------------------------------

### WebUI Window Creation and Display

Source: https://context7.com/webui-dev/webui/llms.txt

Demonstrates how to create a new WebUI window and display HTML content, either embedded, from a local file, or a URL.

```APIDOC
## webui_new_window and webui_show API

### Description
Creates a new window and displays HTML content. The content can be provided as an HTML string, a local file path, or a URL.

### Method
`webui_new_window()` returns a `size_t` representing the window ID.
`webui_show(window_id, content)` displays the content in the specified window.

### Endpoint
N/A (This is a C library API, not a REST endpoint)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```c
#include "webui.h"

int main() {
    // Create a new window
    size_t my_window = webui_new_window();

    // Show window with embedded HTML
    webui_show(my_window, "<html><head><script src=\"webui.js\"></script></head> Hello World ! </html>");

    // Or show window with a local HTML file
    // webui_show(my_window, "index.html");

    // Or show window with a URL
    // webui_show(my_window, "http://example.com");

    // Wait until all windows are closed
    webui_wait();

    return 0;
}
```

### Response
#### Success Response
`webui_wait()` blocks until all created windows are closed.

#### Response Example
(N/A - This is a blocking call, not a request/response)

```

--------------------------------

### Build WebUI Library on Windows with SSL/TLS (GCC/MSVC)

Source: https://github.com/webui-dev/webui/blob/main/README.md

Commands to build the WebUI library on Windows with SSL/TLS support using GCC (MinGW) and MSVC. Requires OpenSSL pre-compiled binaries or a similar TLS library. Ensure correct paths for include and library directories.

```shell
# GCC
mingw32-make WEBUI_USE_TLS=1 WEBUI_TLS_INCLUDE="C:\curl-xxx-xxx-mingw\curl-xxx-xxx-mingw\include" WEBUI_TLS_LIB="C:\curl-xxx-xxx-mingw\curl-xxx-xxx-mingw\lib"
```

```shell
# MSVC
nmake WEBUI_USE_TLS=1 WEBUI_TLS_INCLUDE="C:\Program Files\OpenSSL-xxx\include" WEBUI_TLS_LIB="C:\Program Files\OpenSSL-xxx\lib"
```

--------------------------------

### Serve Files and Custom Handlers (C)

Source: https://context7.com/webui-dev/webui/llms.txt

This C code demonstrates how to serve static files and custom dynamic content using `webui_set_file_handler`. The `my_files_handler` function is called for each file request. It can return embedded content for specific filenames or dynamically generate content. If it returns NULL, WebUI attempts to serve files from the specified `root_folder`. Memory allocated with `webui_malloc` is automatically freed by WebUI.

```c
#include "webui.h"
#include <stdio.h>\n#include <string.h>

const void* my_files_handler(const char* filename, int* length) {
    printf("Requested file: %s\n", filename);

    // Serve static embedded content
    if (!strcmp(filename, "/test.txt")) {
        return  "HTTP/1.1 200 OK\r\n"
                "Content-Type: text/html\r\n"
                "Content-Length: 99\r\n\r\n"
                "<html>"
                "   Static embedded file content."
                "   <script src=\"webui.js\"></script>"
                "</html>";
    }

    // Serve dynamic content
    if (!strcmp(filename, "/dynamic.html")) {
        char* body = webui_malloc(1024);
        char* response = webui_malloc(1024);

        static int count = 0;
        sprintf(body,
            "<html>"
            "   Dynamic content. Count: %d <a href=\"dynamic.html\">[Refresh]</a>"
            "   <script src=\"webui.js\"></script>"
            "</html>",
            ++count);

        int body_size = strlen(body);
        sprintf(response,
            "HTTP/1.1 200 OK\r\n"
            "Content-Type: text/html\r\n"
            "Content-Length: %d\r\n\r\n"
            "%s",
            body_size, body);

        webui_free(body);
        *length = strlen(response);

        // WebUI automatically frees memory allocated with webui_malloc
        return response;
    }

    // Return NULL to let WebUI serve files from the local filesystem
    return NULL;
}

int main() {
    size_t window = webui_new_window();

    // Set custom file handler
    webui_set_file_handler(window, my_files_handler);

    // Set root folder for serving local files
    webui_set_root_folder(window, "/path/to/web/files");

    // Show window serving index.html from root folder
    webui_show(window, "index.html");

    webui_wait();
    webui_clean();

    return 0;
}

```

--------------------------------

### Handle Events and Binary Data with WebUI (C)

Source: https://context7.com/webui-dev/webui/llms.txt

This C code snippet illustrates how to handle various events (connection, navigation, mouse clicks) and transfer raw binary data between C and JavaScript using the WebUI library. It defines event handlers and demonstrates sending/receiving byte arrays. Dependencies include 'webui.h' and 'stdio.h'.

```c
#include "webui.h"
#include <stdio.h>

void events(webui_event_t* e) {
    if (e->event_type == WEBUI_EVENT_CONNECTED) {
        printf("Client connected. Client ID: %zu\n", e->client_id);
    }
    else if (e->event_type == WEBUI_EVENT_DISCONNECTED) {
        printf("Client disconnected.\n");
    }
    else if (e->event_type == WEBUI_EVENT_MOUSE_CLICK) {
        printf("Mouse click event.\n");
    }
    else if (e->event_type == WEBUI_EVENT_NAVIGATION) {
        const char* url = webui_get_string(e);
        printf("Navigation to: %s\n", url);
        webui_navigate(e->window, url);
    }
}

void handle_binary_data(webui_event_t* e) {
    // Receive raw binary data from JavaScript
    const unsigned char* data = (const unsigned char*)webui_get_string(e);
    size_t data_size = webui_get_size(e);

    printf("Received %zu bytes: ", data_size);
    for (size_t i = 0; i < data_size && i < 10; i++) {
        printf("0x%02x ", data[i]);
    }
    printf("\n");

    // Send raw binary data to JavaScript
    unsigned char response[] = {0xDE, 0xAD, 0xBE, 0xEF};
    webui_send_raw(e->window, "handleBinaryResponse", response, sizeof(response));
}

int main() {
    const char* html = 
        "<!DOCTYPE html>"
        "<html>"
        "  <head><script src=\"webui.js\"></script></head>"
        "  <body>"
        "    <button onclick=\"sendBinary();\">Send Binary Data</button>"
        "    <script>"
        "      function sendBinary() {"
        "        const data = new Uint8Array([0x41, 0x42, 0x43]);"
        "        handle_binary_data(data);"
        "      }"
        "      function handleBinaryResponse(data) {"
        "        console.log('Received binary:', new Uint8Array(data));"
        "      }"
        "    </script>"
        "  </body>"
        "</html>";

    size_t window = webui_new_window();

    // Bind empty string to capture all events
    webui_bind(window, "", events);
    webui_bind(window, "handle_binary_data", handle_binary_data);

    webui_show(window, html);
    webui_wait();
    webui_clean();

    return 0;
}

```

--------------------------------

### Minimal WebUI Application in C++

Source: https://github.com/webui-dev/webui/blob/main/README.md

A minimal C++ application that initializes a WebUI window, displays simple HTML content, and enters a wait state. It uses the C++ header and object-oriented approach for window management.

```cpp
#include "webui.hpp"
#include <iostream>

int main() {
  webui::window my_window;
  my_window.show("<html><head><script src=\"webui.js\"></script></head> C++ Hello World ! </html>");
  webui::wait();
  return 0;
}
```

--------------------------------

### Compile WebUI Application on Linux with GCC

Source: https://github.com/webui-dev/webui/blob/main/README.md

Commands to compile a C application using the WebUI library on Linux with GCC. Supports both static and dynamic linking, with an option for SSL/TLS support. Ensure include and library paths are correctly set.

```bash
gcc -Os my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-static -lpthread -lm -ldl -o my_application
```

```bash
gcc my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2 -lpthread -lm -ldl -o my_application
```

```bash
gcc -Os my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-secure-static -lpthread -lm -ldl -o my_application
```

```bash
gcc my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-secure -lpthread -lm -ldl -o my_application
```

--------------------------------

### Compile WebUI Application on Linux with Clang

Source: https://github.com/webui-dev/webui/blob/main/README.md

Commands to compile a C application using the WebUI library on Linux with Clang. Supports both static and dynamic linking, with an option for SSL/TLS support. Ensure include and library paths are correctly set.

```bash
clang -Os my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-static -lpthread -lm -ldl -o my_application
```

```bash
clang my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2 -lpthread -lm -ldl -o my_application
```

```bash
clang -Os my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-secure-static -lpthread -lm -ldl -o my_application
```

```bash
clang my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-secure -lpthread -lm -ldl -o my_application
```

--------------------------------

### JavaScript Interaction with WebUI Backend

Source: https://github.com/webui-dev/webui/blob/main/examples/C++/virtual_file_system/ui/index.html

This JavaScript code snippet shows how to interact with the WebUI backend. It sets up an event listener for connection events and demonstrates calling backend functions using different methods: as a global object, as a webui property, and using the webui.call() method. It requires the webui.js file to be included in the HTML.

```javascript
document.addEventListener('DOMContentLoaded', function() {
    // DOM is loaded. Check if `webui` object is available
    if (typeof webui !== 'undefined') {
        // Set events callback
        webui.setEventCallback((e) => {
            if (e == webui.event.CONNECTED) {
                // Connection to the backend is established
                console.log('Connected.');
                webuiTest();
            } else if (e == webui.event.DISCONNECTED) {
                // Connection to the backend is lost
                console.log('Disconnected.');
            }
        });
    } else {
        // The virtual file `webui.js` is not included
        alert('Please add webui.js to your HTML.');
    }
});

function webuiTest() {
    // Call a backend function
    if (webui.isConnected()) {
        // When you bind a func in the backend
        // webui will create the `func` object
        // in three places:
        //
        // Global : func(...)
        // Property : webui.func(...)
        // Method : webui.call('func', ...)
        //
        // [!] Note: Objects creation fails when
        // a similar object already exist.
        const foo = 'Hello';
        const bar = 123456;

        // Calling as global object
        myBackendFunction(foo, bar).then((response) => {
            // Do something with `response`
        });

        // Calling as property of `webui.` object
        webui.myBackendFunction(foo, bar).then((response) => {
            // Do something with `response`
        });

        // Calling using the method `webui.call()`
        webui.call('myBackendFunction', foo, bar).then((response) => {
            // Do something with `response`
        });

        // Using await
        // const response = await myBackendFunction(foo, bar);
        // const response = await webui.myBackendFunction(foo, bar);
        // const response = await webui.call('myBackendFunction', foo, bar);
    }
}
```

--------------------------------

### JavaScript: WebUI Event Callback and Backend Function Calls

Source: https://github.com/webui-dev/webui/blob/main/examples/C/virtual_file_system/ui/index.html

This JavaScript code demonstrates how to set up an event callback for WebUI connection events (CONNECTED, DISCONNECTED) and how to call backend functions. It shows three ways to invoke a backend function: as a global object, as a property of the `webui` object, and using the `webui.call()` method. Ensure `webui.js` is included in your HTML.

```javascript
document.addEventListener('DOMContentLoaded', function() {
  // DOM is loaded. Check if `webui` object is available
  if (typeof webui !== 'undefined') {
    // Set events callback
    webui.setEventCallback((e) => {
      if (e == webui.event.CONNECTED) {
        // Connection to the backend is established
        console.log('Connected.');
        webuiTest();
      } else if (e == webui.event.DISCONNECTED) {
        // Connection to the backend is lost
        console.log('Disconnected.');
      }
    });
  } else {
    // The virtual file `webui.js` is not included
    alert('Please add webui.js to your HTML.');
  }
});

function webuiTest() {
  // Call a backend function
  if (webui.isConnected()) {
    // When you bind a func in the backend
    // webui will create the `func` object
    // in three places:
    //
    // Global : func(...)
    // Property : webui.func(...)
    // Method : webui.call('func', ...)
    //
    // [!] Note: Objects creation fails when
    // a similar object already exist.
    const foo = 'Hello';
    const bar = 123456;

    // Calling as global object
    myBackendFunction(foo, bar).then((response) => {
      // Do something with `response`
    });

    // Calling as property of `webui.` object
    webui.myBackendFunction(foo, bar).then((response) => {
      // Do something with `response`
    });

    // Calling using the method `webui.call()`
    webui.call('myBackendFunction', foo, bar).then((response) => {
      // Do something with `response`
    });

    // Using await
    // const response = await myBackendFunction(foo, bar);
    // const response = await webui.myBackendFunction(foo, bar);
    // const response = await webui.call('myBackendFunction', foo, bar);
  }
}
```

--------------------------------

### Compile WebUI Application on macOS with Clang

Source: https://github.com/webui-dev/webui/blob/main/README.md

Commands to compile a C application using the WebUI library on macOS with Clang. Supports both static and dynamic linking, with an option for SSL/TLS support. Requires linking against Cocoa and WebKit frameworks.

```bash
clang -Os my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-static -lpthread -lm -framework Cocoa -framework WebKit -o my_application
```

```bash
clang my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2 -lpthread -lm -framework Cocoa -framework WebKit -o my_application
```

```bash
clang -Os my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-secure-static -lpthread -lm -framework Cocoa -framework WebKit -o my_application
```

```bash
clang my_application.c -I"_PATH_TO_WEBUI_INCLUDE_" -L"_PATH_TO_WEBUI_LIB_" -lwebui-2-secure -lpthread -lm -framework Cocoa -framework WebKit -o my_application
```

--------------------------------

### Library Definition and Source Files (CMake)

Source: https://github.com/webui-dev/webui/blob/main/CMakeLists.txt

Defines the WebUI library target, lists its source files, and sets up include directories and compile definitions. It conditionally adds source files for Windows (win32_wv2.cpp) and macOS (wkwebview.m).

```cmake
# Source files (already filled)
set(SOURCE_FILES
    src/civetweb/civetweb.c
    src/webui.c
)

if (WIN32)
    list(APPEND SOURCE_FILES src/webview/win32_wv2.cpp)
endif()

if (APPLE)
    # enable macos webview
    enable_language(OBJC)
    set(CMAKE_OBJC_STANDARD 11)
    list(APPEND SOURCE_FILES src/webview/wkwebview.m)
endif()

# Library targets
add_library(webui ${SOURCE_FILES})
target_include_directories(webui PUBLIC $<BUILD_INTERFACE:${CMAKE_CURRENT_SOURCE_DIR}/include> $<INSTALL_INTERFACE:include>)
target_compile_definitions(webui PUBLIC NO_CACHING NO_CGI USE_WEBSOCKET 
    "$<\$<CONFIG:Debug>:WEBUI_LOG>" "$<\$<NOT:$<CONFIG:Debug>>:NDEBUG>")
```

--------------------------------

### Set Value in WebUI

Source: https://github.com/webui-dev/webui/wiki/Home

Explains how to set a value for a given key within the WebUI interface. This allows the application to send data to the web browser. The function takes a key and a new value as string inputs.

```c++
std::string foo = my_window.set_value("bar", "new value");
```

--------------------------------

### WebUI Styling for Virtual File System

Source: https://github.com/webui-dev/webui/blob/main/examples/C/virtual_file_system/ui/sub/index.html

This CSS code defines the visual presentation for the WebUI Virtual File System. It styles the body's background, font, and text alignment, as well as buttons and input fields for improved user interaction. It also includes styles for links.

```css
body {
  font-family: 'Arial', sans-serif;
  color: white;
  background: linear-gradient(to right, #507d91, #1c596f, #022737);
  text-align: center;
  font-size: 18px;
}

button, input {
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #ccc;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
  transition: 0.2s;
}

button {
  background: #3498db;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
}

h1 {
  text-shadow: -7px 10px 7px rgb(67 57 57 / 76%);
}

button:hover {
  background: #c9913d;
}

input:focus {
  outline: none;
  border-color: #3498db;
}

a:link {
  color: #fd5723;
}

a:active {
  color: #fd5723;
}

a:visited {
  color: #fd5723;
}

a:hover {
  color: #f0bcac;
}
```

--------------------------------

### Configure Civetweb Library Build with CMake

Source: https://github.com/webui-dev/webui/blob/main/src/civetweb/CMakeLists.txt

This snippet configures the build for the Civetweb project using CMake. It specifies the minimum CMake version, project name, source files, and defines a library target. It also sets public include directories and links the Threads library, with conditional linking for WinSock on Windows.

```cmake
cmake_minimum_required(VERSION 3.10)
project(civetweb)

# Source files
set(SOURCE_FILES
    civetweb.c
    civetweb.h
    handle_form.inl
    match.inl
    md5.inl
    response.inl
    sha1.inl
    sort.inl
)

# The C API library
add_library(civetweb ${SOURCE_FILES})

# Include directories
target_include_directories(civetweb PUBLIC ${CMAKE_CURRENT_SOURCE_DIR})

# Link libraries
find_package(Threads REQUIRED)
target_link_libraries(civetweb Threads::Threads)

# If on Windows, link with WinSock
if(WIN32)
  target_link_libraries(civetweb ws2_32)
endif()
```
Tokens:
Raw