@react-x11/components
The reference for the components this package ships. The README is the tour — what the package is for, and why a given component is here rather than in react-x11 core. These pages are the details: props, handles, events, and the decisions behind them.
Every page is one directory under src/, and that is not a coincidence —
test/docs.test.ts fails if a component has no page or a page has no
component.
Components
| Page | Import | What it is |
|---|---|---|
| Calendar / DatePicker | @react-x11/components/calendar | A month grid: one date or a range, any day blockable. |
| Charts | @react-x11/components/charts | Cartesian charts; a million points is a normal input. |
| ColorPicker / ColorField | @react-x11/components/color-picker | A colour input: field, hue, alpha, swatches, eyedropper. |
| Code | @react-x11/components/code | A static code block: highlighted, selectable. |
| CodeEditor | @react-x11/components/code-editor | Multiline code editing: highlighting, completion. |
| Flow | @react-x11/components/flow | A directed-graph editor: nodes, edges, pan and zoom. |
| Formula | @react-x11/components/formula | TeX mathematics: KaTeX layout, native ink, selectable. |
| Html | @react-x11/components/html | A static HTML + CSS document, selectable, with seams. |
| Markdown | @react-x11/components/markdown | Streaming-friendly GFM with cross-block selection. |
| MediaPlayer | @react-x11/components/media-player | mpv or VLC, embedded, with real transport control. |
| Table | @react-x11/components/table | A data table: sortable, virtualized, any row height. |
| Terminal | @react-x11/components/terminal | A real terminal: an embedded emulator, or its own. |
| TerminalOutput | @react-x11/components/terminal-output | A captured session, rendered. <Terminal>'s static sibling. |
| Three | @react-x11/components/three | A three-fiber-shaped 3D scene over either GL backend. |
| Timeline | @react-x11/components/timeline | A run of events: a mark per step, a line between. |
| TrayHost | @react-x11/components/tray-host | The system tray: applications dock their icons in. |
| Tree | @react-x11/components/tree | A disclosure tree: seams throughout, and virtualized. |
| Desktop calendar | @react-x11/components/desktop-calendar | The user's real calendar events, over D-Bus. A hook. |
Shared modules
These are not components — they register nothing, render nothing at import time, and exist because more than one component needs them. They have their own subpaths because an app building a surface of its own needs the same parts.
| Page | Import | What it is |
|---|---|---|
| ansi | @react-x11/components/ansi | A captured terminal session, as a document. |
| richtext | @react-x11/components/richtext | The styled-text element a document selects across. |
| codeblock | @react-x11/components/codeblock | The look of a block of code. |
| code-language | @react-x11/components/code-language | The tokenizer seam, the languages, the palettes. |
| embed | @react-x11/components/embed | The spawn, watch and hand-back lifecycle. |
Design documents
- A pure-JS VT backend for
<Terminal>— the design behindbackend="vt". - Composable, cost-bounded charts — the decimation
pyramid, the command-stream/pixel crossover, and the tooltip-popup
policy behind
/charts. - Rendering a captured session — why a log is a
document rather than a grid, and what
/ansiand<TerminalOutput>can and cannot represent. - The data table — proposed: the prior-art survey, the
successor contract with core's
<Table>, and the variable-height virtualization it shares with the tree. - An HTML control worth having — the pipeline behind
<Html>, why the element draws a document rather than composing one, the resource and script seams, the isolated-process mode, and the audit of exposing the seams as a Chrome DevTools Protocol surface. - A colour picker — implemented: why the panel belongs here and the screen sampler does not, the CSS-colour value model against what this renderer can actually parse, and the server-side gradients the panes are made of.
Conventions these pages follow
- Props tables list what the component reads, with the default in the description rather than a column of its own — most defaults are a sentence, not a value.
- Styling is
style, always. No component invents aclassNameor awidthprop; the root box takes react-x11'sstyle, and that is where width, padding andflexGrowgo. data-testnameis on every component that renders a host element, forreact-x11/test's queries.- Nothing here is a hard dependency. Where a component needs a program or
a native module, "it is not installed" is an ordinary state with a
fallbackand astatus, never a throw.