Installation
Next.js
Start with the example or follow this guide:
npm install ink-web xtermyarn add ink-web xtermpnpm add ink-web xtermbun add ink-web xterm"use client";
import dynamic from "next/dynamic";
const Terminal = dynamic(() => import("./terminal"), {
ssr: false,
});
export default function Home() {
return <Terminal />;
}"use client";
import { InkXterm, Box, Text } from "ink-web";
import "ink-web/css";
import "xterm/css/xterm.css";
export const Terminal = () => (
<InkXterm focus>
<Box flexDirection="column">
<Text color="green">Hello from Ink!</Text>
</Box>
</InkXterm>
);
export default Terminal;Client-Side Only Rendering
Since ink-web relies on browser APIs (like document), you need to mark components using it with 'use client' directive at the top of the file.
Common Issues
If you see hydration errors, make sure you're using the 'use client' directive or dynamic imports with ssr: false.
Inline Rendering
If you want to render Ink components inline, you can use the InkWebDynamic component:
"use client";
import { InkWebDynamic } from "ink-web/next";
import dynamic from "next/dynamic";
const Terminal = dynamic(() => import("./terminal"), {
ssr: false,
});
export default function Home() {
return (
<InkWebDynamic focus>
{({ Box, Text }) => (
<Box>
<Text>Rendered with InkWebDynamic.</Text>
</Box>
)}
</InkWebDynamic>
);
}