diff --git a/analysis/analysers/parsers/UnifiedParser/src/test/kotlin/de/maibornwolff/codecharta/analysers/parsers/unified/metriccollectors/TsxCollectorTest.kt b/analysis/analysers/parsers/UnifiedParser/src/test/kotlin/de/maibornwolff/codecharta/analysers/parsers/unified/metriccollectors/TsxCollectorTest.kt
new file mode 100644
index 0000000000..080e921cef
--- /dev/null
+++ b/analysis/analysers/parsers/UnifiedParser/src/test/kotlin/de/maibornwolff/codecharta/analysers/parsers/unified/metriccollectors/TsxCollectorTest.kt
@@ -0,0 +1,681 @@
+package de.maibornwolff.codecharta.analysers.parsers.unified.metriccollectors
+
+import de.maibornwolff.codecharta.analysers.parsers.unified.metricnodetypes.AvailableFileMetrics
+import org.assertj.core.api.Assertions
+import org.junit.jupiter.api.BeforeEach
+import org.junit.jupiter.api.Test
+import org.treesitter.TSParser
+import org.treesitter.TreeSitterTypescript
+import java.io.File
+
+class TsxCollectorTest {
+    private var parser = TSParser()
+    private val collector = TypescriptCollector()
+
+    @BeforeEach
+    fun setUp() {
+        parser.setLanguage(TreeSitterTypescript())
+    }
+
+    private fun createTestFile(content: String): File {
+        val tempFile = File.createTempFile("testFile", ".tsx")
+        tempFile.writeText(content)
+        tempFile.deleteOnExit()
+        return tempFile
+    }
+
+    @Test
+    fun `should count functional component with JSX for number of functions`() {
+        // Arrange
+        val fileContent = """
+            import React from 'react';
+
+            const MyComponent: React.FC = () => {
+                return <div>Hello World</div>;
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.NUMBER_OF_FUNCTIONS.metricName]).isEqualTo(1.0)
+    }
+
+    @Test
+    fun `should count function component with typed props for number of functions`() {
+        // Arrange
+        val fileContent = """
+            interface Props {
+                name: string;
+                age: number;
+            }
+
+            function UserCard({ name, age }: Props) {
+                return (
+                    <div className="user-card">
+                        <h2>{name}</h2>
+                        <p>Age: {age}</p>
+                    </div>
+                );
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.NUMBER_OF_FUNCTIONS.metricName]).isEqualTo(1.0)
+    }
+
+    @Test
+    fun `should count class component with render method for number of functions`() {
+        // Arrange
+        val fileContent = """
+            import React, { Component } from 'react';
+
+            interface State {
+                count: number;
+            }
+
+            class Counter extends Component<{}, State> {
+                constructor(props: {}) {
+                    super(props);
+                    this.state = { count: 0 };
+                }
+
+                increment() {
+                    this.setState({ count: this.state.count + 1 });
+                }
+
+                render() {
+                    return (
+                        <div>
+                            <p>Count: {this.state.count}</p>
+                            <button onClick={() => this.increment()}>Increment</button>
+                        </div>
+                    );
+                }
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.NUMBER_OF_FUNCTIONS.metricName]).isEqualTo(3.0)
+    }
+
+    @Test
+    fun `should count complexity with JSX ternary operators`() {
+        // Arrange
+        val fileContent = """
+            const ConditionalComponent: React.FC<{ isLoading: boolean }> = ({ isLoading }) => {
+                return (
+                    <div>
+                        {isLoading ? <Spinner /> : <Content />}
+                    </div>
+                );
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.COMPLEXITY.metricName]).isEqualTo(2.0) //TODO not counting ternary in div
+    }
+
+    @Test
+    fun `should count complexity with JSX logical AND operators`() {
+        // Arrange
+        val fileContent = """
+            const OptionalComponent = ({ showMessage }: { showMessage: boolean }) => {
+                return (
+                    <div>
+                        {showMessage && <p>Message is visible</p>}
+                        {!showMessage && <p>Message is hidden</p>}
+                    </div>
+                );
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.COMPLEXITY.metricName]).isEqualTo(3.0) //TODO: correctly counts && even within errors
+    }
+
+    @Test
+    fun `should count complexity with multiple conditional renders`() {
+        // Arrange
+        val fileContent = """
+            const StatusDisplay = ({ status }: { status: string }) => {
+                if (status === 'loading') {
+                    return <Spinner />;
+                } else if (status === 'error') {
+                    return <Error />;
+                } else if (status === 'success') {
+                    return <Success />;
+                }
+                return <Idle />;
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.COMPLEXITY.metricName]).isEqualTo(4.0)
+    }
+
+    @Test
+    fun `should count complexity with switch statement for JSX rendering`() {
+        // Arrange
+        val fileContent = """
+            const SwitchComponent = ({ type }: { type: string }) => {
+                switch (type) {
+                    case 'primary':
+                        return <PrimaryButton />;
+                    case 'secondary':
+                        return <SecondaryButton />;
+                    case 'danger':
+                        return <DangerButton />;
+                    default:
+                        return <DefaultButton />;
+                }
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.COMPLEXITY.metricName]).isEqualTo(5.0) //TODO: parsing of switch statements is incorrect after first <
+    }
+
+    @Test
+    fun `should count JSX with fragments and multiple children`() {
+        // Arrange
+        val fileContent = """
+            const FragmentComponent = () => {
+                return (
+                    <>
+                        <Header />
+                        <main>
+                            <Content />
+                        </main>
+                        <Footer />
+                    </>
+                );
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.NUMBER_OF_FUNCTIONS.metricName]).isEqualTo(1.0)
+    }
+
+    @Test
+    fun `should count hook usage with complexity`() {
+        // Arrange
+        val fileContent = """
+            import { useState, useEffect } from 'react';
+
+            const HookComponent = () => {
+                const [count, setCount] = useState(0);
+                const [data, setData] = useState<string | null>(null);
+
+                useEffect(() => {
+                    if (count > 10) {
+                        fetchData();
+                    }
+                }, [count]);
+
+                const fetchData = async () => {
+                    try {
+                        const response = await fetch('/api/data');
+                        setData(await response.text());
+                    } catch (error) {
+                        console.error(error);
+                    }
+                };
+
+                return <div>{data ?? 'Loading...'}</div>;
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.NUMBER_OF_FUNCTIONS.metricName]).isEqualTo(3.0) //TODO: directly after the import statement is an error node and everything after is wonky
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.COMPLEXITY.metricName]).isEqualTo(3.0)
+    }
+
+    @Test
+    fun `should count generic component with TypeScript types`() {
+        // Arrange
+        val fileContent = """
+            interface ListProps<T> {
+                items: T[];
+                renderItem: (item: T) => React.ReactNode;
+            }
+
+            function List<T>({ items, renderItem }: ListProps<T>) {
+                return (
+                    <ul>
+                        {items.map((item, index) => (
+                            <li key={index}>{renderItem(item)}</li>
+                        ))}
+                    </ul>
+                );
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.NUMBER_OF_FUNCTIONS.metricName]).isEqualTo(1.0)
+    }
+
+    @Test
+    fun `should count JSX with event handlers for complexity`() {
+        // Arrange
+        val fileContent = """
+            const Form = () => {
+                const handleSubmit = (e: React.FormEvent) => {
+                    e.preventDefault();
+                    if (isValid()) {
+                        submit();
+                    }
+                };
+
+                const isValid = () => {
+                    return name.length > 0 && email.includes('@');
+                };
+
+                return (
+                    <form onSubmit={handleSubmit}>
+                        <input type="text" />
+                        <button type="submit">Submit</button>
+                    </form>
+                );
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.NUMBER_OF_FUNCTIONS.metricName]).isEqualTo(3.0)
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.COMPLEXITY.metricName]).isEqualTo(5.0)
+    }
+
+    @Test
+    fun `should count JSX comments and TypeScript comments for comment_lines`() {
+        // Arrange
+        val fileContent = """
+            /**
+             * This is a JSDoc comment
+             * describing the component
+             */
+            const CommentedComponent = () => {
+                // This is a line comment
+                return (
+                    <div>
+                        {/* This is a JSX comment */}
+                        <p>Hello</p>
+                        {/* Another JSX comment
+                            spanning multiple lines */}
+                    </div>
+                );
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.COMMENT_LINES.metricName]).isEqualTo(8.0)
+    }
+
+    @Test
+    fun `should not include comments or empty lines for rloc with JSX`() {
+        // Arrange
+        val fileContent = """
+            const Component = () => {
+                // comment
+
+
+                return <div>Content</div>;
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.REAL_LINES_OF_CODE.metricName]).isEqualTo(3.0)
+    }
+
+    @Test
+    fun `should count lines of code including JSX for loc`() {
+        // Arrange
+        val fileContent = """
+            const Component = () => {
+                // comment
+
+
+                return <div>Content</div>;
+            }
+        """.trimIndent() + "\n"
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.LINES_OF_CODE.metricName]).isEqualTo(6.0)
+    }
+
+    @Test
+    fun `should handle nested JSX elements with complex structure`() {
+        // Arrange
+        val fileContent = $$"""
+            const NestedComponent = ({ items }: { items: string[] }) => {
+                return (
+                    <div className="container">
+                        <header>
+                            <h1>Title</h1>
+                            <nav>
+                                {items.length > 0 && (
+                                    <ul>
+                                        {items.map((item, idx) => (
+                                            <li key={idx}>
+                                                <a href={`#${item}`}>{item}</a>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                )}
+                            </nav>
+                        </header>
+                    </div>
+                );
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.NUMBER_OF_FUNCTIONS.metricName]).isEqualTo(1.0)
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.COMPLEXITY.metricName]).isEqualTo(3.0) //TODO: complexity within nesting not counted
+    }
+
+    @Test
+    fun `should count parameters correctly for React components`() {
+        // Arrange
+        val fileContent = """
+            function NoProps() {
+                return <div>No props</div>;
+            }
+
+            function OneParam({ title }: { title: string }) {
+                return <h1>{title}</h1>;
+            }
+
+            function TwoParams({ name, age }: { name: string; age: number }) {
+                return <div>{name} is {age}</div>;
+            }
+
+            function ThreeParams({ x, y, z }: { x: number; y: number; z: number }) {
+                return <div>{x + y + z}</div>;
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes["max_parameters_per_function"]).isEqualTo(1.0)
+        Assertions.assertThat(result.attributes["min_parameters_per_function"]).isEqualTo(0.0)
+        Assertions.assertThat(result.attributes["mean_parameters_per_function"]).isEqualTo(0.5)
+        Assertions.assertThat(result.attributes["median_parameters_per_function"]).isEqualTo(0.5) //TODO: does not correctly count multiple react parameters
+    }
+
+    @Test
+    fun `should correctly calculate complexity per function with JSX conditionals`() {
+        // Arrange
+        val fileContent = """
+            function NoComplexity() {
+                return <div>Simple</div>;
+            }
+
+            function WithConditionals({ show, isAdmin }: { show: boolean; isAdmin: boolean }) {
+                return (
+                    <div>
+                        {show && <Content />}
+                        {isAdmin ? <AdminPanel /> : <UserPanel />}
+                    </div>
+                );
+            }
+
+            function WithLoop({ items }: { items: string[] }) {
+                for (const item of items) {
+                    console.log(item);
+                }
+                return <ul>{items.map(i => <li>{i}</li>)}</ul>;
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes["max_complexity_per_function"]).isEqualTo(2.0) //TODO: not counting ternary operator
+        Assertions.assertThat(result.attributes["min_complexity_per_function"]).isEqualTo(0.0)
+        Assertions.assertThat(result.attributes["mean_complexity_per_function"]).isEqualTo(1.0)
+        Assertions.assertThat(result.attributes["median_complexity_per_function"]).isEqualTo(1.0)
+    }
+
+    @Test
+    fun `should count JSX spread attributes and props`() {
+        // Arrange
+        val fileContent = $$"""
+            interface ButtonProps {
+                variant: 'primary' | 'secondary';
+                onClick: () => void;
+            }
+
+            const Button = ({ variant, ...rest }: ButtonProps & React.HTMLProps<HTMLButtonElement>) => {
+                return (
+                    <button
+                        className={`btn btn-${variant}`}
+                        {...rest}
+                    >
+                        Click me
+                    </button>
+                );
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.NUMBER_OF_FUNCTIONS.metricName]).isEqualTo(1.0)
+    }
+
+    @Test
+    fun `should handle JSX with template literals and expressions`() {
+        // Arrange
+        val fileContent = $$"""
+            const StyledComponent = ({ color, size }: { color: string; size: number }) => {
+                const style = {
+                    color: color,
+                    fontSize: `${size}px`
+                };
+
+                return (
+                    <div style={style}>
+                        {`This text is ${color} and ${size}px`}
+                    </div>
+                );
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.NUMBER_OF_FUNCTIONS.metricName]).isEqualTo(1.0)
+    }
+
+    @Test
+    fun `should handle JSX with self-closing tags`() {
+        // Arrange
+        val fileContent = """
+            const SelfClosingComponent = () => {
+                return (
+                    <div>
+                        <img src="image.jpg" alt="description" />
+                        <input type="text" placeholder="Enter text" />
+                        <br />
+                        <hr />
+                    </div>
+                );
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.NUMBER_OF_FUNCTIONS.metricName]).isEqualTo(1.0)
+    }
+
+    @Test
+    fun `should count nullish coalescing in JSX expressions for complexity`() {
+        // Arrange
+        val fileContent = """
+            const Component = ({ value }: { value?: string }) => {
+                return <div>{value ?? 'Default Value'}</div>;
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.COMPLEXITY.metricName]).isEqualTo(1.0)
+    }
+
+    @Test
+    fun `should correctly calculate rloc per function with JSX`() {
+        // Arrange
+        val fileContent = """
+            const SmallComponent = () => {
+                return <div>Small</div>;
+            }
+
+            const MediumComponent = () => {
+                // comment
+                const value = 42;
+                return <div>{value}</div>;
+            }
+
+            const LargeComponent = () => {
+                const [state, setState] = useState(0);
+
+                useEffect(() => {
+                    setState(1);
+                }, []);
+
+                return (
+                    <div>
+                        {state}
+                    </div>
+                );
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes["max_rloc_per_function"]).isEqualTo(7.0)
+        Assertions.assertThat(result.attributes["min_rloc_per_function"]).isEqualTo(1.0)
+        Assertions.assertThat(result.attributes["mean_rloc_per_function"]).isEqualTo(3.33)
+        Assertions.assertThat(result.attributes["median_rloc_per_function"]).isEqualTo(2.0)
+    }
+
+    @Test
+    fun `should handle complex JSX with multiple conditional rendering patterns`() {
+        // Arrange
+        val fileContent = """
+            const ComplexComponent = ({
+                isLoading,
+                hasError,
+                data
+            }: {
+                isLoading: boolean;
+                hasError: boolean;
+                data: string[] | null
+            }) => {
+                if (isLoading) return <Spinner />;
+                if (hasError) return <Error />;
+                if (!data) return null;
+
+                return (
+                    <div>
+                        {data.length > 0 ? (
+                            <ul>
+                                {data.map((item, idx) => (
+                                    <li key={idx}>
+                                        {item.length > 10 ? item.substring(0, 10) + '...' : item}
+                                    </li>
+                                ))}
+                            </ul>
+                        ) : (
+                            <p>No data available</p>
+                        )}
+                    </div>
+                );
+            }
+        """.trimIndent()
+        val input = createTestFile(fileContent)
+
+        // Act
+        val result = collector.collectMetricsForFile(input)
+
+        // Assert
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.NUMBER_OF_FUNCTIONS.metricName]).isEqualTo(1.0)
+        Assertions.assertThat(result.attributes[AvailableFileMetrics.COMPLEXITY.metricName]).isEqualTo(6.0)
+    }
+}
diff --git a/plans/plan_unifiedparser_tsx_jsx.md b/plans/plan_unifiedparser_tsx_jsx.md
new file mode 100644
index 0000000000..c1ad973b33
--- /dev/null
+++ b/plans/plan_unifiedparser_tsx_jsx.md
@@ -0,0 +1,173 @@
+---
+name: Add TSX/JSX Language Support to UnifiedParser
+issue: #4360
+state: todo
+version: 1.0
+---
+
+## Goal
+
+Add TSX (TypeScript with JSX) and JSX (JavaScript with JSX) language support to the UnifiedParser by utilizing the existing tree-sitter-typescript library which provides separate TSX and TypeScript grammars, creating TSX/JSX-specific node type mappings where needed, and ensuring all supported metrics are calculated correctly for .tsx and .jsx files.
+
+## Tasks
+
+### 1. Add TSX and JSX FileExtension Enums
+
+Add TSX and JSX entries to the FileExtension enum to recognize .tsx and .jsx files.
+
+- Edit `analysis/model/src/main/kotlin/de/maibornwolff/codecharta/serialization/FileExtension.kt`
+- Add `TSX(".tsx")` entry following the pattern of other languages
+- Add `JSX(".jsx")` entry following the pattern of other languages
+- Place alphabetically (TSX after TYPESCRIPT, JSX after JAVASCRIPT)
+
+### 2. Create TsxNodeTypes Class
+
+Create a new TsxNodeTypes class that implements the MetricNodeTypes interface. This class defines the tree-sitter node types specific to TSX that correspond to each metric. TSX grammar extends TypeScript grammar with JSX elements.
+
+- Create `TsxNodeTypes.kt` in `analysis/analysers/parsers/UnifiedParser/src/main/kotlin/de/maibornwolff/codecharta/analysers/parsers/unified/metricnodetypes/`
+- Can initially inherit from TypescriptNodeTypes or reuse the same node type definitions
+- Implement all required node type definitions (same as TypeScript initially):
+  - `logicComplexityNodeTypes`: if, loops, ternary, switch/case, catch, logical operators
+  - `functionComplexityNodeTypes`: functions, arrow functions, methods, generators
+  - `commentLineNodeTypes`: single-line comments, multi-line comments
+  - `numberOfFunctionsNodeTypes`: function declarations, method definitions
+  - `functionBodyNodeTypes`: statement blocks
+  - `functionParameterNodeTypes`: required parameters
+- Research TSX's tree-sitter grammar to identify if any JSX-specific node types need special handling (e.g., JSX elements, JSX expressions)
+- Note: JSX elements should generally not count as complexity unless they contain logic (conditional rendering, etc.)
+
+### 3. Create JsxNodeTypes Class
+
+Create a new JsxNodeTypes class that implements the MetricNodeTypes interface. JSX grammar extends JavaScript grammar with JSX elements.
+
+- Create `JsxNodeTypes.kt` in `analysis/analysers/parsers/UnifiedParser/src/main/kotlin/de/maibornwolff/codecharta/analysers/parsers/unified/metricnodetypes/`
+- Can initially inherit from JavascriptNodeTypes or reuse similar definitions
+- Follow the same pattern as TypeScript/TSX relationship
+- Consider JSX-specific constructs similar to TSX
+
+### 4. Create TsxCollector Class
+
+Create a minimal TsxCollector class that extends MetricCollector and uses the TreeSitterTsx parser with TsxNodeTypes.
+
+- Create `TsxCollector.kt` in `analysis/analysers/parsers/UnifiedParser/src/main/kotlin/de/maibornwolff/codecharta/analysers/parsers/unified/metriccollectors/`
+- Use TreeSitterTsx() as the tree-sitter language parser (separate from TreeSitterTypescript)
+- Pass TsxNodeTypes() as the node type provider
+- Follow the simple pattern from TypescriptCollector
+- Note: The existing tree-sitter-typescript library already provides both TreeSitterTypescript and TreeSitterTsx classes
+
+### 5. Create JsxCollector Class
+
+Create a minimal JsxCollector class that extends MetricCollector and uses the TreeSitterJsx parser with JsxNodeTypes.
+
+- Create `JsxCollector.kt` in `analysis/analysers/parsers/UnifiedParser/src/main/kotlin/de/maibornwolff/codecharta/analysers/parsers/unified/metriccollectors/`
+- Research if tree-sitter-javascript provides a separate JSX parser or if JavaScript parser handles JSX
+- If separate parser exists: use TreeSitterJsx(), otherwise may need to reuse TreeSitterJavascript()
+- Pass JsxNodeTypes() as the node type provider
+- May need to investigate if a separate tree-sitter-jsx dependency is required
+
+### 6. Register TSX and JSX in AvailableCollectors
+
+Register the new TsxCollector and JsxCollector in the AvailableCollectors enum to make them accessible to the parser.
+
+- Edit `analysis/analysers/parsers/UnifiedParser/src/main/kotlin/de/maibornwolff/codecharta/analysers/parsers/unified/metriccollectors/AvailableCollectors.kt`
+- Add `TSX(FileExtension.TSX, ::TsxCollector)` entry
+- Add `JSX(FileExtension.JSX, ::JsxCollector)` entry
+- Place alphabetically
+
+### 7. Create Test Files and Tests
+
+Create comprehensive tests for the TsxCollector and JsxCollector following the TDD approach and existing test patterns.
+
+- Create test TSX sample file in `analysis/analysers/parsers/UnifiedParser/src/test/resources/languageSamples/tsxSample.tsx` with examples of:
+  - React components (function components, class components)
+  - JSX elements and fragments
+  - Conditional rendering (ternary, &&, etc.)
+  - TypeScript types and interfaces in TSX context
+  - Hooks and arrow functions
+  - Comments (single-line, multi-line, JSDoc)
+- Create test JSX sample file in `analysis/analysers/parsers/UnifiedParser/src/test/resources/languageSamples/jsxSample.jsx` with similar React/JSX patterns
+- Create `TsxCollectorTest.kt` in `analysis/analysers/parsers/UnifiedParser/src/test/kotlin/de/maibornwolff/codecharta/analysers/parsers/unified/metriccollectors/`
+- Create `JsxCollectorTest.kt` in same directory
+- Follow the Arrange-Act-Assert pattern with clear comments
+- Test specific TSX/JSX constructs:
+  - JSX elements don't inflate complexity unnecessarily
+  - Conditional rendering (ternary in JSX) counts correctly
+  - Arrow functions in components are counted
+  - TypeScript types in TSX don't break parsing
+  - Comments within JSX are counted correctly
+- Test all standard metrics: complexity, logic complexity, comment lines, functions, LOC, RLOC
+- Test per-function metrics: parameters, complexity, RLOC (max/min/mean/median)
+
+### 8. Update Documentation
+
+Update the UnifiedParser README to include TSX and JSX in the supported languages table.
+
+- Edit `analysis/analysers/parsers/UnifiedParser/README.md`
+- Add row to "Supported Languages" table: `| TSX | .tsx |`
+- Add row to "Supported Languages" table: `| JSX | .jsx |`
+- Place alphabetically
+- Add note explaining that TSX/JSX use the same tree-sitter-typescript library but separate grammars
+
+### 9. Verify and Run Tests
+
+Run all tests to ensure TSX/JSX support works correctly and doesn't break existing functionality.
+
+- Run UnifiedParser tests: `cd analysis && ./gradlew :analysers:parsers:UnifiedParser:test`
+- Run integration tests if applicable: `./gradlew integrationTest`
+- Fix any failing tests or metric calculation issues
+- If tree-sitter node types are incorrect, adjust TsxNodeTypes/JsxNodeTypes based on test results
+- Ensure all new tests pass and existing tests remain green
+- Verify TypeScript and JavaScript tests still pass (no regression)
+
+## Steps
+
+- [ ] Complete Task 1: Add TSX and JSX to FileExtension enum
+- [ ] Complete Task 2: Create TsxNodeTypes class with JSX-aware node type definitions
+- [ ] Complete Task 3: Create JsxNodeTypes class
+- [ ] Complete Task 4: Create TsxCollector class using TreeSitterTsx
+- [ ] Complete Task 5: Create JsxCollector class (research JSX parser availability first)
+- [ ] Complete Task 6: Register TsxCollector and JsxCollector in AvailableCollectors enum
+- [ ] Complete Task 7: Create test sample files and comprehensive TsxCollectorTest and JsxCollectorTest
+- [ ] Complete Task 8: Update README.md documentation
+- [ ] Complete Task 9: Run and verify all tests pass
+
+## Review Feedback Addressed
+
+(To be filled in after code review)
+
+## Notes
+
+- **Existing Dependency**: The tree-sitter-typescript library (version 0.23.2) is already included in the project and provides both `TreeSitterTypescript()` and `TreeSitterTsx()` parsers. No new dependency addition is required for TSX support.
+
+- **Separate Grammars**: TSX and TypeScript are treated as separate grammars in tree-sitter-typescript because TypeScript's type assertion syntax (`<Type>value`) conflicts with JSX element syntax (`<Component />`). In TSX files, the type assertion syntax is disabled in favor of the `as` syntax (`value as Type`).
+
+- **JSX Parser Research Needed**: Need to verify if tree-sitter-javascript provides a separate JSX parser or if the JavaScript parser handles JSX natively. May need to check:
+  - Maven Central for tree-sitter-jsx or tree-sitter-javascript-jsx
+  - tree-sitter-javascript documentation
+  - Potentially use tree-sitter-typescript's TSX parser for JSX files as well
+
+- **TSX/JSX-Specific Considerations**:
+  - JSX elements (`<div>`, `<Component />`) should not inflate complexity metrics
+  - JSX expressions (`{variable}`, `{function()}`) should be counted normally
+  - Conditional rendering patterns (ternary, `&&`, `||` in JSX) should count as logic complexity
+  - Arrow functions used as component definitions should count as functions
+  - TypeScript type annotations in TSX should not break parsing
+  - Comments within JSX blocks (`{/* comment */}`) should be counted
+
+- **Testing Strategy**: Follow TDD (Red → Green → Refactor):
+  1. Write failing test for specific TSX/JSX construct
+  2. Implement minimum node type mapping to pass
+  3. Run all tests
+  4. Refactor if needed
+  5. Commit when all tests pass
+
+- **Code Quality**: Follow project conventions:
+  - Use block-body style with braces for functions
+  - Add clear section comments in node type classes
+  - Use descriptive variable names
+  - No magic strings - extract constants if needed
+  - Ensure all warnings are resolved
+
+- **Node Type Reuse**: TsxNodeTypes can likely inherit from or delegate to TypescriptNodeTypes, and JsxNodeTypes can do the same with JavascriptNodeTypes. Only override if JSX-specific handling is needed.
+
+- **Future Enhancements**: If initial implementation doesn't handle all JSX constructs perfectly (e.g., JSX fragments, spread attributes), document known limitations in README.md. These can be addressed in future iterations.