Quick Start

Try Ripple Online

You can try Ripple directly in your browser on StackBlitz.

Installation

Using The Experimental create-ripple CLI

npm create ripple

Clone the Vite-based Basic Template:

npx degit Ripple-TS/ripple/templates/basic ripple-app

cd ripple-app
npm i
npm run dev

Optional TypeScript Text Inference

Ripple already infers locally known primitive text with the default ripple() plugin. To also resolve imported types and function return types during production builds, enable textTypes in your Vite configuration:

// vite.config.ts
import { defineConfig } from 'vite';
import { ripple } from '@ripple-ts/vite-plugin';

export default defineConfig({
  plugins: [ripple({ textTypes: { tsconfig: 'tsconfig.json' } })],
});

This requires TypeScript 5.9.3 or newer and strictNullChecks enabled in your TypeScript configuration (strict: true also enables it). The tsconfig path resolves from the Vite project root.

The plugin manages the checker and shares its type information with Ripple's automatic server build. You do not need to call the compiler or create a TypeScript project yourself. The option applies only to production builds without watch mode; development, HMR, and watched builds keep local inference. If you run client and server builds separately, use the same textTypes setting, tsconfig, and unchanged source tree for both.

See Inferred Text Updates for an example and the kinds of values the checker can prove.

Editor Integration

VS Code

The TSRX project maintains the Volar-based TSRX Syntax for VS Code.

It provides syntax highlighting for .tsrx files by default, real-time diagnostics for compilation errors, and typescript integration for type checking and autocompletion.

If you're using a fork of VSCode, the extension is also available on Open VSX.

WebStorm/IntelliJ

There isn't a dedicated plugin at the moment, but you can use the TextMate bundle to add syntax highlighting and the language server for diagnostics and autocompletion:

1. Install the TSRX language server:

npm install -g '@tsrx/language-server'

2. Install the LSP4IJ plugin.
3. Go to Settings > Languages & Frameworks > Language Servers.
4. Click + to add a new language server.
5. Specify TSRX as the name and tsrx-language-server --stdio as the command.
6. In the Mappings > File name patterns, click + to add a new pattern.
7. Specify *.tsrx as the pattern and tsrx as the language ID.

You should see diagnostics and autocompletion in .tsrx files now.

Sublime Text

There isn't a dedicated plugin at the moment, but you can use the TextMate bundle to add syntax highlighting and the language server for diagnostics and autocompletion:

1. Install the TSRX language server:

npm install -g '@tsrx/language-server'

2. Press Ctrl/Cmd+Shift+P, type Install Package Control, and press Enter.
3. Restart Sublime Text.
4. Press Ctrl/Cmd+Shift+P, type Upgrade Package, and press Enter.
5. Type Package Control and press Enter.
6. Restart Sublime Text.
7. Press Ctrl/Cmd+Shift+P, type Install Package, and press Enter.
8. Type LSP and press Enter.
9. Restart Sublime Text.
10. Press Ctrl/Cmd+Shift+P, type Preferences: LSP Settings, and press Enter.
11. Paste the following configuration:

{
  "clients": {
    "TSRX": {
      "enabled": true,
      "command": ["tsrx-language-server", "--stdio"],
      "selector": "source.tsrx"
    }
  }
}

You should see diagnostics and autocompletion in .tsrx files now.

TextMate bundle

The TSRX project also maintains a TextMate bundle that provides syntax highlighting for TSRX files in editors that support TextMate grammars, such as WebStorm/IntelliJ and Sublime Text.

1. Create a directory named TSRX.tmbundle.
2. Create a directory named Syntaxes inside the TSRX.tmbundle directory.
3. Save the tsrx.tmLanguage file into the Syntaxes directory.
4. Install it:
   • WebStorm/IntelliJ:
     1. Save the info.plist file into the TSRX.tmbundle directory.
     2. Go to Settings > Editor > TextMate Bundles, click the + icon, and select the TSRX.tmbundle directory.
   3. All TSRX files should now have syntax highlighting.
   • Sublime Text:
     1. Go to Preferences > Browse Packages, and move the TSRX.tmbundle directory into the opened folder.
     2. You should now be able to select TSRX in View > Syntax.

Getting Help

Try joining the Discord server, or asking for help on our discussions board.

Next Steps

• Learn about reactivity/state management and caveats.