Visualize a JS Schema by mapping to XML

gistfile1.txt

/* this is a lot of probably unnecessary crap brought in from Compass. 
 */
@import url(http://fonts.googleapis.com/css?family=Nixie+One:400);
@import url(http://fonts.googleapis.com/css?family=Cabin:500);
/* line 17, ../../../.rvm/gems/ruby-1.9.2-p0@global/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* line 20, ../../../.rvm/gems/ruby-1.9.2-p0@global/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
body {
  line-height: 1;
}

/* line 22, ../../../.rvm/gems/ruby-1.9.2-p0@global/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 24, ../../../.rvm/gems/ruby-1.9.2-p0@global/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 26, ../../../.rvm/gems/ruby-1.9.2-p0@global/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 28, ../../../.rvm/gems/ruby-1.9.2-p0@global/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 101, ../../../.rvm/gems/ruby-1.9.2-p0@global/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/* line 30, ../../../.rvm/gems/ruby-1.9.2-p0@global/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 115, ../../../.rvm/gems/ruby-1.9.2-p0@global/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* line 17, ../../../.rvm/gems/ruby-1.9.2-p0@global/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* line 20, ../../../.rvm/gems/ruby-1.9.2-p0@global/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
body {
  line-height: 1;
}

/* line 22, ../../../.rvm/gems/ruby-1.9.2-p0@global/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 24, ../../../.rvm/gems/ruby-1.9.2-p0@global/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 26, ../../../.rvm/gems/ruby-1.9.2-p0@global/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 28, ../../../.rvm/gems/ruby-1.9.2-p0@global/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 101, ../../../.rvm/gems/ruby-1.9.2-p0@global/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/* line 30, ../../../.rvm/gems/ruby-1.9.2-p0@global/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 115, ../../../.rvm/gems/ruby-1.9.2-p0@global/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* line 8, ../sass/screen.scss */
body {
  font-family: Tahoma, Geneva, Helvetica, Arial, sans-serif;
  font-size: 100%;
  background-color: transparent;
}

/* line 13, ../sass/screen.scss */
.narratives {
  font-family: "Nixie One", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: 110%;
  text-align: justify;
}

/* line 18, ../sass/screen.scss */
.note-dialog {
  line-height: 180%;
  font-size: 140%;
  background-color: rgba(33, 33, 200, 0.1);
}

/* line 23, ../sass/screen.scss */
.error-dialog {
  background-color: #c82121;
}

/* line 27, ../sass/screen.scss */
.columnar {
  min-width: 20%;
  max-width: 25em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

/* line 35, ../sass/screen.scss */
.split-rows li {
  margin-top: 2em;
}

/* line 36, ../sass/screen.scss */
.split-rows span:first-child {
  margin-right: 2em;
}

/* line 37, ../sass/screen.scss */
.split-rows span:last-child {
  display: block;
}

/* line 38, ../sass/screen.scss */
.split-rows a {
  text-decoration: none;
}

/* line 40, ../sass/screen.scss */
div.center {
  text-align: center;
}


/* line 61, ../sass/screen.scss */
div .mask {
  -moz-border-radius: 3em;
  -webkit-border-radius: 3em;
  -o-border-radius: 3em;
  -ms-border-radius: 3em;
  -khtml-border-radius: 3em;
  border-radius: 3em;
  -moz-border-radius-topright: 0px;
  -webkit-border-top-right-radius: 0px;
  -o-border-top-right-radius: 0px;
  -ms-border-top-right-radius: 0px;
  -khtml-border-top-right-radius: 0px;
  border-top-right-radius: 0px;
  -moz-border-radius-bottomleft: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -o-border-bottom-left-radius: 0px;
  -ms-border-bottom-left-radius: 0px;
  -khtml-border-bottom-left-radius: 0px;
  border-bottom-left-radius: 0px;
  background-color: rgba(35, 35, 255, 0.55);
  -moz-box-shadow: 0.4em 0.4em 0.4em 0.2em rgba(0, 0, 0, 0.55);
  -webkit-box-shadow: 0.4em 0.4em 0.4em 0.2em rgba(0, 0, 0, 0.55);
  -o-box-shadow: 0.4em 0.4em 0.4em 0.2em rgba(0, 0, 0, 0.55);
  box-shadow: 0.4em 0.4em 0.4em 0.2em rgba(0, 0, 0, 0.55);
}

/* line 3, ../sass/index.scss */
#ie {
  display: none;
}

/* line 6, ../sass/index.scss */
.frame {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* line 14, ../sass/index.scss */
.title {
  font-size: 3em;
  letter-spacing: 0.1em;
  font-family: Cabin, Tahoma, Geneva, Helvetica, Arial, sans-serif;
}

/* line 19, ../sass/index.scss */
canvas {
  cursor: crosshair;
}

/* line 23, ../sass/index.scss */
ol {
  list-style-type: none;
}
/* line 25, ../sass/index.scss */
ol li {
  display: block;
}
/* line 27, ../sass/index.scss */
ol li a {
  cursor: pointer;
  text-decoration: none;
}

/* line 34, ../sass/index.scss */
.narratives ul {
  list-style-type: disc;
  line-height: 140%;
  margin-left: 2em;
}
/* line 38, ../sass/index.scss */
.narratives ul li {
  display: list-item;
}

/* line 44, ../sass/index.scss */
.title, .light, #menu-div li a {
  color: rgba(255, 255, 255, 0.55);
  font-weight: bold;
  text-shadow: 1px 1px 1px black;
}

/* line 49, ../sass/index.scss */
#menu-div li > a {
  font-size: 2.2em;
  letter-spacing: 0.15em;
}

/* line 53, ../sass/index.scss */
#menu-div a:hover {
  color: black;
  text-decoration: underline;
}

