What is this?
TSRX (TypeScript Render Extensions) is a TypeScript language extension for building declarative user interfaces, combining TypeScript setup, JSX-like structure, template control flow, and sibling-scoped styles in .tsrx files, which compile to idiomatic output for your chosen UI runtime.
TSRX (TypeScript Render Extensions) is a TypeScript language extension for building declarative user interfaces, combining TypeScript setup, JSX-like structure, template control flow, and sibling-scoped styles in .tsrx files, which compile to idiomatic output for your chosen UI runtime.Is this a new language or just a compiler plugin for an existing framework?It is a new framework-neutral language with its own parser and AST; a target compiler (for React, Preact, Solid, Vue, Ripple, Octane) then turns that AST into framework-specific output.
It is a new framework-neutral language with its own parser and AST; a target compiler (for React, Preact, Solid, Vue, Ripple, Octane) then turns that AST into framework-specific output.How do I add TSRX to my project?You use one of the build integrations provided for Vite, Rspack, Turbopack, or Bun, plus the matching target compiler package (e.g. @tsrx/react, @tsrx/vue), and write components in .tsrx files.
You use one of the build integrations provided for Vite, Rspack, Turbopack, or Bun, plus the matching target compiler package (e.g. @tsrx/react, @tsrx/vue), and write components in .tsrx files.Do I need a specific Node version to work on this repo?Yes, the project requires Node 22 or newer, along with pnpm 11.15.1 and npm 11.6.2+.
Yes, the project requires Node 22 or newer, along with pnpm 11.15.1 and npm 11.6.2+.Is TSRX production-ready yet?No, TSRX is explicitly marked as being in active beta development, so expect ongoing changes.
No, TSRX is explicitly marked as being in active beta development, so expect ongoing changes.Which frameworks can I target with TSRX components?React, Preact, Solid, and Vue are supported directly in this repository, with Ripple and Octane supported via external compiler integrations.
React, Preact, Solid, and Vue are supported directly in this repository, with Ripple and Octane supported via external compiler integrations.Which editors get TSRX tooling support?VS Code has a full syntax/diagnostics/completion extension, Zed has an extension on its marketplace, a JetBrains plugin is under review, and Neovim and Sublime Text integrations are also maintained in this repo.
VS Code has a full syntax/diagnostics/completion extension, Zed has an extension on its marketplace, a JetBrains plugin is under review, and Neovim and Sublime Text integrations are also maintained in this repo.What does a sibling-scoped style block actually do?A block styles its own siblings and everything below them in the template, sibling blocks share one generated hash class, and assignable style themes expose a $class that can be composed into other elements.
A block styles its own siblings and everything below them in the template, sibling blocks share one generated hash class, and assignable style themes expose a $class that can be composed into other elements.How does TSRX handle template logic like loops and conditionals?Instead of writing plain JSX expressions, TSRX provides template-native directives such as @if, @for, @switch, and @try for declarative control flow inside the markup.
Instead of writing plain JSX expressions, TSRX provides template-native directives such as @if, @for, @switch, and @try for declarative control flow inside the markup.