TSRX

Framework setup

React + Vite

Install the compiler and Vite plugin:

1 pnpm install @tsrx/react @tsrx/vite-plugin-react

Then add the plugin to your Vite config:

1 import { defineConfig } from 'vite';
2 import tsrxReact from '@tsrx/vite-plugin-react';
3
4 export default defineConfig({
5   plugins: [tsrxReact()],
6 });

That's it — create any .tsrx file and import it from your existing JS, TS, or TSX code. The plugin compiles .tsrx modules into standard React components with scoped CSS.

Preact + Vite

Install the Preact compiler and Vite plugin:

1 pnpm install @tsrx/preact @tsrx/vite-plugin-preact

Then add the plugin to your Vite config:

1 import { defineConfig } from 'vite';
2 import tsrxPreact from '@tsrx/vite-plugin-preact';
3
4 export default defineConfig({
5   plugins: [tsrxPreact()],
6 });

The plugin compiles .tsrx modules into standard Preact components. Suspense is imported from preact/compat by default; pass { suspenseSource: 'preact-suspense' } to tsrxPreact() if you want to avoid pulling in the full compat layer.

React + Rspack

Install the compiler and Rspack plugin:

1 pnpm install @tsrx/react @tsrx/rspack-plugin-react

Then add the plugin to your Rspack config:

1 import { TsrxReactRspackPlugin } from '@tsrx/rspack-plugin-react';
2
3 export default {
4   plugins: [new TsrxReactRspackPlugin()],
5 };

The plugin chains builtin:swc-loader for the final JSX transform and routes per-component <style> blocks through Rspack's built-in CSS module type, so no extra loaders are required.

React + Turbopack

Install the compiler and Turbopack helper:

1 pnpm install @tsrx/react @tsrx/turbopack-plugin-react next react react-dom

Then wrap your Next config with the helper:

1 import tsrxReactTurbopack from '@tsrx/turbopack-plugin-react';
2
3 export default tsrxReactTurbopack({
4   reactStrictMode: true,
5 });

The helper registers a Turbopack rule for .tsrx files, hands the compiled output back to Next as TSX, and routes component-local <style> blocks through a sibling virtual CSS import so Turbopack can process the scoped styles without extra loader setup.

Solid + Vite

Install the Solid compiler, its Vite plugin, and the upstream vite-plugin-solid which runs Solid's JSX transform on the emitted TSX:

1 pnpm install @tsrx/solid @tsrx/vite-plugin-solid vite-plugin-solid

Then wire both plugins into your Vite config (order matters — tsrxSolid first):

1 import { defineConfig } from 'vite';
2 import tsrxSolid from '@tsrx/vite-plugin-solid';
3 import solid from 'vite-plugin-solid';
4
5 export default defineConfig({
6   plugins: [tsrxSolid(), solid()],
7 });

Ripple

The Ripple framework ships with TSRX support as standard. If you're using Ripple with @ripple-ts/vite-plugin, .tsrx files work out of the box — no additional packages needed.

Tooling setup

Choose the tooling you want

Once your compiler target is installed, add the editor tooling you actually want so .tsrx files behave like first-class source files in the rest of your repo. Prettier and ESLint are separate paths here, so you can adopt one without committing to the other.

Prettier

Install Prettier and the TSRX plugin:

1 pnpm install -D prettier @tsrx/prettier-plugin

Add the TSRX Prettier plugin to your .prettierrc so Prettier can parse and format .tsrx modules:

1 {
2   "plugins": ["@tsrx/prettier-plugin"]
3 }

ESLint

Install ESLint and the TSRX plugin:

1 pnpm install -D eslint @tsrx/eslint-plugin

The recommended flat config is the simplest starting point for .tsrx files:

1 import tsrx from '@tsrx/eslint-plugin';
2
3 export default [...tsrx.configs.recommended];

VS Code

Install TSRX for VS Code from the Visual Studio Code Marketplace for diagnostics, navigation, completions, and TypeScript-aware editor support. Pair it with the official Prettier extension if you want format-on-save support inside the editor.

After that, opening a .tsrx file should give you syntax highlighting, diagnostics, go-to-definition, formatting, and the rest of the normal editor loop without extra manual setup.

What's next?

Now that TSRX is set up, explore the language syntax — components, control flow, error boundaries, and more.

Explore the features →

Getting Started