Invite-Only Early Access — Think Throo GitHub App is currently invite-only. Request access here.
2025September

Ripple, the elegant TypeScript UI framework.

In this article, we review Ripple, the elegant TypeScript UI framework. We will look at:

  1. What is Ripple?

  2. Features

  3. Getting started

Press enter or click to view image in full size

What is Ripple?

Ripple is a TypeScript UI framework that takes the best parts of React, Solid and Svelte and combines them into one package.

Currently, this project is still in early development, and should not be used in production.

Note from the Ripple’s author, @trueadm:

I wrote Ripple as a love letter for frontend web — and this is largely a project that I built in less than a week, so it’s very raw.

Personally, I (@trueadm) have been involved in some truly amazing frontend frameworks along their journeys — from Inferno, where it all began, to React and the journey of React Hooks, to creating Lexical, to Svelte 5 and its new compiler and signal-based reactivity runtime. Along that journey, I collected ideas, and intriguing thoughts that may or may not pay off. Given my time between roles, I decided it was the best opportunity to try them out, and for open source to see what I was cooking.

Ripple was designed to be a JS/TS-first framework, rather than HTML-first. Ripple modules have their own .ripple extension and these modules fully support TypeScript. By introducing a new extension, it affords Ripple to invent its own superset language, that plays really nicely with TypeScript and JSX, but with a few interesting touches. In my experience, this has led to better DX not only for humans, but also for LLMs.

Right now, there will be plenty of bugs, things just won’t work either and you’ll find TODOs everywhere. At this stage, Ripple is more of an early alpha version of something that might be, rather than something you should try and adopt. If anything, maybe some of the ideas can be shared and incubated back into other frameworks. There’s also a lot of similarities with Svelte 5, and that’s not by accident, that’s because of my recent time working on Svelte 5.

If you’d like to know more, join the Ripple Discord.

Features

  • Reactive State Management: Built-in reactivity with $ prefixed variables and object properties

  • Component-Based Architecture: Clean, reusable components with props and children

  • JSX-like Syntax: Familiar templating with Ripple-specific enhancements

  • Performance: Fine-grain rendering, with industry leading performance and memory usage

  • TypeScript Support: Full TypeScript integration with type checking

  • VSCode Integration: Rich editor support with diagnostics, syntax highlighting, and IntelliSense

  • Prettier Support: Full Prettier formatting support for .ripple modules

Getting started

Below is a simple code snippet provided in the Ripple’s Readme.

npx degit trueadm/ripple/templates/basic my-app
cd my-app
npm i # or yarn or pnpm
npm run dev # or yarn or pnpm

Learn more about Key concepts.

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI-generated code that works but nobody understands? 

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced. 

Get started for free —thinkthroo.com

References:

  1. https://github.com/trueadm/ripple/tree/main

  2. https://github.com/trueadm/ripple/tree/main?tab=readme-ov-file#key-concepts