Getting Started

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.tsrxfile and import it from your existing JS, TS, or TSX code. The plugin compiles.tsrxmodules 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.tsrxmodules into standard Preact components.Suspenseis imported frompreact/compatby default; pass{ suspenseSource: 'preact-suspense' }totsrxPreact()if you want to avoid pulling in the full compat layer.

Preact + Rspack

Install the compiler and Rspack plugin:

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

Then add the plugin to your Rspack config:

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

Like the React Rspack plugin, it chainsbuiltin:swc-loaderfor the final JSX transform and routes per-component<style>blocks through Rspack's built-in CSS module type. You can also pass{ suspenseSource: 'preact-suspense' }if you want to avoid the defaultpreact/compatSuspense import.

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 chainsbuiltin:swc-loaderfor 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.tsrxfiles, 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.

React + Bun

Install the compiler, the Bun plugin, and the React runtime:

1 pnpm install @tsrx/react @tsrx/bun-plugin-react react react-dom

Then use the plugin in your Bun build script:

1 import tsrxReact from '@tsrx/bun-plugin-react';
2
3 await Bun.build({
4   entrypoints: ['./src/App.tsrx'],
5   outdir: './dist',
6   target: 'browser',
7   plugins: [tsrxReact()],
8 });

@tsrx/bun-plugin-reactcompiles.tsrxmodules with@tsrx/reactand then hands the generated TSX to Bun's automatic JSX pipeline. Component-local<style>blocks are emitted as sibling virtual CSS modules, so Bun can bundle them without extra loader setup.

Preact + Bun

Install the compiler, the Bun plugin, and Preact:

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

Then use the plugin in your Bun build script:

1 import tsrxPreact from '@tsrx/bun-plugin-preact';
2
3 await Bun.build({
4   entrypoints: ['./src/App.tsrx'],
5   outdir: './dist',
6   target: 'browser',
7   plugins: [tsrxPreact()],
8 });

@tsrx/bun-plugin-preactfollows the same Bun integration shape as React, but targets Preact's automatic JSX runtime and supports overriding the defaultpreact/compatSuspense import with{ suspenseSource: "preact-suspense" }when needed.

Solid + Vite

Install the Solid compiler, its Vite plugin, and the upstreamvite-plugin-solidwhich 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 });

Solid + Rspack

Install the Solid compiler and Rspack plugin:

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

Then add the plugin to your Rspack config:

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

The plugin compiles.tsrxfiles with@tsrx/solidand then chainsbabel-loaderwith Solid's Babel preset for the final JSX transform. In development mode it also enablessolid-refresh/babelautomatically, while per-component<style>blocks still flow through Rspack's built-in CSS module type.

Solid + Bun

Install the Solid compiler, the Bun plugin, and Solid:

1 pnpm install @tsrx/solid @tsrx/bun-plugin-solid solid-js @solidjs/web

Then use the plugin in your Bun build script:

1 import tsrxSolid from '@tsrx/bun-plugin-solid';
2
3 await Bun.build({
4   entrypoints: ['./src/App.tsrx'],
5   outdir: './dist',
6   target: 'browser',
7   plugins: [tsrxSolid()],
8 });

@tsrx/bun-plugin-solidcompiles.tsrxmodules with@tsrx/solidand runs Solid's Babel JSX transform inside the Bun plugin. Component-local<style>blocks are emitted as sibling virtual CSS modules.

Vue + Vite

Install the Vue compiler, its Vite plugin, the Vue runtime, and the Vapor JSX plugin:

1 pnpm install @tsrx/vue @tsrx/vite-plugin-vue vue vue-jsx-vapor

Then wire the Vue TSRX plugin into your Vite config:

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

@tsrx/vite-plugin-vuecompiles.tsrxmodules and performs the downstream Vapor JSX transform. For editor typechecking, setjsxImportSource: "vue-jsx-vapor"in yourtsconfig.json.

Vue + Rspack

Install the Vue compiler, the Rspack plugin, the Vue runtime, and Vue Vapor JSX:

1 pnpm install @tsrx/vue @tsrx/rspack-plugin-vue vue vue-jsx-vapor

Then add the plugin to your Rspack config:

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

@tsrx/rspack-plugin-vuecompiles.tsrxmodules into Vue-flavoured TSX, runs the result throughvue-jsx-vaporand then strips the remaining TypeScript syntax with Rspack's built-in SWC loader. Like the Vite setup, editor typechecking should setjsxImportSource: "vue-jsx-vapor"in yourtsconfig.json.

Vue + Bun

Install the Vue compiler, the Bun plugin, the Vue runtime, and Vue Vapor JSX:

