{"id":21402207,"url":"https://github.com/io-gui/io","last_synced_at":"2025-04-07T19:16:37.844Z","repository":{"id":34675760,"uuid":"38648876","full_name":"io-gui/io","owner":"io-gui","description":"Experimental JavaScript Framework","archived":false,"fork":false,"pushed_at":"2025-03-24T22:11:06.000Z","size":14188,"stargazers_count":48,"open_issues_count":0,"forks_count":4,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-31T18:21:18.787Z","etag":null,"topics":["custom-elements","framework","javascript","threejs","typescript","ui","ui-components","webgl"],"latest_commit_sha":null,"homepage":"https://iogui.dev","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/io-gui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["arodic"]}},"created_at":"2015-07-06T22:05:04.000Z","updated_at":"2025-03-24T22:11:15.000Z","dependencies_parsed_at":"2024-06-20T23:27:09.865Z","dependency_job_id":"1fae785e-1df7-4b51-baa0-84330b76a4ac","html_url":"https://github.com/io-gui/io","commit_stats":{"total_commits":1824,"total_committers":7,"mean_commits":"260.57142857142856","dds":0.1260964912280702,"last_synced_commit":"ddf8d33d79907fa64871c49024ffb25e330023a7"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/io-gui%2Fio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/io-gui%2Fio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/io-gui%2Fio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/io-gui%2Fio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/io-gui","download_url":"https://codeload.github.com/io-gui/io/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247713258,"owners_count":20983683,"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":["custom-elements","framework","javascript","threejs","typescript","ui","ui-components","webgl"],"created_at":"2024-11-22T15:35:40.145Z","updated_at":"2025-04-07T19:16:37.811Z","avatar_url":"https://github.com/io-gui.png","language":"TypeScript","readme":"\n# Io-Gui: Experimental JavaScript Framework\n\n[![NPM Package][npm]][npm-url]\n[![DeepScan][deepscan]][deepscan-url]\n[![License][license]][license-url]\n\n\u003e ⚠️ **WARNING!** Io-Gui is an experiment currently under development. This code is not production ready!\n\nIo-Gui is an experimental UI framework aimed at simplicity and performance. It lets you write fast and reactive custom elements that respond to state changes, data binding events and object mutations. It can support single page applications with routing, navigation and code splitting.\n\nThe goal of this project is to provide a strong foundation for complex applications and tools such as 3D editors and demo tools for [threejs].\n\nTo learn about Io-Gui, read the [quick start] and the [deep dive] guide.\n\nYou can also check out the collection of built-in [elements].\n\nStay in touch on [github] and [twitter].\n\n## Design system\n\nIo-Gui includes a design system built with a simple and effective CSS framework. It's built-in element library includes editors for basic data types and **user input**, various types of **sliders**, **color editors**, configurable **object editors**, **menu systems**, **selectors** and **layout** elements.\n\n## Reactive WebGL Elements\n\nOne of the unique features of Io-Gui is its ability to render custom elements using WebGL shaders. Elements that extend the `IoGl` element have the ability to render their contents using GLSL shading language. Element properties and CSS theme variables are reactively mapped to shader uniforms.  \n\n## Development\n\nIo-Gui has no runtime dependencies and only a few development dependencies. Aside from the typescript compiler, Io-Gui relies on very little tooling for development, linting and testing. You should be able to just type `tsc` and get started. However, for the sake of convenience, it uses [nodejs] and [yarn] to run development scripts.\n\nTo download and develop Io-Gui locally:\n\n```bash\ngit clone https://github.com/io-gui/io.git \u0026\u0026 cd io\nyarn \u0026\u0026 yarn dev\n```\n\nThis will install dev dependencies and start the typescript watch script. You will also need to **run a static file server** of your choice.\n\n```bash\nyarn build\n```\n\nTo learn more Io-Gui development, please read [contributing guide](https://github.com/io-gui/io/blob/main/.github/CONTRIBUTING.md) and [code of conduct](https://github.com/io-gui/io/blob/main/.github/CODE_OF_CONDUCT.md), browse and submit [issues](https://github.com/io-gui/io/issues).\n\n## Documentation\n\nThe Io-Gui documentation is hosted on [io-gui.dev] via github pages from the main branch of this [github] repository. The UI of the website is created using Io-Gui and the source code is contained in [index.html]. The website content is loaded from `.md` files in the `docs/` directory and `.js` files in the `demos/` directory. The website itself is the most up-to-date reference on how to build a documentation website using Io-Gui. It also contains examples on how to use different nodes and elements.\n\nThe files in `docs/tsdoc` are a work in progress. The files are automatically generated using typedoc and typedoc-plugin-markdown plugin.\n\n[npm]: https://img.shields.io/npm/v/io-gui\n[npm-url]: https://www.npmjs.com/package/io-gui\n[deepscan]: https://deepscan.io/api/teams/18863/projects/22152/branches/651706/badge/grade.svg\n[deepscan-url]: https://deepscan.io/dashboard#view=project\u0026tid=18863\u0026pid=22152\u0026bid=651706\n[license]: https://img.shields.io/github/license/io-gui/io\n[license-url]: https://github.com/io-gui/io/blob/main/LICENSE\n\n[github]: https://github.com/io-gui/io/\n[twitter]: https://x.com/akirodic\n[threejs]: https://threejs.org\n[nodejs]: https://nodejs.org\n[yarn]: https://yarnpkg.com\n\n\n[io-gui.dev]: https://iogui.dev/io/\n[index.html]: https://github.com/io-gui/io/blob/main/index.html#L125\n[quick start]: https://iogui.dev/io/#path=Docs,Quick%20Start\n[deep dive]: https://iogui.dev/io/#path=Docs,Deep%20Dive\n[elements]: https://iogui.dev/io/#path=Demos,Elements","funding_links":["https://github.com/sponsors/arodic"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fio-gui%2Fio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fio-gui%2Fio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fio-gui%2Fio/lists"}