webui Documentation

File: bridge/README.md Copy Chapter

WebUI Bridge

The WebUI Bridge connects the UI (Web Browser) with the backend application through WebSocket. This bridge is written in TypeScript, and it needs to be transpiled to JavaScript using ESBuild to produce webui.js, then converted to C header using the Node script js2c.js to generate webui_bridge.h.

Windows Copy Section

• Install Python
• Install Node.js
• cd webui\bridge
• npm install esbuild
• .\node_modules\.bin\esbuild --bundle --target="chrome90,firefox90,safari15" --format=esm --tree-shaking=false --outdir=.\ .\webui.ts
• node js2c.js

Windows PowerShell Copy Section

• cd webui\bridge
• build.bat
• If you get running scripts is disabled on this
  system error. Then run Set-ExecutionPolicy RemoteSigned to enable script execution. After done, you can roll back by running Set-ExecutionPolicy Restricted

Linux Copy Section

• Install Python
• Install Node.js
• cd webui/bridge
• npm install esbuild
• ./node_modules/.bin/esbuild --bundle --target="chrome90,firefox90,safari15" --format=esm --tree-shaking=false --outdir=./ ./webui.ts
• node js2c.js

Linux Bash Copy Section

• cd webui\bridge
• sh ./build.sh

macOS Copy Section

• Install Python
• Install Node.js
• cd webui/bridge
• npm install esbuild
• ./node_modules/.bin/esbuild --bundle --target="chrome90,firefox90,safari15" --format=esm --tree-shaking=false --outdir=./ ./webui.ts
• node js2c.js

macOS Bash Copy Section

• cd webui\bridge
• sh ./build.sh

File: examples/C/react/README.md Copy Chapter

React WebUI Example Copy Chapter

This is a basic example of how to use WebUI with React to generate a portable single executable program. WebUI will run the internal web server and use any installed web browser as GUI to show the React UI.

A simple Python script vfs.py is used to generate vfs.h to embed the whole react's build folder into the portable single executable program.
The generated VFS serves exact file paths only; directory index fallback/redirect is handled by WebUI core.

How to use it? Copy Section

1. Run script build_react to re-build the React project and compile the C file

How to create a React WebUI project from scratch? Copy Section

1. Run npx create-react-app my-react-app to create a React app using NPM
2. Add <script src="webui.js"></script> into public/index.html to connect UI with the backend
3. Run python vfs.py "./my-react-app/build" "vfs.h" to embed the build folder
4. Now, use any C compiler to compile main.c into a portable executable program

Other backend languages examples: Copy Section

• Coming soon...

File: examples/C/text-editor/README.md Copy Chapter

WebUI C - Text Editor

This text editor is a lightweight and portable example written in C using WebUI as the GUI library.

• Windows

  sh Copy

  # GCC
  mingw32-make

• Linux

  sh Copy

  # GCC
  make
  
  # Clang
  make CC=clang

• macOS

  sh Copy

  make

File: examples/C/README.md Copy Chapter

WebUI C Examples

Examples of how to create a WebUI application in C.

C Examples Copy Chapter

The only requirement to build the examples is a C compiler.

• minimal: Creates a minimal WebUI application.
• call_c_from_js: Calls C from JavaScript.
• call_js_from_c: Calls JavaScript from C.
• serve_a_folder: Use WebUI to serve a folder that contains .html, .css, .js, or .ts files.
• custom_web_server: Use your preferred web server like NGINX/Apache... with WebUI to serve a folder.
• chatgpt_api: Calls ChatGPT API from C.
• frameless: Frameless window example.
• public_network_access: Allows network access to external devices.
• react: React + WebUI example.
• virtual_file_system: Embeds files using a virtual file system.
• test_index_redirect: Tests index fallback and custom entry behavior for /, /sub, and /sub/foo.
• web_app_multi_client: Multiple clients example.

To build an example, cd into its directory and run the make command.

• Windows

  sh Copy

  # GCC
  mingw32-make
  
  # MSVC
  nmake

• Linux

  sh Copy

  # GCC
  make
  
  # Clang
  make CC=clang

• macOS

  sh Copy

  make

Additional Examples Copy Chapter

• text-editor: A lightweight and portable text editor written in C using WebUI as the GUI library.

File: examples/C++/README.md Copy Chapter

WebUI C++ Examples

Examples of how to create a WebUI application in C++.

The only requirement to build the examples is a a C++11 compiler.

• minimal: Creates a minimal WebUI application.
• call_cpp_from_js: Calls C++ from JavaScript.
• call_js_from_cpp: Calls JavaScript from C++ using class methods and member-function bind.
• serve_a_folder: Uses WebUI to serve a folder with multiple files (class-based example using member-function bind).
• virtual_file_system: Embeds files using a virtual file system.
• test_index_redirect: Tests index fallback and custom entry behavior for /, /sub, and /sub/foo.

To build an example, cd into its directory and run the make command.

• Windows

  sh Copy

  # G++
  mingw32-make
  
  # MSVC
  nmake

• Linux

  sh Copy

  # G++
  make
  
  # Clang
  make CXX=clang

• macOS

  sh Copy

  make

File: src/civetweb/README.md Copy Chapter

Changes currently required when updating the submodule to ensure full direct interoperability for wrappers:

• Prevent warnings for e.g. malloc and snprintf usage outside civetweb.

  diff Copy

  + // Disable All Warnings
  + #ifdef _MSC_VER
  + #pragma warning(push, 0)
  + #pragma warning(disable: 4996)
  + #elif defined(__clang__)
  + #pragma clang system_header
  + #elif defined(__GNUC__)
  + #pragma GCC system_header
  + #endif
  
  /* Copyright (c) 2013-2024 the Civetweb developers

File: src/webview/README.md Copy Chapter

1. `WebView2.h` Copy Chapter

1. Go to https://www.nuget.org/packages/microsoft.web.webview2.
2. Download the .nupkg file.
3. Rename it to .zip.
4. Extract the archive.
5. Copy the file microsoft.web.webview2.x.x.xxxx.xx\build\native\include\WebView2.h.
6. Paste WebView2.h into this folder (webui\src\webview).

2. `EventToken.h` Copy Chapter

1. Go to https://learn.microsoft.com/en-us/windows/apps/windows-sdk/downloads.
2. Download and install the Windows SDK.
3. Copy C:\Program Files (x86)\Windows Kits\10\Include\10.x.xxxx.x\winrt\EventToken.h.
4. Paste EventToken.h into this folder (webui\src\webview).

3. Prevent warnings Copy Chapter

Add the following snippet at the top of WebView2.h:

// Disable all warnings (WebUI)
#ifdef _MSC_VER
#pragma warning(push, 0)
#pragma warning(disable: 4996)
#elif defined(__clang__)
#pragma clang system_header
#elif defined(__GNUC__)
#pragma GCC system_header
#endif