io-gui

Io-Gui: Experimental JavaScript Framework

⚠️ WARNING! Io-Gui is an experiment currently under development. This code is not production ready!

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

The goal of this project is to provide a strong foundation for complex applications and tools such as 3D editors and demo tools for threejs.

To learn about Io-Gui, read the quick start and the deep dive guide.

You can also check out the collection of built-in elements.

Stay in touch on github and mastodon.

Design system

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

Reactive WebGL Elements

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

Development

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

To download and develop Io-Gui locally:

git clone https://github.com/io-gui/io.git && cd io
yarn && yarn dev

This will install dev dependencies and start the typescript watch script. You will also need to run a static file server of your choice.

yarn build

To learn more Io-Gui development, please read contributing guide and code of conduct, browse and submit issues.

Documentation

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

The files in docs/tsdoc are a work in progress. The files are automatically generated using typedoc and typedoc-plugin-markdown plugin.