Skip to content
This repository has been archived by the owner. It is now read-only.
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

OpalBox-JQuery Build Status Code Climate

A box to compile and run Ruby code on your website. This plugin uses OpalRB libraries.


Add the dist files to your project. You will need js/opalbox.jquery.min.js, css/opalbox.min.css and a theme, for example css/themes/opalbox.light.min.css. You can add all themes adding css/themes/all_themes.min.css file.

Now, link it into your website. In <head> tag:

<!-- Styles -->
<link rel="stylesheet" type="text/css" href="<route to opalbox.min.css>" />
<link rel="stylesheet" type="text/css" href="<route to theme or all themes>" />

Javascript files can be defined on <head> tag or at bottom of your website.

<!-- JS Dependencies (You can use CDN or local files) -->
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<!-- JS File -->
<script type="text/javascript" src="<route to opalbox.jquery.min.js>"></script>


To create OpalBoxes, define an HTML element. Predefined ruby code can be inside of this tags:

<div class="ruby-code">
	return 1

Next call to opalBox in a script:


This code create isolated opalBoxes to run your Ruby code.


opalBox() function accepts an object with options. Available options and default values are:

// Default options!
defaults = {
  // Theme of the opalBox
  theme: 'light',
  // Listener when compile and show the data
  onComplete: null,
  // Title of the block
  title: 'Ruby code',
  // Placeholder when there aren't any result
  result: 'Result will appear here',
  // Auto-adjust height of the textarea to the code
  autoadjust: false


List of available themes:

Show them in action at Themes

Create a theme

First of all, I recommend you to read Develop section. To create theme, create a file on src/sass/themes with name opalbox.your_theme.scss. Insert all styles inside of a global class. The name of the class will be the string of theme option (see options). For example, for light theme:

.opbox.light {
  /* Your style... */

You can use light theme as example.


To work with opalBox-jquery you will need to install NodeJS, NPM and Gulp.

After install base dependencies, clone the repository and run npm install to download development dependencies:

git clone
cd opalbox-jquery
npm install

All changes must be performed on src/sass and src/js folders, because src/css and dist folders are generated automatically with Gulp.

When you finish your changes, execute gulp on your terminal and all minified/compiled files will be generated.


To contribute opalBox-jquery:

  • Create an issue with the contribution: bug, enhancement (except when create a new theme)
  • Fork the repository and make all changes you need (See develop)
  • Compile all files with gulp
  • Create a pull request when you finish


Opal is released under MIT License. See Opal License.

OpalBox-Jquery is released under the MIT license. Copyright @Laux_es ;)