React TTYD

Run terminal in your browser with React

Configuration Panel
Configure your terminal connection and appearance
Install and run ttyd:
$ brew install ttyd
$ ttyd --writable bash
Secure the ttyd server with basic auth:
$ ttyd --writable --credential testuser:testpw bash
lws_socket_bind: source ads 127.0.0.1
Listening on port: 7681
...
Expose the ttyd port:
$ ngrok http 7681

Connection Settings

DISCONNECTED

Loading terminal...

Terminal Output Log
No output yet...
Example Code
import { Ttyd } from 'react-ttyd';

// Basic usage
<Ttyd
    wsUrl="ws://localhost:7681/ws"
    clientOptions={{
        rendererType: 'webgl',
    }}
    termOptions={{
        fontSize: 14,
    }}
/>

// With basic authentication
<Ttyd
    wsUrl="ws://localhost:7681/ws"
    authToken={btoa('testuser:testpw')}
    clientOptions={{
        rendererType: 'webgl',
    }}
/>

// With event callbacks
<Ttyd
    wsUrl="ws://localhost:7681/ws"
    onConnectionOpen={(event) => {
        console.log('Connected to ttyd server');
    }}
    onConnectionClose={(event) => {
        console.log('Disconnected from ttyd server');
    }}
    onConnectionError={(event) => {
        console.error('Connection error:', event);
    }}
    onData={(data) => {
        console.log('Terminal output:', data);
    }}
/>