JavaScript bindings for the Dear ImGui library, using the docking branch.

Currently only compatible with WebGL2. Built with: Dear ImGui, Dear Bindings, Deno and Emscripten.

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

Currently missing but planned:

• Clipboard support
• Image and ImageButton
• Custom fonts
• Saving ImGui settings
• WebGPU backend

• WebGL2: Basic example using a WebGL2 clear canvas - View Example
• Three.js: Integration with Three.js WebGL2 renderer - View Example

The package is available on the JSR package registry. Use it with your favorite package manager (See: https://jsr.io/docs/using-packages).

# Deno
deno add jsr:@mori2003/jsimgui

# Node.js
npx jsr add @mori2003/jsimgui

# Bun
bunx jsr add @mori2003/jsimgui

Integrate it into your project.

import { ImGui, ImGuiImplWeb } from "@mori2003/jsimgui";

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

function frame() {
    ImGuiImplWeb.BeginRender();

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

    // Render your scene...

    ImGuiImplWeb.EndRender();
    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 and are accessed through the ImEnum object:

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

Prerequisites:

• Deno
• Emscripten
• Python with Ply (For dear_bindings)

1. Clone the repository

git clone https://github.com/mori2003/jsimgui.git
cd jsimgui

2. Generate the dear_bindings data

deno task build:gen-data

3. Build the project

deno task build:full

build/        # Distribution files
examples/     # Usage examples
intermediate/ # Generated C++ binding files
nix/          # Nix development shell
src/          # API generator source code
third_party/  # Dependencies (imgui, dear_bindings)