@mori2003/jsimgui

v0.13.0

Published

2 months ago

JavaScript bindings for Dear ImGui.

0High
0Medium
0Low

mori2003

imgui wasm webgl webgl2 webgpu

jsimgui: JavaScript bindings for Dear ImGui

showcase

JavaScript/TypeScript bindings for the Dear ImGui library.

Features

WebGL, WebGL2 and WebGPU supported
Using docking branch of Dear ImGui
Simple API which tries to feel familiar to the original
Original comments preserved from Dear ImGui
Good IDE support thanks to TypeScript

Examples

Clear canvas

WebGL - View Example
WebGL2 - View Example
WebGPU - View Example

Three.js

Three.js WebGL2 - View Example

PixiJS

PixiJS - View Example

Babylon.js

Babylon.js - View Example

Todo

The library should be somewhat usable, but expect bugs and missing features! (Custom font support, INI settings, etc.) Please open an issue if you find something.

Quick Start

Dear ImGui is rendered to a <canvas> element. Here is a short single-file example (also on CodePen). For more information, see the wiki.

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                margin: 0;
            }

            canvas {
                display: block;
                width: 100vw;
                height: 100vh;
            }
        </style>
        <script type="module">
            import { ImGui, ImGuiImplWeb } from "https://esm.sh/@mori2003/jsimgui";

            const canvas = document.querySelector("#render-canvas");

            await ImGuiImplWeb.Init({ canvas: canvas });

            function render() {
                canvas.width = canvas.clientWidth;
                canvas.height = canvas.clientHeight;

                ImGuiImplWeb.BeginRender();

                ImGui.Begin("New Window");
                ImGui.Text("Hello, World!");
                ImGui.End();
                ImGui.ShowDemoWindow();

                ImGuiImplWeb.EndRender();
                requestAnimationFrame(render);
            }
            requestAnimationFrame(render);
        </script>
    </head>
    <body>
        <canvas id="render-canvas"></canvas>
    </body>
</html>

Building

1. Clone the repository with submodules

git clone https://github.com/mori2003/jsimgui.git --recurse-submodules
cd jsimgui

2. Build

Using Docker Image

docker build -t jsimgui -f .github/Dockerfile .
docker run -v "$PWD:/workspace" jsimgui bash -c "npm install && node build.ts"

Manually

Prerequisites

A Node.js compatible runtime (Node.js >= v22.18.0, Deno, Bun)
Emscripten >= v4.0.18
Python with Ply (For dear_bindings)

npm install

This will build the default library configuration: WebGL2, truetype font loader, no demos.

node build.ts

You can specify what configuration to build like so:

node build.ts --backend=webgpu --font-loader=freetype --demos

node build.ts --help # To see all options

Project Structure

docs/         # Usage examples
src/          # Bindings generator source code
third_party/  # Dependencies (imgui, dear_bindings)