JavaScript bindings for Dear ImGui using Emscripten and TypeScript
Switch branches/tags
Nothing to show
Clone or download
Latest commit 2d37985 Oct 14, 2018
Permalink
Failed to load latest commit information.
dist v1.64 Sep 1, 2018
example v1.65 Oct 14, 2018
imgui @ e0cab56 v1.65 Oct 14, 2018
.gitignore load/save ini settings from localStorage Jun 25, 2018
.gitmodules add imgui v1.53 Feb 9, 2018
LICENSE.txt import project Feb 9, 2018
Makefile v1.65 Oct 14, 2018
README.md Update README.md Aug 13, 2018
bind-imgui.cpp v1.65 Oct 14, 2018
bind-imgui.d.ts v1.65 Oct 14, 2018
bind-imgui.js v1.65 Oct 14, 2018
emscripten.d.ts modularize bind-imgui Feb 27, 2018
imconfig.js update imgui to v1.62 tag Jun 22, 2018
imconfig.ts update imgui to v1.62 tag Jun 22, 2018
imgui.js v1.65 Oct 14, 2018
imgui.ts v1.65 Oct 14, 2018
imgui_demo.js v1.65 Oct 14, 2018
imgui_demo.ts v1.65 Oct 14, 2018
imgui_memory_editor.js v1.63 Aug 30, 2018
imgui_memory_editor.ts v1.63 Aug 30, 2018
package.json v1.63 Aug 30, 2018
rollup.config.js first pass at rollup dist Aug 4, 2018
tsconfig.json clean up build files Jun 23, 2018

README.md

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.

PayPal donate button

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

  • 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.