metapage.json

The metapage configuration is used to define the layout and the data flow of the metapage.

import { Metapage } from "@metapages/metapage";

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

The structure of metapage configuration is a simple JSON strucure:

Git Source

// Example metapage JSON
var metapageDefinition = {
    "version": "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://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
                    }
                ]
            }
        }
    }
};