TSRX

TSRX (TypeScript Render Extensions) is a TypeScript language extension for building declarative user interfaces. It keeps TypeScript setup, JSX-shaped structure, template control flow, and sibling-scoped styles together in .tsrx files, then compiles that source into idiomatic output for the runtime you choose.

Documentation · Features · Specification · Playground · Discord

TSRX is in active beta development.

Example

A component is an ordinary TypeScript function. A statement container (@{ ... }) lets local setup live beside the template that uses it, while template directives provide declarative control flow. A <style> block is scoped to its siblings: it styles the elements beside it and everything below them, and nothing else. The compiler adds a hash class to those elements so the block's selectors match only there. Here the rules apply to this fragment's <ul>.

type Todo = {
  id: string;
  title: string;
  hidden?: boolean;
};

export function TodoList({ items }: { items: Todo[] }) @{
  const visibleItems = items.filter((item) => !item.hidden);

  <>
    <ul>
      @for (const item of visibleItems; index i; key item.id) {
        <li>{i + 1}. {item.title}</li>
      } @empty {
        <li>No todos yet</li>
      }
    </ul>

    <style>
      ul {
        display: grid;
        gap: 0.5rem;
      }
    </style>
  </>
}

Features

• TypeScript-compatible .tsrx modules that interoperate with JavaScript, TypeScript, and TSX code.
• JSX statement containers that keep setup and rendered output in one lexical scope.
• Template-native @if, @for, @switch, and @try control flow.
• Lazy object and array destructuring with &{ ... } and &[ ... ].
• Sibling-scoped <style> blocks: a block styles its siblings and everything below them, sibling blocks share one hash class, and assignable style themes expose $class and compose through <style apply={theme} />.
• Language-server, TypeScript, Prettier, ESLint, and editor integrations.

See the features guide for examples and the TSRX specification for the language grammar, AST shape, and static constraints.

Supported targets

TSRX parses source into a framework-neutral AST and hands it to a target compiler. The same language currently supports:

Target	Compiler integration	Home
React	@tsrx/react	This repository
Preact	@tsrx/preact	This repository
Solid	@tsrx/solid	This repository
Vue	@tsrx/vue	This repository
Ripple	@tsrx/ripple	Ripple
Octane	octane/compiler	Octane

Additional targets can be added as standalone compiler plugins without changing the TSRX language itself.

Tooling

This repository includes the core compiler, target compilers and runtime helpers, build integrations for Vite, Rspack, Turbopack, and Bun, plus Prettier, ESLint, TypeScript, language-server, and editor tooling.

Install the TSRX Syntax for VS Code for syntax highlighting, diagnostics, navigation, completions, formatting, and TypeScript integration. The TSRX extension for Zed is available from the Zed Extension Marketplace. The TSRX plugin for JetBrains IDEs has been submitted to JetBrains Marketplace and is under review. Integrations for Neovim and Sublime Text are also maintained here.

Learn and contribute

• Read the full documentation.
• Experiment in the TSRX playground.
• Report bugs or propose improvements in GitHub Issues.
• Join the TSRX Discord community.
• See CONTRIBUTING.md before opening a pull request.

TSRX was created by Dominic Gannaway and is released under the MIT License.