JavaScript/TypeScript bindings for the Dear ImGui library.
- 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
Clear canvas
-
WebGL - View Example
-
WebGL2 - View Example
-
WebGPU - View Example
Three.js
- Three.js WebGL2 - View Example
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.
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>
#render-canvas {
width: 100%;
height: 100%;
}
</style>
<script type="module">
import { ImGui, ImGuiImplWeb } from "https://esm.sh/@mori2003/jsimgui";
await ImGuiImplWeb.Init({
canvas: document.querySelector("#render-canvas"),
enableDemos: true,
});
function render() {
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>- A Node.js compatible runtime (Node.js, Deno, Bun)
- Emscripten
- Python with Ply (For dear_bindings)
git clone https://github.com/mori2003/jsimgui.git --recurse-submodules
cd jsimguinpm installThis will build the default library configuration: WebGL2, truetype font loader, no demos.
node build.tsYou can specify what configuration to build like so:
node build.ts --backend=webgpu --font-loader=freetype --demos
node build.ts --help # To see all optionsdocs/ # Usage examples
src/ # Bindings generator source code
third_party/ # Dependencies (imgui, dear_bindings)