npm install radioactive
19 downloads in the last week
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