All projects
Ink Components
ink-canvas
Run Ink applications in the browser, rendered by Xterm.js.
$
npm install ink-canvasTypeScript
Ink in the browser
No Node.js process needed.
Xterm.js rendering
Real terminal styling, resizing and fit.
Input handling
Browser keystrokes are forwarded to Ink.
Vite plugin
Polyfills configured automatically.
App.tsx
import { Text, Box } from "ink";
import { InkCanvas } from "ink-canvas";
const MyInkApp = () => (
<Box borderStyle="round" borderColor="green">
<Text>Hello from Ink in the Browser!</Text>
</Box>
);
export default function App() {
return (
<div style={{ height: "100vh" }}>
<InkCanvas focused terminalOptions={{ fontSize: 14 }}>
<MyInkApp />
</InkCanvas>
</div>
);
}