How do I create a metapage?

Very easily.

For example, the small two-piece metapage above can be created with these two steps:

1) Include a the metapage script in your page:

	<script src="https://pages.git.com"></script>

2) Then create the metaframes, connect them together, and add the metaframes to the document (in your Javascript:

  //Create the metaframe object
  var mp = new Metapage();

  //Create the metaframes
  var iframe1 = mp.createIFrame('/metaframes/example00_iframe1');
  document.getElementById("left").appendChild(iframe1.iframe);

  var iframe2 = mp.createIFrame('/metaframes/example00_iframe2');
  document.getElementById("right").appendChild(iframe2.iframe);

  //Connect the metaframes together
  mp.pipe({from:{id:iframe1.id, pipe:'fooOut'}, to:{id:iframe2.id, pipe:'fooIn'}});
  mp.pipe({from:{id:iframe2.id, pipe:'barOut'}, to:{id:iframe1.id, pipe:'barIn'}});

That’s it. Instead of the above code, you can also create the collection of metaframes and connections with JSON:

  //Create the metaframe object

  var metaframeJson = {
    "version": "0.1-alpha",
    "iframes": {
      "metaframe1": {
        "url": "/metaframes/example00_iframe1/"
      },
      "metaframe2": {
        "url": "/metaframes/example00_iframe2/"
      }
    },
    "pipes": [
      {
        "from": {
          "id": "metaframe1",
          "pipe": "fooOut"
        },
        "to": {
          "id": "metaframe2",
          "pipe": "fooIn"
        }
      },
      {
        "from": {
          "id": "metaframe2",
          "pipe": "barOut"
        },
        "to": {
          "id": "metaframe1",
          "pipe": "barIn"
        }
      }
    ]
  };
  var metapage = Metapage.fromDefinition(metaframeJson);

  //Just attach all the metaframes in a column
  var iframes = metapage.get_iframes();
  for (var key in iframes) {
    document.getElementById("metapage").appendChild(iframes[key]);
  }

You can also just paste the above json to the metapage viewer.