Documentation

Choose Your Path

v1.0 Schema — frozen, no breaking changes in 1.x

LittleUI layouts are pure JSON. The same file renders in Unreal, on Canvas, or any future host.

{
  "id": "root",
  "type": "box",
  "width": 1280,
  "height": 720,
  "backgroundColor": "#0A0E27",
  "children": [
    { "id": "title", "type": "text", "text": "Hello World", "fontSize": 32, "textColor": "#FFFFFF" },
    { "id": "btn", "type": "button", "text": "Click Me", "width": 200, "height": 60 }
  ]
}

Full spec: docs/LAYOUT_SPEC.md

LayoutBuilder API

import { LayoutBuilder } from '@littleui/sdk';

const layout = new LayoutBuilder()
  .box({ id: 'root', width: 1280, height: 720 })
    .text({ id: 'title', text: 'Welcome', fontSize: 32 })
    .button({ id: 'btn', text: 'Play', width: 200, height: 60 })
  .end()
  .build();

Full API on npm.

Canvas Rendering

import { CanvasRenderer } from '@littleui/web';

const renderer = new CanvasRenderer(canvas, layout);
renderer.onButtonClick('btn', (id) => console.log('clicked:', id));
renderer.start();

Renders to HTML5 Canvas in any browser. Hover and click handling included.