JavaScript bindings for the Dear ImGui library. Compatible with WebGL2 and WebGPU.

ImGui.Begin("jsimgui");
ImGui.Text("JavaScript bindings for Dear ImGui");
ImGui.Image(jsLogo, new ImVec2(50, 50));
ImGui.SameLine();
ImGui.Image(wasmLogo, new ImVec2(50, 50));
if (ImGui.Button("Click me")) {
    console.log("Button clicked!");
}

• Simple API which tries to feel familiar to the original
• Original comments preserved from Dear ImGui
• Good IDE support thanks to TypeScript
• Docking branch features
• WebGL2 and WebGPU backends, easily usable with Three.js

Demo:

• WebGL2: Basic example using a WebGL2 clear canvas - View Example

• WebGPU (WIP): Basic example using a WebGPU clear canvas - View Example

• Three.js: Integration with Three.js WebGL2 renderer - View Example

The library is currently in a very early stage but core functionality is there. Expect bugs and missing features!

Planned features and improvements:

• Increase API coverage
• Additional examples and documentation
• Better font support (custom fonts, icon fonts, emoji fonts)
• Clipboard integration
• Support for saving/loading ImGui settings

The package is available both on JSR and npm. Use it with your favorite package manager or with a CDN like ESM.

npm add @mori2003/jsimgui
deno add @mori2003/jsimgui
bun add @mori2003/jsimgui

Integrate it into your project.

import { ImGui, ImGuiImplWeb } from "@mori2003/jsimgui";
// via CDN
// import { ImGui, ImGuiImplWeb } from "https://esm.sh/@mori2003/jsimgui";

const canvas = document.querySelector("#your-canvas");
await ImGuiImplWeb.InitWebGL(canvas);

function frame() {
    ImGuiImplWeb.BeginRenderWebGL();

    ImGui.Begin("New Window");
    ImGui.Text("Hello from JS!");
    ImGui.End();

    // Render your scene...

    ImGuiImplWeb.EndRenderWebGL();
    requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

Arrays are modified in-place when passed as arguments. Single-sized arrays are also used for references:

const color = [0.2, 0.8, 0.5];
ImGui.ColorEdit3("BackgroundColor", color); // Modifies the color array.
const isVisible = [true];
ImGui.Checkbox("Show Window", isVisible); // Modifies isVisible[0].

Enums names have been shortened. E.g. ImGuiWindowFlags_None as ImGui.WindowFlags.None.

ImGui.SetNextWindowPos(new ImVec2(10, 10), ImGui.Cond.Once);

Prerequisites:

• A Node.js compatible runtime (Node.js, Deno, Bun)
• Emscripten
• Python with Ply (For dear_bindings)

Build:

1. Clone the repository with submodules

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

2. Run the build script

# Node.js & npm
npx tsx build.ts
# Deno
deno run build.ts
# Bun
bun run build.ts

bindgen/      # Generated C++ and TypeScript bindings
build/        # Distribution files
docs/         # Usage examples
src/          # Bindings generator source code
third_party/  # Dependencies (imgui, dear_bindings)