Introduction

Gridland renders the same React components to a browser canvas, a terminal, or plain text for AI agents, and ships component source directly into your project instead of as an installable package.

Two Runtimes, One Tree

Your Gridland components run in two places from the same source. In a browser, @gridland/web draws them to an HTML5 <canvas>, so you can drop a TUI inside any React app. In a terminal, @gridland/bun draws them to real stdout over a native FFI bridge, so you can ship standalone CLIs with bun build --compile. Both runtimes are built on the OpenTUI engine with Yoga for Flexbox layout, wired into React through a custom reconciler. No xterm.js, no terminal emulator, no hidden iframe. Just cells.

Readable by Agents

The same component tree renders to plain text for AI agents, crawlers, and screen readers. A TUI your users run interactively is, by default, also a document an LLM can read. No separate accessibility layer, no server-side rewrite. See SSR for Agents.

You Own the Components

Gridland borrows shadcn/ui's distribution model. Run create-gridland add button and the source lands in your project, where you can read, edit, and version it like any other file. If a component doesn't fit your app, change it. It's yours.

Pixel-Perfect Alignment

Every element sizes in character cells, not pixels, so layouts stay perfectly aligned across font sizes, zoom levels, and terminal widths. The API is standard Flexbox via Yoga, so <box width={40}> is 40 columns wide and the rest of the layout composes the way you already know. See Rendering for the full mental model.