wolf-tui

Write CLI apps with your web framework — React, Vue, Angular, Solid, or Svelte

Quick Start · Packages · Components · Styling · Testing · Architecture · Development

[!IMPORTANT] What this installs:

• Native .node bindings for the Taffy layout engine (Rust → Node via napi-rs, not WASM)
• Prebuilt for Linux (x64/arm64), macOS (Intel/Apple Silicon), Windows
• No network calls, no telemetry, no files written outside your project

Uninstall: npm remove @wolf-tui/react @wolf-tui/plugin (substitute your adapter)

The Problem

Building terminal UIs means choosing between raw ANSI escape codes or framework-specific tools locked to one ecosystem. If you know React, you can use Ink — but there's nothing for Vue, Angular, Solid, or Svelte. And Ink's layout engine (Yoga) only supports Flexbox.

wolf-tui started as a fork of Ink, then expanded: five framework adapters sharing one layout engine (Taffy — Flexbox + CSS Grid), one component library, and one styling pipeline (Tailwind, SCSS, CSS Modules). Write a component once, render it in any adapter.

Quick Start

Scaffold a new project

npm create wolf-tui

The CLI walks you through framework, bundler, and styling choices — generates a ready-to-run project. See create-wolf-tui for flags and options.

Add to an existing project

Pick your framework:

React

npm install @wolf-tui/react && npm install -D @wolf-tui/plugin

import { render, Box, Text } from '@wolf-tui/react'

function App() {
    return (
        <Box style={{ flexDirection: 'column', padding: 1 }}>
            <Text style={{ color: 'green' }}>Hello from wolf-tui!</Text>
        </Box>
    )
}

render(<App />)

npm install @wolf-tui/vue && npm install -D @wolf-tui/plugin

<script setup>
import { Box, Text } from '@wolf-tui/vue'
</script>

<template>
    <Box :style="{ flexDirection: 'column', padding: 1 }">
        <Text :style="{ color: 'green' }">Hello from wolf-tui!</Text>
    </Box>
</template>

import { render } from '@wolf-tui/vue'
import App from './App.vue'

render(App)

npm install @wolf-tui/angular && npm install -D @wolf-tui/plugin

import { Component } from '@angular/core'
import { BoxComponent, TextComponent } from '@wolf-tui/angular'

@Component({
    standalone: true,
    imports: [BoxComponent, TextComponent],
    template: `
        <w-box [style]="{ flexDirection: 'column', padding: 1 }">
            <w-text [style]="{ color: 'green' }">Hello from wolf-tui!</w-text>
        </w-box>
    `,
})
export class AppComponent {}

import { renderWolfie } from '@wolf-tui/angular'
import { AppComponent } from './app.component'

renderWolfie(AppComponent)

npm install @wolf-tui/solid && npm install -D @wolf-tui/plugin

import { render, Box, Text } from '@wolf-tui/solid'

function App() {
    return (
        <Box style={{ flexDirection: 'column' }}>
            <Text style={{ color: 'green' }}>Hello from wolf-tui!</Text>
        </Box>
    )
}

render(App, { stdout: process.stdout, stdin: process.stdin })

npm install @wolf-tui/svelte && npm install -D @wolf-tui/plugin

<!-- App.svelte -->
<script>
import { Box, Text } from '@wolf-tui/svelte'
</script>

<Box style={{ flexDirection: 'column', padding: 1 }}>
    <Text style={{ color: 'green', fontWeight: 'bold' }}>Hello from wolf-tui!</Text>
</Box>

import { render } from '@wolf-tui/svelte'
import App from './App.svelte'

render(App)

Each adapter has a detailed README with full API docs, Vite/esbuild/webpack configuration, and component reference.

Packages

Components

All adapters share the same component set — same visual output across all 5 frameworks via the shared WNode render architecture.

Plus composables/hooks: useInput, useFocus, useFocusManager, stream access, screen reader detection.

// React example
import { Timer, JsonViewer, FilePicker, Table, Gradient, BigText } from '@wolf-tui/react'

// Timer with countdown
<Timer variant="countdown" durationMs={60000} format="human" />

// Interactive JSON viewer
<JsonViewer data={{ users: [{ name: 'Alice' }] }} defaultExpandDepth={2} />

// File picker with multi-select
<FilePicker initialPath="." multiSelect onSelect={(paths) => console.log(paths)} />

// Table with box-drawing borders
<Table data={[{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]} />

// Gradient text — by preset name, or custom stops
<Gradient name="rainbow">wolf-tui in color</Gradient>
<Gradient colors={['#ff3366', '#ffd700']}>Hand-picked stops</Gradient>

// BigText figlet-style banner
<BigText text="WOLF" font="block" gradient="rainbow" />

See individual adapter READMEs for API details and prop reference.

Styling

// Inline styles
<Box style={{ flexDirection: 'column', padding: 1, gap: 1 }}>
    <Text style={{ color: 'green', fontWeight: 'bold' }}>Styled text</Text>
</Box>

// Tailwind CSS (v3.4 / v4.1)
<Box className="flex-col p-4 gap-2">
    <Text className="text-green-500 font-bold">Styled with Tailwind</Text>
</Box>

All CSS approaches resolve to terminal styles at build time — no runtime CSS engine.

Testing

Every adapter ships a /testing subpath that swaps the real terminal for virtual streams, so components can be exercised headlessly under Vitest, Jest, or Node's test runner. The same API works across all five frameworks — pick your adapter's import and the rest is identical.

import { afterEach, test, expect } from 'vitest'
import {
    render,
    cleanup,
    KEYS,
    delay,
    stripAnsi,
} from '@wolf-tui/react/testing'
import { App } from './App'

afterEach(cleanup)

test('navigates the menu', async () => {
    const { stdin, lastFrame } = render(<App />, { columns: 80, rows: 24 })

    await stdin.write(KEYS.DOWN)
    await stdin.write(KEYS.ENTER)
    await delay(100)

    expect(stripAnsi(lastFrame() ?? '')).toContain('Selection: Option B')
})

Scaffold a project with npm create wolf-tui -- --test to get Vitest, @wolf-tui/testing-library, and a pre-wired test/setup.ts out of the box. See @wolf-tui/testing-library for the full API.

Architecture

┌──────────────────┐
│  @wolf-tui/core    │  Taffy layout, virtual DOM, ANSI renderer
│  (napi-rs)       │  native .node bindings
└────────┬─────────┘
         │
┌────────┴─────────┐
│  @wolf-tui/shared  │  render scheduler, shared render functions,
│                  │  input parsing, theme system
└────────┬─────────┘
         │
   ┌─────┼─────┬─────────┬──────────┐
   │     │     │         │          │
 React  Vue  Angular  SolidJS   Svelte

Each adapter maps its framework's component model to the shared virtual DOM. Taffy computes layout, the core renderer produces ANSI output. A visual bug either affects all adapters (render function issue) or one adapter (integration issue) — two-step debug path.

render(<App />, { incrementalRendering: false })

npm install -D babel-plugin-react-compiler

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { wolfie } from '@wolf-tui/plugin/vite'

export default defineConfig({
    plugins: [
        react({
            babel: {
                plugins: [['babel-plugin-react-compiler', {}]],
            },
        }),
        wolfie('react'),
    ],
})

Development

git clone <repo-url>
cd wolf-tui
pnpm install
pnpm dev

See CONTRIBUTING.md for development guidelines.

Acknowledgments

This project started as a fork of Ink by Vadim Demedes. The React package (@wolf-tui/react) builds upon Ink's foundation and includes components from the ink-* ecosystem.

License

MIT