Io

screenshot of Io
vite

UI Framework for Three.js

Overview:

The Io-Gui is an experimental JavaScript framework that aims to provide a simple and performant UI framework for creating fast and reactive custom elements. Although it is still under development and not ready for production use, it offers features such as state changes, data binding events, object mutations, routing, navigation, and code splitting. The project's goal is to provide a solid foundation for complex applications and tools, particularly for 3D editors and demo tools for threejs.

Features:

  • Design system: Io-Gui includes a built-in design system that utilizes a simple and effective CSS framework. It offers various built-in elements such as editors for basic data types and user input, 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 can render their contents using the GLSL shading language, with element properties and CSS theme variables reactively mapped to shader uniforms.
  • Development: Io-Gui has few dependencies and minimal tooling requirements for development, linting, and testing. It only relies on the TypeScript compiler and can be started by simply running tsc. However, for convenience, it utilizes Node.js and Yarn to run development scripts.

Summary:

Io-Gui is an experimental JavaScript framework that aims to provide a simple and performant UI framework for creating custom elements. It offers features such as state changes, data binding events, object mutations, routing, navigation, and code splitting. It also includes a design system with various built-in elements and supports rendering elements with WebGL shaders. Despite being in development, Io-Gui showcases potential for 3D editors and demo tools for threejs.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

ui-kit
UI Kits & Components

A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.