By piping data in between embedded webpages, you can:

Create wep applications that consist of multiple distinct websites.
Create plugins for existing webpage applications without having to embed or run any third party code.
Separate server code from client-only code.
Blur the distinction between server and client code.
Blur the distinction between plugins and applications.

Adding metaframe functionality to an existing webpage is very easy (see examples). The metaframe javascript library simply listens for pipe messages between pages/tabs/windows. It’s up to your webpage to decide what to do with the piped inputs.

Concepts

Iframe communication

The parent page that is running the app runs the iframe-app javascript code that communicates takes an application definition and returns a set of iframes connected together with window message events. The connection object establishes data pipes and API methods that the parent window creates.

Sequence of events:

1) The parent window creates the child iframe.
2) The iframe loads the client connection library. This sends a SetupIframeClientRequest to the parent.
3) 

Metapage

Example yaml file

metapage:
  version: "0.1-alpha"
  iframes:
    name1:
      url: someurl
      in:
        input1:
          type: inline
          value: some value
        input2:
          type: url
          value: relative_url/value.txt
      out:
        out1: {}
        out2: {}
    name2:
      url: someurl
      in:
        input1:
          type: inline
          value: some value
        input2:
          type: url
          value: relative_url/value.txt
  pipes:
    - from:
        id: name1
        pipe: out1
      to:
        id: name2
        pipe: input

Metaframes: building blocks

Metaframes (embedded websites) become input/output pipes.

Examples

The site:

Use cases:

To run the examples, you’ll need to install docker.

After you have installed docker:

docker-compose up

Then go to http://localhost:4000/test to browse the examples.

Technical