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.
• Compile-time import.meta.env.platform guards for shared web, iOS, and Android source.
• JSX statement containers that keep setup and rendered output in one lexical scope.
• Template-native @if, @for, @switch, and @try control flow.
• 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
Hono	@tsrx/hono	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.

Platform-specific source

Select "web", "ios", or "android" in the active TypeScript project:

{
  "tsrx": {
    "compiler": "@tsrx/react",
    "platform": "ios"
  }
}

tsrxReact(); // reads tsrx.platform through extends/project references

All three exact flags are available: import.meta.env.platform.web, .ios, and .android. An ordinary if whose test is exactly one flag is selected before TSRX semantic analysis, CSS extraction, virtual TypeScript generation, and target lowering. This keeps inactive platform-only code, dynamic imports, and styles out of diagnostics and build output. Template @if remains runtime control flow; use an ordinary if when inactive content must be excluded early.

There is no implicit web default. A recognized flag without a platform, or any platform value other than the three exact strings above, is an error. An explicit builder platform option remains available as an override/fallback, but it must match tsconfig when both are present.

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.