npm install radioactive
76 downloads in the last month

Radioactive Coffeescript

Pure Coffeescript DSL for building scalable reactive HTML5 UIs

Radioactive Logo


Please provide feedback on the API, usability, etc. I don't recommend trying to fix things by yourself since the codebase is undergoing heavy changes and most of the work is now happening elsewhere ( we are refactoring parts of the framework to their own projects ). That being said, contributions are always welcome.



        <script src=""></script>
        <script src=""></script>
        <script src="main.js"></script>

time = radioactive.poll -> new Date() + ''
name = radioactive.cell init: 'Bob'

$ ->
  $('body').append 'div'._ ->
    'h1'._ time
    'div'._ ->
      'input'._ type:'text', bind: name
      'p'._ name

Remember to compile to main.js

coffee -c -w

The -w flag means "watch for changes and recompile"


Compiled and minified releases are available and served directly from Github ( using Github pages ). Note: jQuery must be loaded first.

<script src=""></script>
<script src=""></script>

You can also clone this repo and build a minified version yourself using grunt

git clone
cd radioactive
grunt build

RAML Tags, Attributes and Events


All HTML5 tags are supported

"p"._ "Hello"
"ul"._ ->
  "li"._ "Item 1"
  "li"._ "Item 2"


  • All attributes supported by jQuery.attr() are available
"input"._ type:"text"
"div"._ id:"my-div"
"span"._ "class":"nice"


  • All CSS Styles supported by jQuery.css() are available
  • You must prefix style names with a dollar sign ( $ )
"div"._ $height: 50, $width: 50, $backgroundColor: "white"

Just like in jQuery.css() the following two lines are equivalent:

"div"._ $backgroundColor: "white"
"div"._ "$background-color": "white"


  • All events supported by jQuery.on() are supported
  • You must prefix jQuery event names with a bang ( ! )
"button"._ "!click":( -> console.log "boom" ), "Explode"

You can alternatively use the following syntax.

"button"._ onclick:( -> console.log "boom" ), "Explode"

Special Tags, Attributes and Events

On top of HTML, RAML adds a few elements of its own. For clarity, all RAML specific Tags, Attributes and Events are prefixed with an underscore.

Special Tags

  • _text = Creates a DOM Text Node

This allows you to write markup that mixes DOM Elements with DOM Text Nodes. For example:

<p>this paragraph has one <strong>bold</strong> word</p>

Is equivalent to the following RAML fragment:

"p"._ ->
  "_text"._ "this paragraph has one "
  "strong"._ "bold"
  "_text"._ " word"
  • _insert = Inserts a DOM Node on a given position

Special Attributes


Allows you to pass tag content as a property. The following tag declarations are equivalent:

'p'._ $color:'red', 'Hello'
'p'._ $color:'red', _content: 'Hello'


Sets the inner HTML of a node

'div'._ $width: 50, _html: '<p>M&amp;M</p>'



Special Events

  • _aftercreate
  • _beforeadd
  • _afteradd
  • _beforeremove
  • _afterremove
  • _beforedestroy




Cells are "reactive variables". They hold one value. They are are the M in your MVC.

# create a cell with an initial value
name = radioactive.cell init: 'Aldo'
# get the current value

console.log 'the name is ' + name()

# set a new value
name 'Bob'
console.log 'the name is now ' + name()

# use the cell in a RAML fragment
# whenever you change the value of name
# the paragraph's text will update
'p'._ name

# since radioactive uses native reactivity
# you can transparently use cells within functions
# they will automatically become reactive

name_name = -> name() + ' ' + name()
uc_name_name = -> name_name().toUpperCase()
'p'._ uc_name_name # will render <p>BOB BOB</p>

# and if we change name back to Aldo
# the UI will update automatically
'p'._ uc_name_name # will magically change to <p>ALDO ALDO</p>

# bidirectional binding is also possible
'input'._ type:'text', _bind: name

# since cells are so common there is a shortcut to create them
name = radioactive 'Aldo'





Use RAML on top of an existing DOM Node ( Every now and then you don't control the creation of a Node )

radioactive.attach $('body'), $backgroundColor: 'white', onclick: -> alert 'clicked on body'

Sync/Async Helpers





Coming soon.



git clone
cd radioactive
npm install -d
npm test
grunt build
cd ./exampes/minimal-html-app
open index.html
coffee -c -w
npm loves you