--- title: This New Syntax Wants To Replace JSX | daily.dev description: TSRX is a new syntax and compiler layer that aims to replace JSX by bringing normal JavaScript control flow back into UI components. Key features include... canonical: https://daily.dev/posts/afvikzjqn twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: This New Syntax Wants To Replace JSX | daily.dev og:description: TSRX is a new syntax and compiler layer that aims to replace JSX by bringing normal JavaScript control flow back into UI components. Key features include... og:url: https://daily.dev/posts/afvikzjqn og:image: https://api.daily.dev/og/posts/AFviKzJqN.png og:image:alt: Post cover image og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # This New Syntax Wants To Replace JSX **[Better Stack](https://daily.dev/sources/betterstack)** · [@jollycoding](https://daily.dev/jollycoding) · 206 upvotes · 17 comments ## Summary TSRX is a new syntax and compiler layer that aims to replace JSX by bringing normal JavaScript control flow back into UI components. Key features include statement-based rendering (no return statement needed), native if/switch/for-of for conditionals and list rendering, try/catch for error and async boundaries, scoped CSS styles, lexical scoping per block, lazy destructuring for reactive frameworks, and prop shorthand. It compiles to React, Solid, Vue, and Ripple. The author finds several features appealing but is skeptical about adoption given AI tooling's familiarity with JSX and the added compiler magic on top of React. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@jrmemeichelbeck** · 22 upvotes > Well the advantage of JSX is that is... just JS **@nikitapavlenko** · 7 upvotes > Interesting. However, new syntax I consider as a drawback. Making up new syntax constructions might feel as an overkill. For AI it is easier to use TSX or JSX, since there are more than enough jsx and TSX code were written. But I do enjoy this - straightforward and seamless. Cool! **@manhvu** · 6 upvotes > another day, another way to optimize JS **@jessyco** · 4 upvotes > So about that..., Angular's been great. **@dhugo** · 3 upvotes > It gives off a kind of "Angular vibe", but the principle of having the whole component a jumble mess of HTML and JS makes me think it would be awful to use TSRX for complex components, where the separation between functions and actual rendering seems essential in my opinion 🤔 ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#typescript](https://daily.dev/tags/typescript), [#jsx](https://daily.dev/tags/jsx) [View this post on daily.dev](https://daily.dev/posts/afvikzjqn) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/afvikzjqn","headline":"This New Syntax Wants To Replace JSX","text":"Shared: This New Syntax Wants To Replace JSX","url":"https://daily.dev/posts/afvikzjqn","datePublished":"2026-05-06T21:07:44.584Z","dateModified":"2026-05-06T21:08:35.185Z","author":{"@type":"Person","name":"James","url":"https://daily.dev/jollycoding","image":"https://avatars.githubusercontent.com/u/5064896?v=4","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":3010}},"image":"https://media.daily.dev/image/upload/s--qPvKM23u--/f_auto/v1722860399/public/Placeholder%2009","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":206},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":17}],"sharedContent":{"@type":"WebPage","url":"https://api.daily.dev/r/C1Ac7ESji"},"comment":[{"@type":"Comment","text":"Well the advantage of JSX is that is… just JS","datePublished":"2026-05-07T06:18:56.331Z","url":"https://daily.dev/posts/AFviKzJqN#c-JOUGKIIpu","author":{"@type":"Person","name":"Jérôme Meichelbeck","url":"https://daily.dev/jrmemeichelbeck","image":"https://media.daily.dev/image/upload/s--JY0uVUtQ--/f_auto/v1727947731/avatars/avatar_BSQRVgqqRVVoABG3XWfb4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":22}},{"@type":"Comment","text":"Interesting. However, new syntax I consider as a drawback. Making up new syntax constructions might feel as an overkill. For AI it is easier to use TSX or JSX, since there are more than enough jsx and TSX code were written. But I do enjoy this - straightforward and seamless. Cool!","datePublished":"2026-05-07T07:40:59.679Z","url":"https://daily.dev/posts/AFviKzJqN#c-uBCtQS5WA","author":{"@type":"Person","name":"Nikita Pavlenko","url":"https://daily.dev/nikitapavlenko","image":"https://avatars.githubusercontent.com/u/34541667?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":7}},{"@type":"Comment","text":"another day, another way to optimize JS","datePublished":"2026-05-07T09:41:52.107Z","url":"https://daily.dev/posts/AFviKzJqN#c-IHewN6g5f","author":{"@type":"Person","name":"Manh Vu","url":"https://daily.dev/manhvu","image":"https://media.daily.dev/image/upload/s--5d8jwUCj--/f_auto,q_auto/v1702869855/avatars/avatar_akX4XqYkudufgz6UDxJv7"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":6}},{"@type":"Comment","text":"So about that…, Angular’s been great.","datePublished":"2026-05-07T14:49:49.416Z","url":"https://daily.dev/posts/AFviKzJqN#c-RWLPwhxHZ","author":{"@type":"Person","name":"jessy.co","url":"https://daily.dev/jessyco","image":"https://avatars.githubusercontent.com/u/1643234?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"It gives off a kind of “Angular vibe”, but the principle of having the whole component a jumble mess of HTML and JS makes me think it would be awful to use TSRX for complex components, where the separation between functions and actual rendering seems essential in my opinion 🤔","datePublished":"2026-05-09T15:41:26.727Z","url":"https://daily.dev/posts/AFviKzJqN#c-wiDCbnMsl","author":{"@type":"Person","name":"Hugo D","url":"https://daily.dev/dhugo","image":"https://media.daily.dev/image/upload/s--A6Zn2D0s--/f_auto/v1731327154/avatars/avatar_ACgVN8c3n6ld6p2rsYRfz"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/betterstack","name":"Better Stack"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Better Stack","item":"https://daily.dev/squads/betterstack"},{"@type":"ListItem","position":3,"name":"This New Syntax Wants To Replace JSX"}]} ```