Your existing C++ code
Register a function with cppFunction and call it from TypeScript. The binary bridge over WebSocket carries arguments and results asynchronously. Your application logic stays independent of React and the interface.
C++23 · HEADER-ONLY · OPEN SOURCE
C++’s missing
standard
GUI.
Your application in C++. Its interface in TypeScript, React and CSS. WebFront connects them through a header-only library, with development tools in the application window and UI resources in the executable.
OPEN SOURCE · HEADER-ONLY · NATIVE + WEB
C++ LOGIC ↔ WEB INTERFACE
app.cppFunction("life.step", &nextLife);
↳ C++: computation · React: rendering
↗ Header-only · C++23↗ No JavaScript environment to install↗ No development environment to distribute
EXAMPLE / GAME OF LIFE
A C++ simulation.
A React UI.
The computation stays in an existing C++ function. A React component displays the grid and calls that function for each generation. Try the patterns, then read through the code in the book.
● LIFE / INTERACTIVE LABCELLULAR AUTOMATON — B3/S23
32 × 32 / TOROIDAL GRID
1024 CELLS · 128 BYTES
↳ This web demo computes generations in JavaScript. In the native example, React awaits the C++ function’s result through the asynchronous bridge.
See the JavaScript → C++ bridge
try {
await webFront.ready;
const step = webFront.cppFunction('life.step');
const next = await step(cells);
// Update your React state with next.
} catch (error) {
console.error(error);
// Stop playback and show the error in your UI.
}A GUI FOR YOUR C++ CODE
The web as a common interface.
A reactive, portable UI
React components, TypeScript and CSS: use the same UI sources on Windows, macOS and Linux. Display them in a native window or the system browser. React remains optional.
The tools are in the application
The wf terminal installs packages, compiles TSX, checks types and runs tests. wf dev updates the preview on save. No separate Node.js or package manager installation is needed.
The interface ships with the executable
wf embed generates a compressed C++ header containing the UI and its web dependencies. After recompilation, the application runs offline, without a frontend project or development environment on the user’s machine.
WebFront requires a C++23 compiler and C++ dependencies managed by CMake. Rendering uses a browser or web engine: WebView2, WKWebView, WebKitGTK, or optionally CEF. Engine deployment depends on the platform; no JavaScript development environment is required.
PORTABILITY
From desktop applications
to connected devices.
A web interface can be displayed on a different machine from the one running C++. This is a useful direction for embedded equipment: the user’s browser supplies the screen and rendering engine.
Today: Windows, macOS and Linux
The project’s supported paths and tests cover desktop platforms. The examples use the available native engine or the system browser.
Embedded devices and microcontrollers: a future direction
These targets are not yet qualified. C++23 support, memory resources and the network stack need checking for each device. A remote browser would avoid embedding a web engine, but remote transport and its security still need to be designed and validated.
DEVELOPMENT
TypeScript, build and preview
in the same window.
Run the LifeDeveloper example, then enter these commands in its terminal. Edit the TSX and CSS files in your usual editor. No JavaScript runtime or package manager is required on the host machine.
Watch the development session ↗wf create life
wf init
wf install react@19.3.1 react-dom@19.3.1
wf dev ui/main.tsxLEARN
The WebFront Book
The tutorial starts with a console Game of Life programme. Add a window, a React interface, asynchronous calls and tests, then embed the resources in the executable.
If frontend development is new to you, optional sections explain the DOM, React components and state. Another section covers C++ coroutines and lifetimes.
Read the first chapter ↗OPEN-SOURCE PROJECT
Documentation and contributions
The repository guides describe the APIs, native engines and current limitations. Source code, tests and development discussions are on GitHub.