UiUi

UiUi aims to provide the most minimalistic + small yet readable Gui. It's highly dependent on glslcv a minimalistic implementation of 2D GLSL shader code into a canvas element.

What it does:

• Creates a GUI based on a config file that calls back any state update. Great for tweaking params and who know what more
• Parses a GLSL shader file w/ UiUi comments and displays it.

You can check it Here

It should/will support:

• extendable component (you should be able to define new components)
• component replacement (you can define a new slider codebase for the component type 'slider')
• theming (altering current css vars or/and the components css modules )

Install

Unfortunatelly this proj is still highly dependent on the react-typescript-library template. So yarn...

yarn add uiui

Usage

You can check the 'example' folder. But in basic terms:

@SomeReactTag.tsx

  import { UiUi } from '@opqa/uiui';
  ...
  // Import a UiUi config file
  const uiuiData = require('{DATA-URL}.json');
  return (<UiUi.Root data={uiuiData}/>)
  ...
  // or, frag-shader (a-la-shadertoy) with UiUiComments
  return (<UiUi.Canvas url="{SHADER-URL}.glsl" />)

You can check the Examples Json File

• the UiUiComment Structure on a sample shader

API / Props

TBC

License

MIT © Goncalo Tavares