<!DOCTYPE html>
<html>

<head>
  <link href="//cdn.jsdelivr.net/picnicss/4.1.1/picnic.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="//rawgit.com/magnumjs/mag.js/master/mag.min.js"></script>
  <meta charset="utf-8">
  <title>Mag.JS</title>
</head>

<body>
  <h1>Hello Mag.JS!</h1>
  <a target="_tab" href="https://github.com/magnumjs/mag.js">GitHub</a>
  <hr/>

  <div id="app">
    <h2>Boilerplate: <count/></h2>
    <ul><li></li></ul>
  </div>


  <script src="//rawgit.com/magnumjs/mag.js/master/src/mag.addons.js"></script>
  <script src="app.js"></script>

</body>

</html>
var app = {}

app.controller = function(props) {

  this.h2 = {_text:'My MagJS app!'}

}

app.view = function(state, props) {

  state.h2._onclick = function() {
    state.count = state.count + 1 || 1
    props.things.push(state.count)
  }

  state.li = props.things
  
}

var props = {
  things: []
}

mag.module("app", app, props)
.hide {
  display: none;
}
a { display: block;}
a:after {content:" \bb";}
#Mag.JS

## plunk boilerplate