/* line 58, ../sass/index.scss */
address * {
  color: black;
}

/* line 61, ../sass/index.scss */
.center {
  text-align: center;
}

/* line 64, ../sass/index.scss */
.menu-nav {
  margin-top: 2.5em;
  display: inline-block;
  max-width: 33%;
  height: auto;
  padding: 1em;
  padding-bottom: 2em;
}
/* line 71, ../sass/index.scss */
.menu-nav.rotate-minus-25 {
  -moz-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  -o-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  transform: rotate(-25deg);
}

/* line 75, ../sass/index.scss */
.menu-nav > ol {
  position: relative;
  display: inline-block;
  text-align: left;
}

/* line 80, ../sass/index.scss */
.menu-nav > .title {
  display: inline-block;
}

/* line 83, ../sass/index.scss */
.menu-nav li a:hover {
  text-shadow: black 5px 5px 3px, white -1px -1px 5px;
}

/* line 86, ../sass/index.scss */
.narratives p {
  margin-bottom: 1.5em;
  line-height: 140%;
}

/* line 90, ../sass/index.scss */
.spaced {
  position: relative;
  width: auto;
  height: auto;
  margin: auto;
  padding: 1em;
  text-align: center;
}

/* line 98, ../sass/index.scss */
#blanknote {
  height: 10em;
  width: 10em;
  padding: 2.5em;
}

/* line 103, ../sass/index.scss */
#canvas-div, #drip-div, #mask-canvas {
  background-color: transparent;
  -webkit-user-select: none;
}

/* line 107, ../sass/index.scss */
.displayable {
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 100%;
}

/* line 131, ../sass/index.scss */
li.rotate-minus-5, li.solutions-rotate-minus-5 {
  margin-top: 1em;
}

