@uno.build/ui

API Docs • Examples • Website

Build high-performance and pixel-perfect user interfaces for WebGPU. Use the rendering engine and UI framework of your choice.

Motivation

When you build a video game's UI with a library such as Three.js, you typically use HTML and CSS for the layout. This approach has two drawbacks. First, it ties your game to the web, so you must ship it for browsers, Electron, or another environment with a WebView. Second, it separates your UI from your game because they live in two different worlds.

uno UI solves both problems by rendering the UI directly through the game's rendering pipeline, without relying on HTML or the DOM. This lets your game run in non-web environments while keeping the UI and game in the same rendering system.

Key Features

• Works with any WebGPU rendering engine
• Use it standalone or with React, Vue or SolidJS
• World-space integrations for Three.js, Babylon.js, Babylon Lite, PlayCanvas and Pixi.js 3D
• Pixel-perfect parity with DOM rendering
• High-quality text rendering with strokes and shadows using MTSDF
• Accurate text measurement and layout powered by Pretext
• Flexbox layout powered by Yoga
• Fine-grained updates for efficient rendering
• Lightweight, basic setup is around 280kb (93kb gzip)

Demos

These examples illustrate how to combine two independent UIs, one in the background and one in the foreground, with the engine’s scene rendered between them.

• WebGPU
• Three.js
• Pixi.js
• Pixi.js 3D
• Babylon.js
• Babylon Lite
• PlayCanvas
• TypeGPU

The background UI shown above can also be placed in world space. Each example includes lighting to demonstrate how it integrates with the 3D scene.

• Three.js
• Babylon.js
• Babylon Lite
• PlayCanvas
• Pixi.js 3D

UI frameworks.

• React: Includes a demo showing the to-do app integrated into a Three.js scene.
• Vue: Includes a demo showing the to-do app integrated into a PlayCanvas scene.
• SolidJS: Includes a demo showing the to-do app integrated into a Babylon Lite scene.