Ripple – A TypeScript UI framework that takes the best of React, Solid, Svelte
59 comments
·August 29, 2025markusstrasser
zarzavat
I love JSX and hate HTML template syntax, so there's at least one person.
What I like about JSX is that you can reuse all of the control flow primitives from JS. You have if, for, map, filter, flatMap, etc. if you want a new combinator, just write a function as you would for any other type of data transformation.
I consider this one of the biggest advantages of React compared to the approach of having separate templating and scripting languages.
aatd86
For me it is the opposite. I dislike having imperative constructs pollute my otherwise declarative markup. To each their own I guess.
chrischen
HTML is an implementation detail and JSX is a syntax for describing UI components. For example JSX can be reused across different contexts such as for React Mobile. It just so happens most usage of JSX is used to render HTML so it superficially appears to be writing HTML syntax. But I prefer JSX because it allows me to write UI HTML components as pure functions, without having to syntactically write out actual functions in whatever programming language I'm using.
markusstrasser
Fair enough. IMO the best solution is/was always hiccup (cljs) since it has no extra syntax to the core of the language (vectors/maps)
null
pbowyer
I've never liked JSX, much prefering HTML like (Vue, Svelte), but I do like this template syntax. On reading it makes sense to me in a way that JSX never did, feeling squashed into the 'language'.
pier25
In case people don't know who the author is... Dominic is the original author of Inferno, was part of the React team, and also was a major contributor to Svelte 5 (the runes thing).
tommica
Yeah, seems that he has the credentials for this type of a push
jlukic
This shares a lot of similarities to what I’m doing with new version of Semantic UI.
Components - https://next.semantic-ui.com/components
Templating - https://next.semantic-ui.com/templates
Signals - https://next.semantic-ui.com/reactivity
DOM - https://next.semantic-ui.com/query
API Refs - https://next.semantic-ui.com/api
root_axis
I don't mean to sound reductive, but there's something exhausting about the conceptual approach that necessitates importing array primitives from a package. The react meets svelte concept seems cool, but maybe this particular syntax is just not for me.
h4ch1
The array primitive seems to be a reactive version of an array; which seems to be weird since a basic primitive like an array should be able to be made reactive by default.
Tangentially Svelte also provides some reactive primitives, namely SvelteMap and SvelteSet [0]. But I've never had to use any of them.
ixxie
I noticed Dominic mentioned he is "between roles" in the README; I suppose that implies he left Vercel? Does it mean he is leaving the Svelte team too?
turblety
What's the benefit of this, over just using proxies [1][2] to manage state? You then get to mutate objects however you want without having to use templating.
const state = proxy({
dur: 1,
count: 141
});
const incDur = () => {++state.dur};
const decDur = () => {--state.dur};
const incCount = () => {
++state.count;
setTimeout(incCount, 100 \* state.dur);
};
return (
<div>{state.count}, {state.dur}</div>
);
[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... [2] https://valtio.dev
ivanjermakov
IMHO, taking the best from React, Solid, and Svelt leaves you with Solid.
tobyhinloopen
I feel like these functional GUI renderers are all trying to make JS something it is simply not.
I want to render my view with instances of classes as a model.
motorest
> I feel like these functional GUI renderers are all trying to make JS something it is simply not.
I wholeheartedly agree.
I liked React's support for function components and hooks are quite a treat, but still I think class components are a far better fit for complex components that have logic and state. I'm seeing all this complex logic being expressed as a convoluted mix of hooks and I can't help myself thinking it would be far cleaner to have a class where this logic was handled eith plan old inversion of control.
rhubarbtree
Please keep OO away from web dev. The mess is bad enough and adding OO will only increase coupling.
tobyhinloopen
Calling OO to increase coupling is a weird take in a world where React's "functional components" and similar patterns encapsulate their state and rendering pipeline.
wewewedxfgdf
"Why?" is not made clear.
I'd like to see as the first thing on the README.md why this is different and how it's better suited to the authors preferences.
seivan
[dead]
reactordev
I just want to say, I love it when I get laid off sometimes and I have the time to pursue some of those side project ideas. Kudos. I’ll have to take it for a spin on my next project.
osener
Since this is marked as a departure from HTML and has it's own syntax, I think this is a good point to improve upon JSX.
- Remove curly braces from props and children
<MyComponent name="Joe" onClick=(() => canBeInParanthesis()) />
<div>userName</div>
<div>"Text contents"</div>
const age = 40;
<MyComponent age />/
<MyComponent active=true /> // explicit boolean attributespara_parolu
Or (hear me out) we don’t need any DSL that doesn’t add anything while making code just more verbose compared to Js/ts.
emmanueloga_
How about... inlining children:
const age = 40;
const children = [<div ~ "Moe" />, <div ~ "Larry"/>, <div ~ "Curly" />];
return <div age ~ children />;
h4ch1
Honestly, from a person who has been part of both React and Svelte, this feels like the (for the lack of a better word) bastard child of both. It looks like a very opinionated, mish-mash of Svelte and React.
Kudos to the dev for working towards realizing their ideas, but Svelte and Solid have essentially solved front-end frameworks for the better part. People still hung up on React happily use Next in prod, people who want simple SSG go towards Astro or Hugo, people who use Svelte/Solid will not switch because this simply doesn't seem to improve upon anything that either do, so I really don't see what this solves in the slightest.
I very happily use Svelte for work, for my personal projects because of fine grained reactivity through signals, no bs syntax that feels like writing "just" HTML & Typescript, mature tooling and great performance. I have no interest switching to something that makes me feel like I'm stuck in the middle of a better React and a worse Svelte.
It's great people experiment. Yet, after a quick glance the framework seems to break expected semantics for no gain? For example: the "component" construct auto-renders the JSX within the brackets instead of being a function that "returns a view as value" (if I understood correctly). I'm cool with breaking the "f(x)=>UI" but what for? The TS and VS Code integration is all fine and good but what's the gain of using JSX (again) instead of the beloved HTML-like Svelte markup? Have people ever loved JSX? Nostalgia maybe? Again, I'm all for tearing down the house but shouldn't we get more elegance or expressive semantics in return?
Still, great he did it I just hope he'll be bolder next time! Of the 7 mentioned features 3-4 are not actually about the language but minor tooling hook ins (prettier, VSCode,) ... maybe that's the wrong focus.
Either way, the strong similarity with other JS/TS frameworks (semantics & syntax) suggests that for really new ideas the community should look elsewhere? Perhaps Clojurescript or Laravel (PhP) ...