LibAnyar

Anyar (Indonesian/Javanese) — "new", "fresh", "modern"

A lightweight C++ desktop application framework that leverages web frontend technologies (React, Vue, Svelte) for rich UI — inspired by Tauri's architecture, powered by LibAsyik's fiber-based C++ runtime.

Why LibAnyar?

Building desktop apps shouldn't force a choice between powerful native performance and a modern, rich UI. LibAnyar bridges that gap — write your backend in C++ with full access to the native ecosystem, while crafting your interface with React, Vue, or any web framework you already know.

	Qt	Electron	Tauri	LibAnyar
UI Technology	QML/Widgets	Web (Chromium)	Web (OS WebView)	Web (OS WebView)
Backend Language	C++	JavaScript	Rust	C++
Binary Size	~15MB	~150MB+	~3-5MB	~3-8MB
RAM Usage	~30MB	~200MB+	~20MB	~20MB
C/C++ Ecosystem	Native	Via N-API	Via FFI	Native
Built-in DB	—	—	Plugin	SQLite+PostgreSQL
Native IPC	Custom	—	webview msg	webview_bind
IPC HTTP/WS Fallback	—	—	—	Built-in
Zero-copy Binary IPC	—	—	—	Shared Memory
Native Pinhole Rendering	—	—	—	Built-in (direct native surface compositing)
WebGL Canvas Rendering	Native OpenGL	Manual	Manual	Built-in (RGB and YUV formats supported)

Example Projects

Hello World Minimal example — IPC commands, events, and built-in plugins.	Local Video Player FFmpeg-powered with pinhole native rendering and zero-copy WebGL fallback.
Secure Key Storage Encrypted password manager — AES-256-GCM, multi-window, custom plugin.	Wifi Analyzer Real-time signal strength visualization and channel scanning.

Architecture

block-beta
  columns 1

  A["🌐 Web Frontend — React / Vue / Svelte"]
  B["📡 @libanyar/api — JS Bridge\n★ Native IPC (webview_bind, ~0.01ms)\n★ Shared Memory (anyar-shm://, zero-copy)\n○ HTTP/WS fallback (browser dev mode)"]
  C["🖼️ OS WebView — WebKit / WebView2"]
  D["⚙️ LibAnyar Core (C++17)\nIPC Router · Commands · Event Bus\nWindow Mgr · Plugins · Native APIs\nSharedBuffer · BufferPool · Pinhole · WebGL"]
  E["🧱 LibAsyik — Foundation\nHTTP/WS Server · SOCI/SQL · Boost Fibers"]

  A -- " " --> B
  B -- " " --> C
  C -- " " --> D
  D -- " " --> E

  style A fill:#4f46e5,color:#fff
  style B fill:#7c3aed,color:#fff
  style C fill:#2563eb,color:#fff
  style D fill:#0891b2,color:#fff
  style E fill:#059669,color:#fff

Loading

Quick Start

Tip

Start a new project — scaffold with the Anyar CLI:

anyar init my-app          # interactive: pick template (React, Vue, Svelte)
cd my-app && anyar dev     # start Vite HMR + C++ backend

C++ backend — define commands and manage windows:

#include <anyar/app.h>

int main() {
    anyar::App app;

    app.command("greet", [](const json& args) -> json {
        return {{"message", "Hello, " + args["name"].get<std::string>() + "!"}};
    });

    app.create_window({
        .title = "My App",
        .width = 1024,
        .height = 768,
    });

    return app.run();
}

JS frontend — call into C++ from React, Vue, or vanilla JS:

import { invoke } from '@libanyar/api';

const result = await invoke('greet', { name: 'World' });
// → { message: "Hello, World!" }

Building

Requirements

• C++17 compiler (GCC 11+, Clang 10+, MSVC 2019+)
• CMake >= 3.16
• LibAsyik 1.6.1+ (with Boost >= 1.81, SOCI 4.0.3)
• WebKitGTK 4.0 (Linux) / WebView2 (Windows) / WebKit (macOS)
• nlohmann/json >= 3.11
• Node.js >= 18 (for frontend build, optional for pre-built dist)

Build from Source

git clone https://github.com/user/libanyar.git
cd libanyar

# Install dependencies (Ubuntu 22.04)
sudo bash scripts/setup-ubuntu.sh

# Build
mkdir build && cd build
cmake .. -DCMAKE_BUILD_TYPE=Debug
make -j$(nproc)

# Run hello-world example
cd examples/hello-world
./hello_world

Pinhole Native Rendering

LibAnyar includes Pinhole, a direct native renderer for high-throughput surfaces such as video, camera feeds, waveform views, and dashboards that need to minimize JS and canvas upload overhead.

A pinhole reserves a transparent DOM placeholder and composites a native GPU surface inside the same OS window, underneath the webview content. That gives you native drawing latency while still letting HTML/CSS handle surrounding controls and layout.

Renderer	Best for	Tradeoff
Pinhole	Lowest-latency video or data surfaces	The surface itself does not participate in full DOM styling
WebGL Canvas	CSS-styled, cross-platform canvas rendering	Frame uploads still flow through the webview

See the Pinhole Native Overlay Rendering Guide for API details and architecture notes.

Shared Memory IPC & WebGL Canvas

LibAnyar provides zero-copy binary data transfer between C++ and the webview frontend — ideal for video frames, LiDAR point clouds, image processing, or any large binary payload.

flowchart LR
  subgraph CPP["C++ Backend"]
    A["Capture / Generate\n(FFmpeg, sensor, etc.)"] --> B["SharedBuffer\nmmap'd memory"]
  end

  subgraph IPC["Zero-copy IPC"]
    B -- "anyar-shm:// URI" --> C["OS WebView\nfetch()"]
  end

  subgraph JS["JS Frontend"]
    C --> D["WebGL Renderer\n(RGBA/YUV420/NV12...)"]
    D --> E["Canvas\n🖥️"]
  end

  style CPP fill:#0891b2,color:#fff
  style IPC fill:#7c3aed,color:#fff
  style JS fill:#4f46e5,color:#fff

Loading

Feature	Description
@libanyar/api/buffer	Shared memory buffers with anyar-shm:// custom URI scheme
@libanyar/api/canvas	WebGL frame renderer (RGBA, RGB, BGRA, Grayscale, YUV420, NV12, NV21)
SharedBufferPool	Lock-free ring buffer pool for streaming (e.g. 30fps video)
Zero-copy	C++ writes to mmap'd memory → JS reads via fetch() — no serialization

// C++ — write pixels into shared memory
auto buf = anyar::SharedBuffer::create("frame", width * height * 4);
std::memcpy(buf->data(), pixels, buf->size());
app.emit("buffer:ready", {{"name", "frame"}, {"url", "anyar-shm://frame"}});

// JS — fetch and render with WebGL (zero-copy on Linux)
import { createBufferRenderer } from '@libanyar/api/canvas';

const { destroy } = createBufferRenderer({
  canvas: '#viewport',
  width: 1920, height: 1080,
  format: 'rgba',
  pool: 'video-frames',
});

See the Shared Memory & WebGL Guide for full API reference.

Documentation

Guides, API references, and tutorials: LibAnyar Documentation

License

MIT