Rivet

A design tool that helps you change web and Electron applications without coding. Instead, prompt and use Rivet's visual tools to make changes, and then publish them to your repository as a pull request.

Quickstart:

npm install -g rivet-design

For web applications:

• Navigate to your project repo
• Start your project's local development server
• Run rivet in your project directory which will spin up an interactive frontend you can use to make changes

cd my-project-repo
rivet

For Electron applications:

• Install the plugin: npm install rivet-electron-plugin
• Initialize the plugin in your Electron app's renderer process (see plugin documentation)
• Run rivet --framework electron in your project directory
• Start your Electron app

Configuration options

Run rivet --help to see the full list of available flags. Some especially useful options are:

• --framework
  • Specify the application framework (e.g., electron, vite, nextjs).
  • Rivet automatically detects most frameworks, but you can override with this flag.
  • Required for Electron applications: rivet --framework electron
• --user-port
  • The port where your dev server is running (default: 3000).
  • Rivet automatically detects common ports for frameworks like React, Vite, and Next.js, but you can override this if your setup uses a different port.
  • Not needed for Electron applications (they communicate via WebSocket instead).
• --no-git-tracking
  • Git tracking defaults to enabled. Rivet creates a branch and commits successful changes automatically.
  • To manage git operations yourself, use --no-git-tracking to disable automatic git operations.