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)

Svelte requires --conditions=browser at runtime and a build step. See the Svelte adapter README for full setup.

Adapted from the ink-* community ecosystem, available in all 5 adapters:

// React example
import { Timer, TreeView, Combobox, JsonViewer, FilePicker } 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)} />

All community components use the shared WNode render architecture — same visual output across all 5 frameworks.

Relative units:

Color support:

• 140+ named CSS colors mapped to ANSI
• Hex: #fff, #ffffff
• RGB/RGBA: rgb(255 0 0), rgba(255, 0, 0, 0.5)
• OKLCH, HSL, LAB, LCH via colorjs.io
• Tailwind arbitrary values: text-[cyan], bg-[#ff0]

wolf-tui uses Taffy for layout computation. Taffy supports both Flexbox and CSS Grid — Yoga (used by Ink and React Native) only supports Flexbox.

Integration details:

• Native Node.js bindings via napi-rs (not WASM — no startup penalty)
• Supports calc() values
• Prebuilt for Linux (x64/arm64), macOS (Intel/Apple Silicon), Windows

Incremental rendering: All adapters render only changed terminal lines per frame, not the full screen. Disable for headless testing:

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

React Compiler: @wolf-tui/react ships pre-compiled with the React Compiler — all library components skip re-renders when props haven't changed. To apply to your own components:

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'),
    ],
})

Requires React 19+.