{"id":19218298,"url":"https://github.com/greggman/imhui","last_synced_at":"2025-05-13T00:16:02.552Z","repository":{"id":44384487,"uuid":"340248669","full_name":"greggman/ImHUI","owner":"greggman","description":"Experimental UI","archived":false,"fork":false,"pushed_at":"2021-03-10T16:38:47.000Z","size":147,"stargazers_count":49,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-13T00:15:51.202Z","etag":null,"topics":["html","imgui","ui"],"latest_commit_sha":null,"homepage":"https://greggman.github.io/ImHUI/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/greggman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-19T03:32:45.000Z","updated_at":"2025-04-15T10:21:13.000Z","dependencies_parsed_at":"2022-07-14T14:30:34.410Z","dependency_job_id":null,"html_url":"https://github.com/greggman/ImHUI","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greggman%2FImHUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greggman%2FImHUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greggman%2FImHUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greggman%2FImHUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/greggman","download_url":"https://codeload.github.com/greggman/ImHUI/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253843225,"owners_count":21972874,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","imgui","ui"],"created_at":"2024-11-09T14:26:08.835Z","updated_at":"2025-05-13T00:16:02.485Z","avatar_url":"https://github.com/greggman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ImHUI (**I**mmediate **M**ode **H**TML **U**ser **I**nterface)\r\n\r\n[Live Demo](https://greggman.github.io/ImHUI)\r\n\r\n**WAT?** I'm a fan (and a sponsor) of [Dear ImGUI](https://github.com/ocornut/imgui). I've written a couple of articles on it including [this one](https://games.greggman.com/game/imgui-future/) and [this one](https://games.greggman.com/game/rethinking-ui-apis/)\r\n\r\nLately I thought, I wonder what it would be like to try to make an\r\nHTML library that followed a similar style of API.\r\n\r\nNOTE: This is not Dear ImGUI running in JavaScript. For that see\r\n[this repo](https://github.com/flyover/imgui-js). The difference\r\nis most ImGUI libraries render their own graphics. More specifically\r\nthey generate arrays of vertex positions, texture coordinates, and\r\nvertex colors for the glyphs and other lines and rectangles for your\r\nUI. You draw each array of vertices using whatever method you feel like.\r\n\r\nThis repo is instead actually using HTML elements like `\u003cdiv\u003e`\r\n`\u003cinput type=\"text\"\u003e`, `\u003cinput type=\"range\"\u003e`, `\u003cbutton\u003e` etc...\r\n\r\nThis has pluses and minus. \r\n\r\nThe minus is it's likely not as fast as Dear ImGUI (or other ImGUI)\r\nlibraries, especially if you've got a complex UI that updates at 60fps.\r\nOn the other hand it might actually be faster for certain cases.\r\n\r\nThe pluses are\r\n\r\n* If you don't update anything in the UI it doesn't use any CPU\r\n\r\n* Styling is free (use CSS)\r\n\r\n  Most ImGUI libraries have very minimal styling features.\r\n\r\n* Layout is free (word wrap, sizing, grids, spacing\r\n\r\n  Most layout happen outside the library based on css\r\n\r\n* Supports all of Unicode\r\n\r\n  Most ImGUI libraries only handle a small number of glyphs.\r\n  They may or may not handle colored emoji 🍎🍐🍇🐯🐻🦁👾😉🤣\r\n  or Japanese(日本語), Korean(한국어), Chinese(汉语). I don't think\r\n  any handle right to left languages like Arabic(عربي).\r\n\r\n* Supports more fonts\r\n\r\n  This might not be fair, I'm sure Dear ImGUI can use more than one\r\n  font. The thing is it's likely cumbersome, especially multiple\r\n  sizes in multiple styles where as the browser excels at this.\r\n\r\n* Supports Language Input\r\n\r\n  Many ImGUI libraries have issues with language input. Because they\r\n  are rendering their own text they have 2nd class support for\r\n  complex input.\r\n\r\n* Supports Accessability\r\n\r\n  Most ImGUI libraries are not very accessability friendly. Because\r\n  they just ultimately render pixels there is not much for an accessability\r\n  feature to look at. With HTML, it's far easier for the browser\r\n  and or OS to look into the content of the elements.\r\n\r\n* Automatic zoom support\r\n\r\n  The browser zooms. No work required on your part\r\n\r\n* Automatic HD-DPI support\r\n\r\n  The browser will render text and most other widgets taking into\r\n  account the user's device's HD-DPI features.\r\n\r\n* In general, less code than Dear ImGUI should be executing if you are not updating\r\n  1000s of values per frame.\r\n\r\n  Consider, Dear ImGUI is mostly stateless AFAIK. That means things like word\r\n  wrapping a string or computing the size of column might need to be done on\r\n  every render. In ImHUI's case, that's handled by the browser and if the contents\r\n  of an element has not changed much of that is cached.\r\n\r\n# WARNING!!!\r\n\r\n## **This is an experiment!!**\r\n\r\nIt is not meant to be used for actual projects (yet?). I'm just trying it\r\nout, starting with the small snippets of Dear ImGUI demo code and converting\r\nit to use this library to see if it's possible.\r\n\r\nI'm curious where it will lead, what tradeoffs there are, also what\r\ngood parts of Dear ImGUI come from the concept of an ImGUI vs just\r\ncome from the fact that the other wrote some nice tools you can build\r\non.\r\n\r\nThere are lots of issues. It is **NOT READY TO USED IN OTHER PROJECTS**\r\n\r\n## **Requires ES2019**\r\n\r\nAt the moment no effort has been made to make it run on anything other\r\nthan 2021 browsers, Chromium based in particular (meaning I have not tested\r\nanywhere else).\r\n\r\n# LICENSE: MIT\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreggman%2Fimhui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgreggman%2Fimhui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreggman%2Fimhui/lists"}