[](https://github.com/Ripple-TS/ripple/actions/workflows/ci.yml)
[](https://discord.gg/JBF2ySrh2W)
[](https://stackblitz.com/github/Ripple-TS/ripple/tree/main/templates/basic)
# Ripple TS
Ripple is a TypeScript-first UI framework built around `.tsrx` files, fine-grained
reactivity, scoped styles, and a small runtime. It pairs the authoring feel of JSX
with template-native control flow and TypeScript setup that can live right beside
the UI it feeds.
Created by [@trueadm](https://github.com/trueadm), who has contributed to
[Inferno](https://github.com/infernojs/inferno),
[React](https://github.com/facebook/react),
[Lexical](https://github.com/facebook/lexical), and
[Svelte 5](https://github.com/sveltejs/svelte).
> `.tsrx` is also a standalone language. The shared TSRX compiler stack can target
> React, Preact, Solid, Vue, and Ripple. Ripple is the runtime-focused target with
> `track()`, reactive collections, server modules, hydration, and DOM helpers.
**[Ripple Docs](https://www.ripple-ts.com/docs)** |
**[Ripple Playground](https://www.ripple-ts.com/playground)** |
**[TSRX Website](https://tsrx.dev)**
## Features
- Fine-grained reactivity with `track()` and `.value`.
- Reactive `RippleArray`, `RippleObject`, `RippleMap`, and `RippleSet`.
- Template-native `@if`, `@for`, `@switch`, and `@try`.
- Local TypeScript setup with JSX statement containers (`@{...}`).
- Scoped `
}
```
A `;
export function Badge() {
return New;
}
export function Card() @{
<>
Themed, with a local override
}
```
### Context And Portals
```tsx
import { Context, Portal, track, type Tracked } from 'ripple';
const ThemeContext = new Context>();
export function App() @{
const theme = track('light');
ThemeContext.set(theme);
<>
Portal content
}
function ThemeLabel() @{
const theme = ThemeContext.get();
Theme:{theme.value}
}
```
### Server Modules
Ripple supports `module server` in `.tsrx` files for server-oriented exports.
Import from `server` inside the same file before calling the server function.
```tsx
module server {
export async function loadMessage() {
return 'Loaded on the server';
}
}
import { loadMessage } from server;
import { effect, track } from 'ripple';
export function Page() @{
const message = track('Loading...');
effect(() => {
loadMessage().then((next) => {
message.value = next;
});
});
{message.value}
}
```
## Editor Support
Install the
[TSRX Syntax for VS Code](https://marketplace.visualstudio.com/items?itemName=TSRX.tsrx-vscode-plugin)
for syntax highlighting, diagnostics, TypeScript integration, and completions. The
shared language, compiler infrastructure, formatter, linter, and editor
integrations are maintained in [tsrx-org/tsrx](https://github.com/tsrx-org/tsrx).
## Resources
- [Full Documentation](https://www.ripple-ts.com/docs)
- [Interactive Playground](https://www.ripple-ts.com/playground)
- [TSRX Website](https://tsrx.dev)
- [TSRX language and tooling issues](https://github.com/tsrx-org/tsrx/issues)
- [GitHub Issues](https://github.com/Ripple-TS/ripple/issues)
- [Discord Community](https://discord.gg/JBF2ySrh2W)
- [npm Package](https://www.npmjs.com/package/ripple)
## Contributing
Contributions are welcome. Please see [CONTRIBUTING.md](CONTRIBUTING.md).
## License
MIT License - see [LICENSE](LICENSE) for details.