/* line 134, ../sass/index.scss */
.rotate-minus-5, .solutions-rotate-minus-5 {
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

/* line 141, ../sass/index.scss */
li.rotate-plus-5, li.solutions-rotate-minus-5 {
  margin-top: 1em;
  padding-left: 3em;
}

/* line 145, ../sass/index.scss */
.rotate-plus-5, .solutions-rotate-minus-5 {
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
}

@media all and (max-width: 480px) {
  background-color: rgba(0, 0, 0, 0.25);
  /* line 29, ../sass/_media.scss */
  .menu-nav {
    top: 20%;
  }

  /* line 32, ../sass/_media.scss */
  .title, #menu-div li a {
    color: rgba(0, 0, 0, 0.55);
    text-shadow: white 1px 1px 1px;
  }

  /* line 43, ../sass/_media.scss */
  .menu-nav {
    max-width: 50%;
  }

  /* line 46, ../sass/_media.scss */
  #canvas-info, .note-dialog, .error-dialog {
    font-size: 0.6em;
  }
}
@media all and (max-width: 480px) and (max-height: 480px) {
  /* line 51, ../sass/_media.scss */
  .rotate-minus-5, .rotate-plus-5 {
    margin-top: 15px;
    margin-left: 5px;
  }
}
@media all and (min-width: 481px) and (max-width: 600px) {
  /* line 57, ../sass/_media.scss */
  .menu-nav {
    top: 25%;
    max-width: 45%;
  }
}
@media all and (min-width: 301px) {
  /* line 68, ../sass/_media.scss */
  body {
    font-size: 50%;
  }

  /* line 71, ../sass/_media.scss */
  body {
    font-size: 70%;
    letter-spacing: 0.06em;
  }
}
@media all and (min-width: 401px) {
  /* line 77, ../sass/_media.scss */
  body {
    font-size: 60%;
  }
}
@media all and (min-width: 501px) {
  /* line 82, ../sass/_media.scss */
  body {
    font-size: 70%;
  }
}
@media all and (min-width: 601px) {
  /* line 87, ../sass/_media.scss */
  body {
    font-size: 80%;
  }
}
@media all and (min-width: 701px) {
  /* line 92, ../sass/_media.scss */
  body {
    font-size: 90%;
  }
}
@media all and (min-width: 701px) and (max-width: 800px) {
  /* line 97, ../sass/_media.scss */
  .menu-nav {
    top: 20%;
    max-width: 40%;
  }
}
@media all and (min-width: 801px) {
  /* line 103, ../sass/_media.scss */
  body {
    font-size: 100%;
  }
}
@media all and (min-width: 801px) and (max-width: 1024px) {
  /* line 108, ../sass/_media.scss */
  .menu-nav {
    top: 20%;
  }
}
@media all and (min-width: 1001px) {
  /* line 113, ../sass/_media.scss */
  body {
    font-size: 100%;
  }

  /* line 116, ../sass/_media.scss */
  .menu-nav {
    top: 15%;
  }
}
@media all and (min-width: 1201px) {
  /* line 121, ../sass/_media.scss */
  body {
    font-size: 120%;
  }
}

./sass/index.scss */
.error-dialog, .note-dialog {
  font-family: fantasy;
  font-weight: bold;
}

/* line 184, ../sass/index.scss */
li.error-dialog {
  margin-top: 3em;
}

/* line 188, ../sass/index.scss */
#contact-div, .error-dialog, .note-dialog {
  margin: auto;
  padding: 2em;
  position: relative;
  display: inline-block;
  width: auto;
  /*border: solid thin rgba(55,55,55,0.5);*/
  border-top-left-radius: 0px 0px;
  border-top-right-radius: 25px 25px;
  border-bottom-right-radius: 25px 25px;
  border-bottom-left-radius: 25px 25px;
  -moz-box-shadow: 10px 10px 5px #585858;
  -webkit-box-shadow: 10px 10px 5px #585858;
  -o-box-shadow: 10px 10px 5px #585858;
  box-shadow: 10px 10px 5px #585858;
}


/* line 208, ../sass/index.scss */
.error-dialog, .note-dialog {
  margin: 1em;
  height: auto;
}

hyper-schema.js

var hyperschema = { //  from json-schema.org, used just as a sample input
	"$schema" : "http://json-schema.org/draft-03/hyper-schema#",
	"extends" : {"$ref" : "http://json-schema.org/draft-03/schema#"},
	"id" : "http://json-schema.org/draft-03/hyper-schema#",

	"properties" : {
		"links" : {
			"type" : "array",
			"items" : {"$ref" : "http://json-schema.org/draft-03/links#"}
		},
		
		"fragmentResolution" : {
			"type" : "string",
			"default" : "slash-delimited"
		},
		
		"root" : {
			"type" : "boolean",
			"default" : false
		},
		
		"readonly" : {
			"type" : "boolean",
			"default" : false
		},
		
		"contentEncoding" : {
			"type" : "string"
		},
		
		"pathStart" : {
			"type" : "string",
			"format" : "uri"
		},
		
		"mediaType" : {
			"type" : "string",
			"format" : "media-type"
		}
	},
	
	"links" : [
		{
			"href" : "{id}",
			"rel" : "self"
		},
		
		{
			"href" : "{$ref}",
			"rel" : "full"
		},
		
		{
			"href" : "{$schema}",
			"rel" : "describedby"
		}
	],
	
	"fragmentResolution" : "slash-delimited"
};

