TSRX is an experimental TypeScript-based language extension for building declarative user interfaces with improved structure, readability, and AI-friendly composition. Created by Dominic Gannaway, it introduces a compiler that transforms enhanced TypeScript syntax into standard React, Solid, or Ripple code while remaining fully compatible with existing TypeScript tooling.

The core idea behind TSRX is to unify UI markup, styling, and logic into a single co-located structure while still preserving the ability to compile down to conventional framework outputs. This reduces fragmentation across files and aims to make UI code easier for both developers and AI systems to interpret and generate.

A key feature of TSRX is its compile-time transformation layer, which handles framework-specific constraints automatically. For example, it can restructure React hook usage and control flow so that code remains valid without requiring manual refactoring.

TSRX also emphasizes “agentic development,” meaning it is designed with AI coding agents in mind. By keeping related UI logic tightly grouped and reducing indirect control-flow patterns, it improves code predictability and reduces context fragmentation for language models.

The project is currently in an alpha state and integrates with modern developer tooling such as language servers, Prettier, and ESLint. It is positioned as a backward-compatible evolution of TypeScript-based frontend development rather than a replacement ecosystem.

Key features include:

• TypeScript-based UI language extension with compile-time transformation
• Co-location of markup, styles, and logic in a single structure
• Compiles to React, Solid, or Ripple
• Automatic handling of framework constraints (e.g., React hooks rules)
• AI-friendly code structure optimized for agent generation
• Integration with LSP, Prettier, and ESLint tooling
• Fully backward compatible with TypeScript ecosystems
• Open-source alpha-stage project

Common use cases include:

• Building modern frontend UIs with reduced boilerplate
• Improving AI-assisted code generation and refactoring
• Creating framework-agnostic UI components
• Experimenting with next-generation UI architecture patterns
• Simplifying large-scale frontend codebases

TSRX is developed as an exploratory step toward more structured, machine-readable UI code, aiming to bridge the gap between human-written frontend code and AI-generated software systems.