Lithium UI - reactive ui framework for Unity

Description

Lithium is an ui framework built on top of UI Toolkit designed to simplify editor tools creation by minimising time and effort required to develop ui for such tool. By combining advantages of both ImGui and UI Toolkit, lithium provides alternative way to define your ui. For more information see documentation.

Why to use Lithium

There are a couple of reasons why you should give Lithium a try in your next project, it:

• is more readable than ImGui,
• provides easy way to define your ui from code alongside its functionality,
• eliminates the need for querying elements in hierarchy which helps to eliminate structure mismatch errors,
• allows you to reduce data explicitly passed to elements and remove singletons thanks to context system,
• considerably reduces amount of code needed to implement given ui compared to UI Toolkit
• simplifies ui logic by defining ui structure based on current state rather than defining initial state and update logic.

Why not to use Lithium

That being said, Lithium does not work in every scenario. Because layouts are defined from code it is not very ui-designer-friendly. Also, since it is built on top of UI Toolkit, it also has most of the problem of UI Toolkit, such as no word-space ui.

Examples

Hello world window

using UI.Li;
using UI.Li.Editor;
using UnityEditor;
using UnityEngine;

using static UI.Li.Common.Common;

public class HelloWindow: ComposableWindow
{
    [MenuItem("Test/HelloWindow")]
    public static void ShowWindow() => GetWindow<HelloWindow>();

    protected override string WindowName => "Hello world!";
    
    protected override IComponent Layout() => Text("Hello world!");
}

Add action to inspector

using UI.Li;
using UI.Li.Editor;
using UnityEditor;
using UnityEngine;

using static UI.Li.Common.Common;
using static UI.Li.Common.Layout.Layout;
using static UI.Li.Editor.Fields;

// Assuming we have MonoBehaviour "TestBehaviour"
[CustomEditor(typeof(TestBehaviour))]
public class TestBehaviourEditor: ComposableEditor
{
    protected override IComponent Layout() => Col(
        Inspector(this),
        Button(content: "Tick", onClick: () => Debug.Log("Tack"))
    );
}

Getting started

Ready to learn more? Quick start guide is available here.

Roadmap

V1 roadmap:

• support for manipulators.
• remove Element.Data object, replace it with style system and IManipulator list
• ui portals
• remove OnUpdate event from IComponent
• styling system
• port of every style available in UI Elements Builder
• port of most of the components available in UI Elements Builder
• list component
• basic layout debugger with support for viewing state

V2 roadmap:

• implement useMemo equivalent from ReactJS(Cache)
• implement useEffect equivalent from ReactJS(OnUpdate)
• rework methods for inspecting composition context
• fully featured layout debugger with support for modifying variables and handling contexts
• basic async handling to make working with network resources and files easier
• remove/hide OnRender event from IComponent
• ensure support for unity tailwind
• component for stylesheet loading

V3 roadmap:

• optimize debugger to prevent creating large amounts of scriptable objects
• visual ui builder
• code generator for easier wrapping around ui toolkit templates
• better error handling
• auto-batching re-renders caused by updates from built-in events
• unit tests to improve stability
• static style extraction

Future releases:

• optimization of styling system
• support for named variables
• global pooling of VisualElements
• pooling of components
• further caching optimizations
• better async handling with tasks that can report status

UI Toolkit interoperability

Lithium is built on top of UI Toolkit, which allows for almost seamless interoperability between them.

CompositionRenderer can be used to generate VisualElements structure from Lithium layout, which you can later insert into your ui document. You can also extend ComposableDocument to create MonoBehaviour that renders your lithium ui inside the game or ComposableElement if you want to embed Lithium inside your UI Toolkit ui.

Using VisualElementss inside Lithium on the other hand requires a bit more work. You need to implement custom IComponent or extend Element. To see how is can be done take a look at text implementation.

Motivation

Lithium is heavily inspired by the web framework named ReactJS. It borrows the idea of ui component as a function of state and parameters that returns the ui. Since we have html-like ui system in the Unity, we can imitate web frameworks to get similar benefits.

Contributing

If you feel like some feature is missing, or you find any bug, feel free to open a new issue following the community guidelines.

License

You can find license here.