requirebin sketch

index.js

// require() some stuff from npm (like you were using browserify)
// and then hit Rebuild to run it on the right
var html = require('html-template')();
var skills = html.template('skill');

skills.write({
    '[key=name]': 'tap dancing',
    '[key=level]': '15%'
});
skills.write({
    '[key=name]': 'baton twirling',
    '[key=level]': '95%'
});

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){var domify=require("domify");module.exports=hyperglue;var outer=null;function hyperglue(src,updates){if(!updates)updates={};var dom=typeof src==="object"?[src]:domify(src);if(!outer)outer=document.createElement("div");forEach(objectKeys(updates),function(selector){var value=updates[selector];forEach(dom,function(d){var parentNode=d.parentNode;if(selector===":first"){bind(d,value)}else if(/:first$/.test(selector)){var k=selector.replace(/:first$/,"");if(parentNode)parentNode.removeChild(d);outer.appendChild(d);var elem=outer.querySelector(k);outer.removeChild(d);if(parentNode)parentNode.appendChild(d);if(elem)bind(elem,value)}else{if(parentNode)parentNode.removeChild(d);outer.appendChild(d);var nodes=d.parentNode.querySelectorAll(selector);outer.removeChild(d);if(parentNode)parentNode.appendChild(d);if(nodes.length===0)return;for(var i=0;i<nodes.length;i++){bind(nodes[i],value)}}})});return dom.length===1?dom[0]:dom}function bind(node,value){if(isElement(value)){node.innerHTML="";node.appendChild(value)}else if(isArray(value)){for(var i=0;i<value.length;i++){var e=hyperglue(node.cloneNode(true),value[i]);node.parentNode.insertBefore(e,node)}node.parentNode.removeChild(node)}else if(value&&typeof value==="object"){forEach(objectKeys(value),function(key){if(key==="_text"){setText(node,value[key])}else if(key==="_html"&&isElement(value[key])){node.innerHTML="";node.appendChild(value[key])}else if(key==="_html"){node.innerHTML=value[key]}else node.setAttribute(key,value[key])})}else setText(node,value)}function forEach(xs,f){if(xs.forEach)return xs.forEach(f);for(var i=0;i<xs.length;i++)f(xs[i],i)}var objectKeys=Object.keys||function(obj){var res=[];for(var key in obj)res.push(key);return res};function isElement(e){return e&&typeof e==="object"&&e.childNodes&&(typeof e.appendChild==="function"||typeof e.appendChild==="object")}var isArray=Array.isArray||function(xs){return Object.prototype.toString.call(xs)==="[object Array]"};function setText(e,s){e.innerHTML="";var txt=document.createTextNode(String(s));e.appendChild(txt)}},{domify:2}],2:[function(require,module,exports){module.exports=parse;var map={option:[1,'<select multiple="multiple">',"</select>"],optgroup:[1,'<select multiple="multiple">',"</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tbody:[1,"<table>","</table>"],tfoot:[1,"<table>","</table>"],colgroup:[1,"<table>","</table>"],caption:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],th:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],_default:[0,"",""]};function parse(html){if("string"!=typeof html)throw new TypeError("String expected");var m=/<([\w:]+)/.exec(html);if(!m)throw new Error("No elements were generated.");var tag=m[1];if(tag=="body"){var el=document.createElement("html");el.innerHTML=html;return[el.removeChild(el.lastChild)]}var wrap=map[tag]||map._default;var depth=wrap[0];var prefix=wrap[1];var suffix=wrap[2];var el=document.createElement("div");el.innerHTML=prefix+html+suffix;while(depth--)el=el.lastChild;return orphan(el.children)}function orphan(els){var ret=[];while(els.length){ret.push(els[0].parentNode.removeChild(els[0]))}return ret}},{}],"html-template":[function(require,module,exports){var hyperglue=require("hyperglue");module.exports=function(){return{template:template};function template(name){var t=document.querySelector('[template="'+name+'"]');return{create:create,write:write};function create(row){var e=t.cloneNode(true);e.removeAttribute("template");e.removeAttribute("style");return hyperglue(e,row)}function write(row){var e=create(row);t.parentNode.appendChild(e)}}}},{hyperglue:1}]},{},[]);var html=require("html-template")();var skills=html.template("skill");skills.write({"[key=name]":"tap dancing","[key=level]":"15%"});skills.write({"[key=name]":"baton twirling","[key=level]":"95%"});

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "html-template": "1.0.0"
  }
}

page-head.html

<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
body, html { height: 100%; width: 100%; }</style>

requirebin.md

made with requirebin