ImGui in Typescript/Javascript

Example

ImGui.Begin("MyWindow");
ImGui.Text("Hello ImGui")
ImGui.InputText("Title", (v = document.title) => document.title = v);
ImGui.end();

Full Example

import { createImGui, createImGui_Impl } from "ts-imgui";

async function main() {
    const ImGui = createImGui();
    const ImGui_Impl = createImGui_Impl(ImGui);

    await ImGui.default();

    const canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    canvas.width = 400;
    canvas.height = 300;
    canvas.tabIndex = 1;

    ImGui.CreateContext();
    ImGui_Impl.Init(canvas);

    window.requestAnimationFrame(_loop);
    function _loop(time: number) {
        ImGui_Impl.NewFrame(time);
        ImGui.NewFrame();

        ImGui.Begin("Debug");
        ImGui.Text("Hello ImGui...");
        ImGui.End();

        ImGui.EndFrame();

        ImGui.Render();
        ImGui_Impl.RenderDrawData(ImGui.GetDrawData());

        window.requestAnimationFrame(_loop);
    }
}

main();

Multiple Canvas Example

import { createImGui, createImGui_Impl } from "ts-imgui";

async function example1() {
    const ImGui = createImGui();
    const ImGui_Impl = createImGui_Impl(ImGui);

    await ImGui.default();

    const canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    canvas.width = 400;
    canvas.height = 300;
    canvas.tabIndex = 1;

    ImGui.CreateContext();
    ImGui_Impl.Init(canvas);

    window.requestAnimationFrame(_loop);
    function _loop(time: number) {
        ImGui_Impl.NewFrame(time);
        ImGui.NewFrame();

        ImGui.Begin("Debug");
        ImGui.Text("Hello ImGui... From Canvas1");
        ImGui.End();

        ImGui.EndFrame();

        ImGui.Render();
        ImGui_Impl.RenderDrawData(ImGui.GetDrawData());

        window.requestAnimationFrame(_loop);
    }
}

async function example2() {
    const ImGui = createImGui();
    const ImGui_Impl = createImGui_Impl(ImGui);

    await ImGui.default();

    const canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    canvas.width = 400;
    canvas.height = 300;
    canvas.tabIndex = 1;

    ImGui.CreateContext();
    ImGui_Impl.Init(canvas);

    window.requestAnimationFrame(_loop);
    function _loop(time: number) {
        ImGui_Impl.NewFrame(time);
        ImGui.NewFrame();

        ImGui.Begin("Debug");
        ImGui.Text("Hello ImGui... From Canvas2");
        ImGui.End();

        ImGui.EndFrame();

        ImGui.Render();
        ImGui_Impl.RenderDrawData(ImGui.GetDrawData());

        window.requestAnimationFrame(_loop);
    }
}

example1();
example2();