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 = {
    "version": "1",
    // 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://random.mtfm.io/#?distribution=eyJkaXN0cmlidXRpb24iOiJzaW4iLCJmcmVxdWVuY3kiOjMwLCJvcHRpb25zIjp7ImluY3JlbWVudCI6MC4wMX0sInNob3dPdXRwdXQiOmZhbHNlfQ==&hidemenu=true"
        },
        // name of the metaframe, unique to the metapage
        "graph-dynamic": {
            // url pointing to the metaframe content
            "url": "https://js.mtfm.io/#https://js.mtfm.io/editor/#?js=bGV0JTIwcGxvdCUyMCUzRCUyMGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJTIyZGl2JTIyKSUwQXBsb3QuaWQlMjAlM0QlMjAlMjJwbG90JTIyJTBBcm9vdC5hcHBlbmRDaGlsZChwbG90KSUzQiUwQSUwQXZhciUyMGNyZWF0ZVBsb3QlMjAlM0QlMjAoKSUyMCUzRCUzRSUyMCU3QiUwQSUyMCUyMCUyMCUyMGNvbnN0JTIwd2lkdGglMjAlM0QlMjByb290LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLndpZHRoJTNCJTBBJTA5Y29uc3QlMjBoZWlnaHQlMjAlM0QlMjByb290LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLmhlaWdodCUzQiUwQSUyMCUyMCUyMCUyMHZhciUyMGxheW91dCUyMCUzRCUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHdpZHRoJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwaGVpZ2h0JTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwdGl0bGUlM0FmYWxzZSUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGF1dG9zaXplJTNBJTIwZmFsc2UlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBtYXJnaW4lM0ElMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBsJTNBJTIwNTAlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjByJTNBJTIwNTAlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBiJTNBJTIwNTAlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjB0JTNBJTIwNTAlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBwYWQlM0ElMjA0JTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTdEJTNCJTBBJTBBJTIwJTIwJTIwJTIwUGxvdGx5Lm5ld1Bsb3QoJ3Bsb3QnJTJDJTVCJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIweSUzQSU1QiU1RCUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHR5cGUlM0EnbGluZSclMEElMjAlMjAlMjAlMjAlN0QlNUQlMkMlMjBsYXlvdXQlMkMlMjAlN0JkaXNwbGF5TW9kZUJhciUzQSUyMGZhbHNlJTdEKSUzQiUwQSU3RCUwQSUwQWNyZWF0ZVBsb3QoKSUzQiUwQSUwQXZhciUyMGNudCUyMCUzRCUyMDAlM0IlMEFleHBvcnQlMjBjb25zdCUyMG9uSW5wdXRzJTIwJTNEJTIwKGlucHV0cyklMjAlM0QlM0UlMjAlN0IlMEElMjAlMjAlMjAlMjB2YXIlMjBrZXklMjAlM0QlMjBPYmplY3Qua2V5cyhpbnB1dHMpJTVCMCU1RCUzQiUwQSUyMCUyMCUyMCUyMGlmJTIwKGtleSklMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjB2YXIlMjB2YWx1ZSUyMCUzRCUyMGlucHV0cyU1QmtleSU1RCUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMFBsb3RseS5leHRlbmRUcmFjZXMoJ3Bsb3QnJTJDJTdCJTIweSUzQSU1QiU1QnZhbHVlJTVEJTVEJTdEJTJDJTIwJTVCMCU1RCklM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBjbnQlMkIlMkIlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBpZihjbnQlMjAlM0UlMjA1MDApJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwUGxvdGx5LnJlbGF5b3V0KCdwbG90JyUyQyU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHhheGlzJTNBJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwcmFuZ2UlM0ElMjAlNUJjbnQtNTAwJTJDY250JTVEJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTdEKSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3RCUwQSUyMCUyMCUyMCUyMCU3RCUwQSU3RCUwQSUwQWV4cG9ydCUyMGNvbnN0JTIwb25SZXNpemUlMjAlM0QlMjAoKSUyMCUzRCUzRSUyMCU3QiUwQSUyMCUyMCUyMCUyMGNyZWF0ZVBsb3QoKSUzQiUwQSU3RCUwQQ%3D%3D&modules=JTVCJTIyaHR0cHMlM0ElMkYlMkZjZG4ucGxvdC5seSUyRnBsb3RseS0yLjE0LjAubWluLmpzJTIyJTVE",
            // 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": "v",
                    "target": "v"
                }
            ]
        },
        // 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": "v",
                    "target": "value"
                }
            ]
        }
    },
    // The "meta" field contains metadata: 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
                    }
                ]
            }
        }
    }
};