Vite (Plugin)

This is an advanced setup that uses the Vite plugin to transform the real ink package for browser use. This results in a smaller bundle size but requires additional configuration.

For most users, we recommend the simpler Vite setup which uses the pre-bundled version.

npm install ink-web ink xterm

yarn add ink-web ink xterm

pnpm add ink-web ink xterm

bun add ink-web ink xterm

Vite Configuration:

import { inkWebPlugin } from 'ink-web/vite'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [react(), inkWebPlugin()],
})

Usage:

import { Box, Text } from "ink";
import { InkXterm } from "ink-web/core";
import "xterm/css/xterm.css";

const App = () => (
  <div style={{ width: "100vw", height: "100vh" }}>
    <InkXterm focus>
      <Box flexDirection="column">
        <Text color="green">Hello from Ink!</Text>
      </Box>
    </InkXterm>
  </div>
);

export default App;

With this setup, you import Ink components from ink and wrapper components from ink-web/core. The Vite plugin handles transforming the ink imports for browser compatibility.