An interface layer for your next world

React in.
Game UI out.

Build menus, inventories and HUDs with familiar components. Let Yoga handle layout and WebGL handle the pixels.

Start building →Explore the API

TypeScript first. Engine independent. Yours to style.

THE RENDERING PIPELINE 01—03

ComposeReact components & hooks

tsx

ArrangeYoga flexbox in WebAssembly

wasm

DrawBatched primitives & MSDF text

Retained treeOne canvas. Your loop.

04 typed primitivesCSS-like flex layoutMSDF crisp textDOM keyboard mirror

A working interface, not a screenshot

Give it a try.

Every panel below is rendered by the library.
Click the canvas, or Tab into its controls.

Loading the renderer…

React → Yoga → WebGL Reduce motionInitializing

01 / COMPOSITION

The React you know.

State, effects, context and reusable components. Four primitives become the building blocks of your visual language.

02 / CONTROL

Make it your own.

Supply image URLs or an asset catalog. Register your own font atlases, change theme tokens, and drive frames from your game loop.

03 / INTEGRATION

A small boundary.

Your simulation owns game state. The interface reads snapshots and calls actions. Use a transparent canvas overlay or draw into a WebGL 1 context.

From a canvas to an interface

A few lines.
A world of possibilities.

Start with the included font and layout module. Add your game’s identity through composition, assets and style.

Read the integration guide →

import { createUI, View, Text } from 'ludic-canvas';

const ui = await createUI({ canvas });
ui.render(
  <View style={{ padding: 24, gap: 12 }}>
    <Text style={{ fontSize: 28 }}>Ready to play</Text>
    <View onPress={() => startGame()} label="Start game"
      style={{ padding: 16, background: '#526dff', borderRadius: 8 }}>
      <Text>Start game</Text>
    </View>
  </View>,
);

// When leaving the scene:
ui.destroy();

A focused first release.

Version 0.1.0 targets browser games with React 19.3.1 and WebGL 1. It supports menus, HUDs and inventories. Text uses pre-baked glyph atlases and greedy wrapping; complex-script shaping, editable text, controller navigation and native engine bindings are future work. The accessibility mirror covers pressable controls and live announcements, not full document semantics.

React in.Game UI out.