metapage.json

The metapage configuration is used to define the layout and the data flow of the metapage. The configuration can also be encoded in the URL, allowing URLs to define complex applications.

const metapageDefinition = {
    ...// see below for structure
}
const metapage = Metapage.from(metapageDefinition);

The structure of metapage configuration is a simple JSON strucure:

Git Source

// Example metapage JSON
var metapageDefinition = {
    // Currenly only version "0.3" is supported. We are getting closer to a stable "1.0" version
    "version": "0.3",
    // The "meta" field is ignored when computing differences between metapages
    // The "meta" field contains name, author, layout, and any other data used for display
    //                  that does not affect execution of the data flow.
    "meta": {
        "layouts": {
            "react-grid-layout": {
                "docs": "https://www.npmjs.com/package/react-grid-layout",
                "props": {
                    "cols": 12,
                    "margin": [
                        10,
                        20
                    ],
                    "rowHeight": 200,
                    "containerPadding": [
                        5,
                        5
                    ]
                },
                "layout": [
                    {
                        "i": "random-data-generator",
                        "x": 0,
                        "y": 0,
                        "w": 6,
                        "h": 3
                    },
                    {
                        "i": "graph-dynamic",
                        "x": 6,
                        "y": 0,
                        "w": 6,
                        "h": 4
                    },
                    {
                        "i": "editor",
                        "x": 0,
                        "y": 1,
                        "w": 6,
                        "h": 2
                    }
                ]
            }
        }
    },
    // The "metaframes" field is a simple key value object containing the metaframes
    // where the metaframes are URLs and the inputs
    "metaframes": {
        // name of the metaframe, unique to the metapage
        "random-data-generator": {
            // url pointing to the metaframe content
            // metaframes run a little bit of javascript allowing connected data pipes
            "url": "https://metapages.org/metaframes/random-data-generator/?frequency=1000"
        },
        // name of the metaframe, unique to the metapage
        "graph-dynamic": {
            // url pointing to the metaframe content
            "url": "https://metapages.org/metaframes/graph-dynamic/",
            // array of metaframe inputs, defining which output from which metaframe
            // is then piped into the input for this metaframe
            // The metaframe gets the data via postMessage updates
            "inputs": [
                {
                    "metaframe": "random-data-generator",
                    "source": "y",
                    "target": "y"
                }
            ]
        },
        // name of the metaframe, unique to the metapage
        "editor": {
            // url pointing to the metaframe content
            "url": "https://editor.mtfm.io/",
            // array of metaframe inputs, defining which output from which metaframe
            // is then piped into the input for this metaframe
            // The metaframe gets the data via postMessage updates
            "inputs": [
                {
                    "metaframe": "random-data-generator",
                    "source": "y",
                    "target": "value"
                }
            ]
        }
    },
    // plugins define special metaframes, where instead of listening to
    // configured inputs, instead each plugin can get the entire state of the
    // metaframe (this JSON) and also modify it, and/or get state updates:
    // (all outputs)
    // NB: in the future plugins will be defined with JSON: https://github.com/metapages/metapage/issues/126
    "plugins": [
        "https://metapages.org/metaframes/mermaid.js/?TITLE=0",
        "https://editor.mtfm.io/"
    ]
};