Skip to main content

Quickstart

Render a metapage in a browser in under 5 minutes.

Option 1: Vanilla JS​

npm install @metapages/metapage
import { renderMetapage } from "@metapages/metapage";

// Fetch a metapage definition or construct one inline
const definition = await fetch("https://metapage.io/m/<id>/metapage.json").then(r => r.json());

const { setInputs, dispose } = await renderMetapage({
  definition,
  rootDiv: document.getElementById("metapage-root"),
  onOutputs: (outputs) => {
    console.log("outputs:", outputs);
  },
  options: {
    hideBorder: true,
    hideFrameBorders: true,
    hideOptions: true,
    hideMetaframeLabels: true,
  },
});

// Send data into the workflow
setInputs({ myParam: "value" });

// Tear down when done
// dispose();

Option 2: React​

npm install @metapages/metapage @metapages/metapage-grid-react
import { MetapageGridLayoutFromDefinition } from "@metapages/metapage-grid-react";

export const App = ({ definition }) => (
  <MetapageGridLayoutFromDefinition
    definition={definition}
    onOutputs={(outputs) => console.log(outputs)}
  />
);

Option 3: CDN (no build step)​

<div id="root" style="width:100%;height:600px;"></div>
<script type="module">
  import { renderMetapage } from "https://cdn.jsdelivr.net/npm/@metapages/metapage@latest/+esm";

  const definition = {
    version: "2",
    metaframes: {
      "frame-a": { url: "https://random.mtfm.io/" },
    },
  };

  await renderMetapage({ definition, rootDiv: document.getElementById("root") });
</script>

Next steps​