SvelTUI

Build beautiful terminal applications with Svelte 5

A terminal UI framework that brings Svelte's elegant reactive programming model to the command line. Instant reactivity, zero flickering, flexbox layouts.

<script>
  import { Box, Text, keyboard } from 'sveltui'

  let count = $state(0)
  keyboard.onKey('Space', () => count++)
</script>

<Box border="rounded" borderColor={0x06} padding={1}>
  <Text text="Press Space!" color={0x0a} />
  <Text text={`Count: ${count}`} color={0x0b} />
</Box>

Features

• Svelte 5 Runes - $state, $effect, $derived just work
• Flexbox Layout - Powered by Yoga layout engine
• Reactive Rendering - Only updates what changed, when it changes
• Zero Flickering - Differential rendering for rock-solid UI
• Keyboard API - Reactive state + imperative callbacks
• Focus Management - Tab navigation built-in
• Theming - Built-in themes (dracula, nord, monokai, solarized)
• True Color - Full 24-bit color support
• TypeScript - First-class support

Quick Start

# Create a new project (recommended)
bunx @rlabs-inc/sveltui create my-app
cd my-app
bun install
bun run dev

Components

Box

<Box border="rounded" borderColor={0x06} width={40} height={10} padding={1}>
  <Text text="Content" />
</Box>

Text

<Text text="Hello World" color={0x00ff00} bold />

Keyboard API

<script>
  import { keyboard } from 'sveltui'
  import { onDestroy } from 'svelte'

  // Imperative: callbacks for actions
  const unsub = keyboard.onKey('Enter', () => submit())
  onDestroy(unsub)
</script>

<!-- Reactive: state in templates -->
<Text text={`Last key: ${keyboard.lastKey}`} />

Colors

<Text color={0xff0000} text="Hex number" />
<Text color="#00ff00" text="Hex string" />
<Text color="blue" text="CSS name" />

Themes & Variants

Use semantic variant props for automatic theme colors:

<!-- Variants: primary, secondary, success, warning, danger, info -->
<Box variant="primary" border="rounded">
  <Text text="Primary styled" />
</Box>

<Text text="Success!" variant="success" />
<Text text="Warning" variant="warning" />
<Text text="Muted text" muted />

Change themes globally:

<script>
  import { getTheme } from 'sveltui'
  const theme = getTheme()
  theme().setTheme('dracula')  // or: nord, monokai, solarized
</script>

Requirements

• Bun >= 1.0.0
• Terminal with true color support

Documentation

Full documentation available at GitHub.

License

MIT