SVELTERM

Standard Svelte. Real HTML+CSS. Terminal and/or browser from the same source.

svelterm is largely LLM-written — designed and directed by a human, with most of the code produced in pair-programming sessions with Claude, test-driven and reviewed as it landed. If that's not your thing, there are plenty of artisanal, hand-typed frameworks out there.

animations
Terminal
Browser
real terminal curl -fsSL https://svelterm.dev/run/animations.mjs | node --input-type=module -

Terminal CSS

Things that are different in the terminal:

  • Borders — single, double, rounded, heavy using box-drawing characters
  • Units — cell maps to terminal cells (monospace character positions)
  • Colors — ANSI names (cyan), truecolor (#ff6b6b), all 148 CSS named colors
  • Opacity — opacity: dim uses the terminal dim attribute
  • Focus — :focus and :hover pseudo-classes work via keyboard and mouse
  • Media queries — @media (display-mode: terminal) and @media (display-mode: browser) for target-specific rules

Terminal-specific values like border: rounded and 1cell are naturally ignored by browsers — they're invalid CSS. Everything else is standard: flexbox, variables, media queries, calc(), selectors, specificity, cascade.

Why?

LLMs know CSS

Every frontier model has been trained on CSS and Svelte. An AI generating SvelTERM components is writing standard code, no novel APIs to learn.

Svelte solved the hard problems

Reactivity, scoped CSS, compilation, editor tooling, HMR, all inherited. SvelTERM adds a renderer and a CSS engine.

No framework has a CSS engine

Ink uses JSX props. Bubble Tea is imperative. Ratatui is Rust structs. They all reinvent styling. SvelTERM uses CSS.

Status

SvelTERM is early stage. It builds on Paolo Ricciuti's custom renderer API for Svelte, which is experimental and not yet merged. A prototype SvelteKit integration works, with terminal apps getting HMR, routing, and the full SvelteKit dev experience, but depends on an open vite-plugin-svelte PR landing.

Feedback on the terminal rendering is very much appreciated. Open an issue or get in touch.