1 pnpm install @tsrx/vue @tsrx/bun-plugin-vue vue vue-jsx-vapor

Then use the plugin in your Bun build script:

1 import tsrxVue from '@tsrx/bun-plugin-vue';
2
3 await Bun.build({
4   entrypoints: ['./src/App.tsrx'],
5   outdir: './dist',
6   target: 'browser',
7   plugins: [tsrxVue()],
8 });

@tsrx/bun-plugin-vuecompiles.tsrxmodules with@tsrx/vueand performs the downstreamvue-jsx-vaportransform inside the Bun plugin itself, so no extra Bun plugin setup is required. Like the Vite and Rspack Vue setups, editor typechecking should setjsxImportSource: "vue-jsx-vapor"in yourtsconfig.json.

Ripple

The Ripple framework ships with TSRX support as standard. If you're using Ripple with@ripple-ts/vite-plugin,.tsrxfiles 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.tsrxfiles 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.prettierrcso Prettier can parse and format.tsrxmodules:

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.tsrxfiles:

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

TypeScript plugin

Install@tsrx/typescript-pluginwhen you want TypeScript itself to understand.tsrxfiles, especially outside the TSRX VS Code extension: other editors,tsserver, and command-linetscworkflows.

1 pnpm install -D @tsrx/typescript-plugin

Then register it in yourtsconfig.json. Keep your existing compiler options and add thepluginsentry undercompilerOptions:

1 {
2   "compilerOptions": {
3     "jsx": "preserve",
4     "plugins": [
5       { "name": "@tsrx/typescript-plugin" }
6     ]
7   }
8 }

The plugin turns TSRX into virtual TypeScript for diagnostics, navigation, completions, and type checking. If you already use the TSRX VS Code extension, this manual setup is optional because the extension runs the language tooling for you.

Command-line type checking

The package also ships atsrx-tscbinary — a drop-intscwrapper that understands.tsrxfiles. Use it for CI type checking and anytscworkflow that needs to see your TSRX modules. Add atypecheckscript to yourpackage.json:

1 {
2   "scripts": {
3     "typecheck": "tsrx-tsc --noEmit"
4   }
5 }

Then runpnpm typecheckto type check the whole project, including.tsrxfiles, without emitting any output. It accepts the same flags astsc.

VS Code

InstallTSRX for VS Codefrom 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.tsrxfile should give you syntax highlighting, diagnostics, go-to-definition, formatting, and the rest of the normal editor loop without extra manual setup.

MCP

Use TSRX MCP when an AI coding tool supports Model Context Protocol. It gives agents current TSRX docs, target detection, project inspection, formatting, compilation, diagnostic advice, and read-only.tsrxfile validation.

Hosted Endpoint

For hosted MCP apps and connectors, use the public TSRX endpoint:

https://mcp.tsrx.dev/mcp

This is the best starting point for ChatGPT web and other clients that connect to an HTTP MCP server instead of launching a local command.

ChatGPT

Addhttps://mcp.tsrx.dev/mcpwhen creating a custom app or connector from ChatGPT developer mode, then select that app from the tools menu in a chat.

Self-hosting

To self-host the endpoint, deploy the monorepo'swebsite-mcpapp anywhere that can run a Node HTTP server and connect remote MCP clients to its/mcproute.

Local MCP Server

For local repository work in Codex, Cursor, Gemini CLI, or Claude Code, install@tsrx/mcpas a stdio MCP server so the tool can inspect your project.

1 {
2   "mcpServers": {
3     "tsrx": {
4       "command": "npx",
5       "args": ["-y", "@tsrx/mcp"]
6     }
7   }
8 }

Codex

For Codex, add the server to~/.codex/config.toml:

1 # ~/.codex/config.toml
2 [mcp_servers.tsrx]
3 command = "npx"
4 args = ["-y", "@tsrx/mcp"]

Gemini CLI

For Gemini CLI, put the samemcpServersJSON in.gemini/settings.jsonfor a project, or~/.gemini/settings.jsonglobally.

Cursor

For Cursor, put the samemcpServersJSON in.cursor/mcp.jsonfor a project, or~/.cursor/mcp.jsonglobally. Cursor Agent andcursor-agentdiscover the configured tools automatically.

Claude Code

For Claude Code, add it directly from the command line:

1 claude mcp add tsrx -- npx -y @tsrx/mcp

In an existing repo, start withinspect-projectso the agent can detect the runtime target, installed TSRX packages, and likely project commands. For generated code, runformat-tsrx,compile-tsrx, and thenanalyze-tsrxwhen diagnostics need syntax-aware advice. For existing files, usevalidate-tsrx-filefor a read-only format, compile, and advice pass.

Next

What's next?

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