toxml.js

// warning: no error checking is performed at all

// format an element start tag with optional attributes
// gi is assumed to be a generic identifier
// attlist is assumed to be an associative array indexed by attribute name
// eg { myprop1: "val1", myprop2: "val2" }
var formatStag = function(gi, attlist)
{
   var data = "<" + gi ;

   for (var prop in attlist)
   {
      data = data + formatAttribute(prop, attlist[prop]);
   }

   return( data + ">" );
};

// format an attribute
var formatAttribute = function(attname, attval)
{
   if (!attval) return "";
   return(" " + attname + "='" + attval + "' ");
};

// format an empty element
var formatEElement = function(gi, attlist)
{
   var data;

   data = "<" + gi + " ";

   for (var prop in attlist)
   {
      data = data  + formatAttribute(prop, attlist[prop]);
   }

   return( data + "/>\n" );
};

// format an element end tag
var formatEtag = function(gi)
{
   return("<" + "/" + gi + ">" );
};

// format an element with content
// content is assumed to be well-formed markup
var formatElement = function(gi, attlist, content)
{
   return( formatStag(gi, attlist) + content + formatEtag(gi) + "\n" );
};

// format an element with complex content
// contentobj is assumed to be a JavaScript object which optionally implements a formatXML method
// if present formatXML is assumed to return well formed markup
var formatElementTree = function(gi, attlist, contentobj)
{
   var data = formatStag(gi, attlist);
   if (contentobj.formatXML)
   {
      data = data + contentobj.formatXML() + "\n";
   }
   return( data + formatEtag(gi) );
};

// format a list of elements
// contentobj is assumed to be a JavaScript array of objects that implement a formatXML method
var formatElementList = function(gi, itemenclosure, attlist, contentobj)
{
   var data = formatStag(gi, attlist);
   for (var i=0; i<contentobj.length; ++i) {
     data = data + contentobj[i].formatXML(itemenclosure) + "\n";
   }
   return( data + formatEtag(gi) );
};

// default formatXML
var dflt_formatXML = function(enclosure)
{
   var data = "";

   for (var prop in this)
   {
     if ( this.hasOwnProperty(prop) ) {
       data  = data + formatStag("property") + formatElement("key", null, prop );
       if ( Object.prototype.toString.apply(this[prop]) === '[object Array]' ) {
         console.log("Formatting list");
         data  = data + formatElementList("value", "item", null, this[prop] );
       } else if ( typeof this[prop] == "object" ) {
         data  = data + this[prop].formatXML("value");
       }
       else { 
         data  = data + formatElement("value", null, this[prop]);
       }
       data = data + formatEtag("property");
     }
   }

   if (enclosure) {
    data = formatStag(enclosure)+data+formatEtag(enclosure);
   }

   return(data);
};

var bindToXML = function( constructor ) {
  constructor.prototype.formatXML = dflt_formatXML;
  return( constructor );
};
bindToXML(Object);

