@gridland/web
Core package API reference
TypeScript Setup
Gridland uses custom JSX elements (<box>, <text>, <span>, etc.) that aren't standard HTML. To get type-checking and autocomplete, add the JSX type declarations to your tsconfig.json:
{
"include": ["src", "node_modules/@gridland/web/src/gridland-jsx.d.ts"]
}Or add a triple-slash reference in any .d.ts file in your project:
/// <reference types="@gridland/web/jsx" />This is required for TypeScript projects using React 19. The declarations handle
conflicts with React's built-in IntrinsicElements automatically.
TUI
The main mounting component. See Rendering → In the browser for full documentation.
import { TUI } from "@gridland/web"Vite Plugin
import { gridlandWebPlugin } from "@gridland/web/vite-plugin"gridlandWebPlugin()
Returns an array of Vite plugins that configure module resolution for the opentui engine.
Resolves @opentui/core, @opentui/react, and @opentui/ui from peer dependencies.
Hooks
Portable hooks (useKeyboard, useTerminalDimensions) live in @gridland/utils.
Browser-only hooks
import { useFileDrop, usePaste, useBrowserContext } from "@gridland/web"Browser Context
import { BrowserContext, useBrowserContext } from "@gridland/web"BrowserContext is the React context that <TUI> installs for its children.
It carries the renderer, canvas element, and cell dimensions so browser-only
hooks like useFileDrop, usePaste, and useBrowserContext can read from
the same source of truth that <TUI> provides.
Call useBrowserContext() inside a descendant of <TUI> to read the current
BrowserContextValue. You only need to reach for the raw BrowserContext
symbol when wiring up a custom Context.Consumer or a test provider.
Internal Modules
These modules are used internally by TUI and are not part of the
public API. They may change without notice between releases.
BrowserBuffer
In-memory cell grid that stores character, foreground, background, and attribute data for each cell position.
BrowserRenderContext
Implements the RenderContext interface for the browser environment. Manages
the buffer, layout, painting, and input handling.
CanvasPainter
Draws the cell grid to an HTML5 Canvas context. Handles font measurement, glyph caching, and efficient dirty-region repainting.
BrowserTextBuffer / BrowserTextBufferView
Browser-safe replacements for the native text buffer modules. Provide line-based text storage and viewport windowing.
BrowserSyntaxStyle
Stub replacement for the native syntax highlighting module. Returns no highlighting in the browser (syntax highlighting requires tree-sitter).
SelectionManager
Handles text selection on the canvas. Tracks selection start/end positions and provides methods to get selected text.