Svelte Themes Logo Svelte Themes
Sveltty screenshot

Sveltty

Author Avatar Theme by Miunau
Updated: 30 Nov 2025
22 Stars

Render and interact with Svelte components in the terminal

Github

Categories

Vite

Overview

SvelTTY brings the power of Svelte apps directly into the terminal, allowing developers to create and interact with TUI (Text User Interface) applications effortlessly. Transitioning from a web-based mindset to a terminal environment has never been easier, as SvelTTY embraces familiar HTML, CSS, and JavaScript syntax to facilitate this shift. This innovative runtime not only offers compatibility with a wide array of HTML elements but also enhances the terminal experience with rich styling options.

With full 24-bit color support and unique terminal-specific properties, SvelTTY transforms the terminal into a vibrant space for application development. The attention to detail and ease of customization make it a highly appealing choice for developers looking to leverage Svelte’s reactivity within a terminal interface.

Features

  • HTML & CSS Support: Utilizes standard HTML elements and CSS properties, allowing for seamless styling and layout as you’d expect in a web environment.

  • Customizable Base Styling: Offers a default user agent stylesheet for a consistent starting point, which can be overridden to suit specific design needs.

  • Full 24-bit Color Support: Renders CSS gradients and images in supported terminals, providing a rich visual experience with colors, backgrounds, and gradients.

  • Flexbox Layout: Everything operates as a flex container by default, simplifying layout management with flex display being the core foundation.

  • Svelte Reactivity: Supports Svelte 5 reactivity features such as $state, $effect, and $derived, enabling dynamic interactions and user inputs effectively.

  • Image Rendering: Allows the use of <img> elements for displaying images in compatible terminals, enhancing the capability of TUI applications.

  • Popover & Anchor Positioning: Features positions API that can help in managing overlays and tooltips, promoting better user interactions.

  • No CSS Animations: Focuses on synchronous rendering for improved performance, though JavaScript-based animations can still be implemented if needed.