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 trueadm/ripple/templates/basic ripple-app

cd ripple-app
npm i
npm run dev

Editor Integration

VS Code

Ripple maintains a Volar-based VSCode extension.

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

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

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 Ripple language server:

npm install -g ripple-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 Ripple as the name and ripple-language-server --stdio as the command.
6. In the Mappings > File name patterns, click + to add a new pattern.
7. Specify *.ripple as the pattern and ripple as the language id.

You should see diagnostics and autocompletion in .ripple 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 Ripple language server:

npm install -g ripple-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": {
		"Ripple": {
			"enabled": true,
			"command": ["ripple-language-server", "--stdio"],
			"selector": "source.ripple"
		}
	}
}

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

TextMate bundle

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

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

Are you a Zed, NeoVim, or IntelliJ/WebStorm user?

Help us port the Ripple extension to your platforms!

Getting Help

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

Next Steps

• Learn about reactivity/state management and caveats.