visualizejsschema.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Visualize a JSON Schema</title>

  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="expires" content="0" />

  <style>
  div { display: block; clear: both;}
  section { display: block; }

  fieldset, #render, schema { border-radius: 1em; }
  legend { background-color: #fbf0cc; border-radius: 5px; padding-top: 0.3em; padding-left: 0.5em; padding-right: 0.5em;}
  label { display: block; }
  #schema { clear: both; }
  #input { width: 30%; float: left; text-align: center; padding-top: 1em; padding-bottom: 1em; background-color: #fbf0cc; }
  #transform { width: 30%; float: left; text-align: center; padding: 1em; background-color: #fbf0cc; }
  #output { width: 30%; float: left; text-align: center; padding: 1em; background-color: #fbf0cc; }
  div.frame { position: relative; width: 100%; }
  .frame p { width: 100%; text-align: center;}
  #render { position: relative; width: 60%; margin-left: auto; margin-right: auto; border: solid thin black; padding: 1em; background-color: #fbf0cc; }
  footer { overflow: hidden; clear: both; text-align: center; padding: 20px; }
  a { color: #65ac1c; }
  schema:before {  font-weight: bold; content: "«Schema" }
  schema:after {  font-weight: bold; content: "End Schema»" }
  schema { display: block; border: solid thin gray; background-color: #fbf0cc; padding: 0.5em; } 
  item { display: block; margin-left: 1.6em; margin-top: 0.5em; border-left: solid 0.5em green; border-top: solid 1px green; border-right: solid 1px green; border-bottom: solid 1px green; -webkit-border-radius: 0.5em; }
  property { display: block; margin-left: 1.6em; margin-top: 0.5em; margin-bottom: 0.5em; border-left: solid 0.5em green; -webkit-border-radius: 0.5em; }
  key { display: inline-block;  margin-left: 0em; padding-left: 1.6em; border-top: solid 1px green; }
  value { display: inline; margin-left: 1.6em; }
  item property { display: inline-block; }
  item property:after { content: ", " }
  item property:last-child:after { content: "" }
  item property key:after { content: ":" }
  item property key, item property value { padding-left: 0.5em; margin-left: 0em; }
  item property key, item property value, item property { padding: 0em; border: none; }
  body { 
    background: #005700; /* Old browsers */
    background: -moz-linear-gradient(top, #005700 0%, #005700 12%, #008a00 47%, #52b152 68%, #83c783 85%, #b4ddb4 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005700), color-stop(12%,#005700), color-stop(47%,#008a00), color-stop(68%,#52b152), color-stop(85%,#83c783), color-stop(100%,#b4ddb4)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #005700 0%,#005700 12%,#008a00 47%,#52b152 68%,#83c783 85%,#b4ddb4 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #005700 0%,#005700 12%,#008a00 47%,#52b152 68%,#83c783 85%,#b4ddb4 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #005700 0%,#005700 12%,#008a00 47%,#52b152 68%,#83c783 85%,#b4ddb4 100%); /* IE10+ */
    background: linear-gradient(top, #005700 0%,#005700 12%,#008a00 47%,#52b152 68%,#83c783 85%,#b4ddb4 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005700', endColorstr='#b4ddb4',GradientType=0 ); /* IE6-9 */
  }
  body { 
    height: 100%;
    background-attachment: fixed;
  }
  html {
    height: 100%;
  }
  </style>

  <link rel="stylesheet" type="text/css" media="screen, projection" href="index.css" />

</head>
<body>
<div id="wrapper">
    <article>
      <section>

        <header>
          <h1 class="title">Visualize a JSON Schema</h1>
        </header>

        <p>This script converts JSON into markup, which may be styled with CSS or further transformed with XSLT.</p>
        <p>Push the Convert button to create an XML version of the schema. The Hyper-Meta Schema from http://json-schema.org/ is the default input.</p>
        <p>This page is not particulary well tested or secure (it uses eval()).</p>
      </section>

      <section id="schema">
        <fieldset id="input">
          <legend>Input</legend>
          <label for="in">JSON Schema</label>
          <textarea name="in" id="in" cols="40" rows="20"></textarea>
        </fieldset>
        <fieldset id="transform">
          <legend>Transform</legend>
          <label for="xform">Translation Function (this== the schema)</label>
          <textarea name="xform" id="xform" cols="40" rows="20"></textarea>
        </fieldset>
        <fieldset id="output">
          <legend>Output</legend>
          <label for="out">Translated Markup</label>
          <textarea name="out" id="out" cols="40" rows="20"></textarea>
        </fieldset>
        <footer><input type="button" id="convert" value="Convert" /></footer>
      </section>

      <div class="frame">
        <p>CSS Styled Output</p>
        <section id="render">
        </section>
      </div>

    </article>
        
</div>

<script src="toxml.js"></script>
<script src="hyper-schema.js"></script>
<script>
  var convert=function() {
    var f = Function( "return "+document.getElementById('xform').value+" ;" );
    Object.prototype.formatXML = f();
    var h = JSON.parse( document.getElementById('in').value);
    document.getElementById('out').value = h.formatXML("schema");
    document.getElementById('render').innerHTML = document.getElementById('out').value;
  };
  var setup=function() {
    document.getElementById('in').value = JSON.stringify(hyperschema);
    document.getElementById('xform').value = hyperschema.formatXML.toString();
    document.getElementById('convert').addEventListener('click', convert);
  };
  window.onload = setup;
</script>

</body>
</html>