Opal is truly amazing and it has taken me in a whole new direction.
โ€” @mistergibson (

opal 0.11 is a blessing! Its a giant step forward to ruby on the client! Its just amazing what bugs i find in existing 0.10 code and do keep wondering, "How did this ever work at all?" I am amzed, fantastic ๐Ÿ‘๐Ÿ‘๐Ÿ‘๐Ÿ˜„
โ€” @janbiedermann (


Run this code in your browser

class User
  attr_accessor :name

  def initialize(name)
    @name = name

  def admin?
    @name == 'Admin'

user ='Bob')

# the output will go to your browser's console
puts user
puts user.admin?

Getting Started: Rack and Sprockets

Add rack & opal-sprockets to your Gemfile.

gem 'rack'
gem 'opal-sprockets'

Setup the Opal rack-app in your as follows:

require 'opal-sprockets'

run { |server|
  # the name of the ruby file to load. To use more files they must be required from here (see app)
  server.main = 'hello_world.js.rb'
  # the directory where the code is (add to opal load path )
  server.append_path 'app'

Add a file named hello_world.js.rb to app/ with your hello world:

require 'opal'
require 'native'
$$.alert 'Hello World from Opal!'

Then start the server with bundle exec rackup and visit http://localhost:9292.

Learn more about Opal Sprockets

Getting Started: Rails

Add opal-rails to your Gemfile or build your Rails app with Opal support: rails new -j opal

gem 'opal-rails'

Rename app/assets/javascripts/application.js to app/assets/javascripts/application.js.rb and replace its contents with this code:

require 'opal'
require 'opal_ujs'
require 'turbolinks'
require_tree '.'

Create a "Hello World" controller:

bin/rails generate controller HelloWorld index

Replace the contents of app/assets/javascripts/hello_world.js.rb with:

Document.ready? do
  Element.find('body').html = '<h1>Hello World from Opal!</h1>'

Start the server with bin/rails server and visit: http://localhost:3000/hello_world/index.

Learn more about Opal Rails

Getting Started: Command Line Interface (CLI)

Install opal from Rubygems:

gem install opal

Write this code to hello_world.js.rb:

require 'ostruct'
greeting = :Hello, target: :World, source: :Opal)
puts "#{greeting.type} #{} from #{greeting.source}!"

Run it with Node.js (assuming it's installed):

opal hello_world.js.rb
# => Hello World from Opal!

Compile it to a JavaScript file:

opal -c hello_world.js.rb > hello_world.js
node hello_world.js
# => Hello World from Opal!

For a full list of supported options see:

opal --help

Learn more about the CLI