Skip to content

Conversation

@remorses
Copy link
Owner

Adds a new @opentui/web package that enables rendering opentui apps in the browser via WebSocket.

Changes:

  • New @opentui/core span capture API (getSpanLines, captureSpans)
  • WebSocket server that streams terminal frames to browser clients
  • HTML renderer that applies span styling (colors, bold, italic, etc.)
  • Proper mouse event handling (down/up/scroll)
  • Keyboard input forwarding

Usage:

import { opentuiWebSocket } from "@opentui/web"

const ws = opentuiWebSocket({
  onConnection: (session) => {
    const root = createRoot(session.renderer)
    root.render(<App />)
    return () => root.unmount()
  },
})

Bun.serve({ fetch: ws.fetch, websocket: ws.websocket })

- fix useKeyboard callback signature (single KeyEvent param, not two)
- add renderer.start() for keyboard input to work
- map browser key names to KeyCodes format (ArrowUp -> ARROW_UP)
- add white-space: pre to preserve spaces in terminal output
- remove createWebRenderer abstraction, use createTestRenderer directly
- simplify demo UI to clean terminal-style design
- fix code point validation in buffer.ts to prevent RangeError
- remove renderer.start() to avoid conflicting with our render loop
- add rendering/pendingRender flags to prevent overlapping renders
- trigger immediate render after mouse/resize events
- remove debug logging that added latency
- add 4 tabs: Overview, Diff, Scroll, Colors
- use real <input> component instead of fake styled text
- show system stats, status boxes, color palette, border styles
- fix keyboard handler to not interfere with input
- add cursorVisible to VTermData type
- include cursor visibility in captureSpans
- send cursor updates when position or visibility changes
- use actual cursor visibility instead of hardcoded true
Tests use inline snapshots with visual grid showing cursor position (█).
Covers: typing, arrow keys, Home/End, backspace, typing in middle.
- add tunnel package with connectTunnel() API for exposing local apps via public URLs
- add cloudflare worker to serve HTML client at opentui.net/s/{tunnelId}
- refactor session logic into shared SessionCore for reuse between server and tunnel
- add WebSocketLike abstraction for server/client compatibility
- bundle client with bun build and serve via cloudflare assets
Remove Math.ceil() from charWidth calculation so canvas uses same
fractional character widths as HTML text layer. Add matching CSS
properties (font-weight, letter-spacing, kerning) to text layer.

Reduces text selection drift from ~30px to <1px over 100 characters.
…terminal

- Remove handleClick and let consumers manage focus via setFocused()
- Update handleBlur to use requestAnimationFrame and check if another
  opentui textarea has focus, preventing focus fights between terminals
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants