flyover / imgui-js

JavaScript bindings for Dear ImGui using Emscripten and TypeScript

imgui-js

JavaScript bindings for Dear ImGui using Emscripten and TypeScript

Example

ImGui JavaScript+WebGL example

The original Dear ImGui demo code from imgui_demo.cpp has been ported to imgui_demo.ts. Also, the Memory Editor from the imgui_club project (imgui_memory_editor.h) has been ported to imgui_memory_editor.ts and added to the demo for browsing the Emscripten memory space.

ImGui JavaScript Sandbox

A CodePen using the Ace editor to live-edit a window.

ImGui JavaScript+Three.js example

A CodePen using Dear ImGui with Three.js.

Support

If you find this useful, please consider donating to this and the Dear ImGui project. I can also invoice for private support, custom development, etc.

Notes

All functions in the C++ ImGui namespace are exported at the top level of the module.

import * as ImGui from "imgui-js";

Individual exports can be imported as well.

import { ImVec2 } from "imgui-js";

In general, functions that take an address of a variable in C++ have been changed to take an access function in JavaScript. Calling the access function with no arguments returns the variable, calling with a value sets the variable.

type ImAccess<T> = (value?: T) => T;

let show: boolean = true;

const _show: ImAccess<boolean> = (_: boolean = show): boolean => show = _;

// get the value of show
console.log(_show()); // true

// set the value of show to false (also returns the updated value)
console.log(_show(false)); // false

In the following example, the address of show in the C++ code has been replaced with an inline arrow access function.

#include "imgui.h"
bool show = true;
void draw() {
    if (ImGui::Button("Toggle")) { show = !show; }
    if (show) {
        ImGui::Begin("My Window", &show, ImGuiWindowFlags_AlwaysAutoResize));
        ImGui::Text("Hello, World!");
        ImGui::End();
    }
}

import * as ImGui from "imgui-js";
let show: boolean = true;
function draw(): void {
    if (ImGui.Button("Toggle")) { show = !show; }
    if (show) {
        ImGui.Begin("My Window", (_ = show) => show = _, ImGui.WindowFlags.AlwaysAutoResize));
        ImGui.Text("Hello, World!");
        ImGui.End();
    }
}

Enumerations that begin with ImGui* are also exported with ImGui removed. So the following examples are equivalent.

import * as ImGui from "imgui-js";
const flags: ImGui.WindowFlags = ImGui.WindowFlags.AlwaysAutoResize;

import { ImGuiWindowFlags } from "imgui-js";
const flags: ImGuiWindowFlags = ImGuiWindowFlags.AlwaysAutoResize;

In order to minimize size of the output, the C++ library has been compiled with IMGUI_DISABLE_OBSOLETE_FUNCTIONS and IMGUI_DISABLE_DEMO_WINDOWS.

Building

• git clone [e-mail]:flyover/imgui-js.git
• cd imgui-js
• git submodule update --init --recursive
• download and install Emscripten
• npm install
• make
• make start-example-html

TODO

• file I/O, imgui.ini, loading external fonts
• implement ImGuiTextFilter (add support for JavaScript RegExp's)
• implement ImGuiTextBuffer (simplify to array of strings)
• fill in remainder of any missing API
• automate the Emscripten install and environment setup in npm install

License

imgui-js is licensed under the MIT License, see LICENSE for more information.