Components
TUI
The root mounting component for Gridland
TUI is the single entry point for rendering TUI content to a
canvas. It handles client detection, canvas creation, React reconciler setup,
and automatic resizing. Gridland is built on the opentui engine.
Primitives
Run demo
bunx @gridland/demo primitivescurl -fsSL https://raw.githubusercontent.com/thoughtfulllc/gridland/main/scripts/run-demo.sh | bash -s primitivesUsage
import { TUI } from "@gridland/web"
<TUI style={{ width: "100vw", height: "100vh" }}>
<box border padding={1}>
<text>Your TUI content here</text>
</box>
</TUI>Props
| Prop | Type | Description |
|---|---|---|
children | ReactNode | TUI elements to render (<box>, <text>, etc.) |
style | CSSProperties | CSS styles for the outer container div |
className | string | CSS class for the outer container div |
SSR Behavior
On the server, TUI renders an empty <div> with the provided
style and className. On the client, it hydrates and creates the canvas
automatically. No dynamic(() => import(...), { ssr: false }) wrapper is needed.
The client-side hydration process:
- Detects the browser environment via
useEffect - Creates a
<canvas>element inside the container - Initializes the React reconciler with a
BrowserRenderContext - Sets up
ResizeObserverfor automatic canvas resizing - Renders children through the TUI reconciler to the canvas
Architecture
React JSX
|
v
@opentui/react reconciler
|
v
Renderable tree (Box, Text, etc.)
|
v
Yoga layout engine (flexbox)
|
v
BrowserBuffer (cell grid)
|
v
CanvasPainter (pixels)
|
v
HTML5 Canvas