Skip to content

flyover/imgui-js

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

  • git clone git@github.com: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.