rivet-electron-plugin

Rivet plugin for Electron apps - enables live visual editing and element selection in Electron applications.

Installation

npm install rivet-electron-plugin

Usage

Basic Setup

In your Electron app's renderer process, initialize the Rivet plugin:

import { initializeRivet } from 'rivet-electron-plugin';

// Initialize with default settings
initializeRivet();

Custom Configuration

import { initializeRivet } from 'rivet-electron-plugin';

initializeRivet({
  serverUrl: 'ws://localhost:4000/api/electron/ws', // Rivet server WebSocket URL
  autoConnect: true, // Auto-connect on initialize
  logLevel: 'error', // Log level: 'debug' | 'info' | 'warn' | 'error' | 'none'
});

Log Levels

Control how much the plugin logs to the console:

• 'debug' - All logs (connection, messages, errors)
• 'info' - Info, warnings, and errors
• 'warn' - Warnings and errors only
• 'error' - Errors only (default)
• 'none' - No logs

initializeRivet({
  logLevel: 'debug', // Verbose logging for development
});

Manual Connection Control

import { RivetPlugin } from 'rivet-electron-plugin';

const plugin = new RivetPlugin({
  autoConnect: false,
  logLevel: 'debug',
});

// Connect when ready
await plugin.connect();

// Disconnect when done
plugin.disconnect();

How It Works

1. Start Rivet: Run rivet --framework electron in your project directory
2. Initialize Plugin: Add initRivet() to your Electron renderer process
3. Connect: The plugin connects to Rivet server via WebSocket
4. Select Elements: Click "Edit Mode" in Rivet UI, then click elements in your Electron app
5. Modify: Use AI to modify selected elements - changes are written to your source files

Events

The plugin emits custom events you can listen to:

// Listen for file modifications
window.addEventListener('rivet:files_modified', (event) => {
  const files = event.detail;
  console.log('Rivet modified these files:', files);

  // Optionally trigger your own hot reload logic
});

Requirements

• Electron >= 20.0.0
• Rivet CLI running with --framework electron flag

Example Electron Setup

// src/renderer/index.ts
import { initializeRivet } from 'rivet-electron-plugin';

// Wait for DOM to be ready
document.addEventListener('DOMContentLoaded', () => {
  // Initialize your app
  initApp();

  // Initialize Rivet in development mode only
  if (process.env.NODE_ENV === 'development') {
    initializeRivet({
      logLevel: 'error', // Only show errors in console
    });
  }
});

License

MIT