opal-viteRuby in the Browser with Vite

Quick Installation ​

npm / pnpm ​

# Install the Vite plugin
pnpm add -D vite-plugin-opal

# Install the Ruby gem
gem install opal-vite

Gemfile ​

gem 'opal'
gem 'opal-vite'

Basic Setup ​

vite.config.ts ​

import { defineConfig } from 'vite'
import opal from 'vite-plugin-opal'

export default defineConfig({
  plugins: [
    opal({
      loadPaths: ['./app/opal'],
      sourceMap: true
    })
  ]
})

Your First Ruby File ​

# app/opal/application.rb
puts "Hello from Ruby!"

class Greeter
  def initialize(name)
    @name = name
  end

  def greet
    puts "Hello, #{@name}!"
  end
end

Greeter.new("World").greet

Playground ​

Try opal-vite with live demo applications:

• Practical App - Full-featured Todo app
• Chart App - Chart visualization
• Stimulus App - Stimulus controller basics
• API Example - API integration patterns
• Form Validation - Real-time validation
• i18n App - Internationalization
• PWA App - Offline support
• Vue App - Vue.js integration
• React App - React integration

See all demos on the Playground page.