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. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

Want to learn from open-source? Solve challenges inspired by open-source projects.

References:

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

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