Home - rahulpandita/react-term GitHub Wiki
react-term is a modern terminal emulator library for React and React Native. VT parsing runs entirely off the main thread in a Web Worker backed by SharedArrayBuffer, keeping the UI responsive even under high-throughput workloads.
Features
- Off-main-thread VT parser — Web Worker + SharedArrayBuffer cell grid; the main thread handles only DOM events
- WebGL2 renderer — instanced rendering, 2 draw calls per frame, alpha-only glyph atlas
- Canvas 2D fallback — universal renderer for browsers without WebGL2 or OffscreenCanvas
- Full-worker rendering — OffscreenCanvas render worker; zero main-thread paint work
- React Native support — React Native Skia renderer, touch gestures, hardware keyboard
- Multi-pane layouts — shared WebGL context bypasses the Chrome 16-context limit
- Unicode wide characters — CJK, Hangul, Hiragana, Katakana, emoji, and fullwidth forms at correct 2-cell width
- Kitty keyboard protocol — modes 1 (CSI u), 2 (event types), 4 (alt/shifted base), 8 (all keys), 16 (associated text)
- Accessibility — ARIA parallel DOM, screen reader support, 10 Hz throttled updates
- Addon system — SearchAddon, WebLinksAddon, FitAddon
- OSC/DCS support — OSC 4/7/10/11/12/52/104, DCS, bracketed paste, synchronized output
Quick Start
Install the packages:
npm install `@next_term/react` `@next_term/web`
Embed a terminal in a React app:
import { useRef } from 'react';
import { Terminal, type TerminalHandle } from '`@next_term/react`';
function App() {
const termRef = useRef(TerminalHandle)(null);
return (
(Terminal
cols={80}
rows={24}
fontSize={14}
onData={(data) =) socket.send(data)}
ref={termRef}
/>
);
}
// Write PTY/WebSocket data back to the terminal:
socket.onmessage = (e) => termRef.current?.write(e.data);
Note: Full off-main-thread mode requires cross-origin isolation headers (
COOP: same-origin+COEP: require-corp). See Getting Started for details.
Packages
| Package | Description |
|---|---|
@next_term/core |
SharedArrayBuffer cell grid, VT parser, buffer management, Unicode utilities |
@next_term/web |
WebTerminal, Web Worker bridge, WebGL2/Canvas2D renderers, addons |
@next_term/react |
React components: Terminal, TerminalPane |
@next_term/native |
React Native: NativeTerminal, Skia renderer, touch/keyboard input |