diff --git a/src/kiri/main.js b/src/kiri/main.js
index 0782cfa4..be098cdf 100644
--- a/src/kiri/main.js
+++ b/src/kiri/main.js
@@ -391,6 +391,43 @@
         }, 1000);
     }
 
+    // frame message api
+    WIN.addEventListener('message', msg => {
+        let { origin, source, target, data } = msg;
+        if (source.window === target.window) return;
+        let send = source.window.postMessage;
+        if (data.mode) { API.mode.set(data.mode.toUpperCase()) }
+        if (data.view) { API.view.set(VIEWS[data.view.toUpperCase()]) }
+        if (data.function) { API.function[data.function.toLowerCase()]() }
+        if (data.event) {
+            API.event.on(data.event, (evd) => {
+                send({event: data.event, data: evd});
+            });
+        }
+        if (data.emit) API.event.emit(data.emit, data.message)
+        switch (data.get) {
+            case "all": send({all: settings}); break;
+            case "mode": send({mode: settings.mode}); break;
+            case "device": send({device: settings.device}); break;
+            case "process": send({process: settings.process}); break;
+        }
+        switch (data.set) {
+            case "features":
+                Object.assign(feature, data.features);
+                break;
+            case "device":
+                Object.assign(settings.device, data.options);
+                saveSettings();
+                break;
+            case "process":
+                Object.assign(settings.process, data.options);
+                saveSettings();
+                break;
+        }
+        if (data.alert) alert2(data.alert, data.time);
+        if (data.progress >= 0) setProgress(data.progress, data.message);
+    });
+
     /** ******************************************************************
      * Stats accumulator
      ******************************************************************* */
diff --git a/web/kiri/engine.html b/web/kiri/engine.html
index 956b6000..7480e722 100644
--- a/web/kiri/engine.html
+++ b/web/kiri/engine.html
@@ -120,7 +120,7 @@
     <div id="demo">
         <div id="jcode">
             <div id="jhead">javascript</div>
-            <div id="jbody">123</div>
+            <div id="jbody"></div>
             <div id="jfoot"><button onclick="run_code()">run code</button></div>
         </div>
         <div id="gcode">
diff --git a/web/kiri/frame.html b/web/kiri/frame.html
new file mode 100644
index 00000000..a26014d7
--- /dev/null
+++ b/web/kiri/frame.html
@@ -0,0 +1,146 @@
+<html>
+<head lang="en">
+    <title>Kiri:Moto Frame Message API</title>
+    <meta charset="UTF-8" />
+    <meta name="keywords" content="browser,slicer,3d print,free,3d slicer,3d slicing,fdm,sla,cnc,cam,machining,toolpaths,toolpath generation,construction systems,kirimoto,metamoto,kiri:moto,kiri,gridbot" />
+    <meta name="description" content="Kiri:Moto Frame Message API" />
+    <meta property="og:description" content="Browser-Based Maker Tools for 3D Printing, CNC, Laser, Device Control and more">
+    <meta property="og:title" content="Kiri:Moto Frame Message API">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://grid.space/frame.html">
+    <meta property="og:image" content="//static.grid.space/img/logo_gs_og.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="//static.grid.space/img/favicon.ico">
+    <link rel="apple-touch-icon" href="//static.grid.space/img/favicon-mobile.png">
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            font-family: sans-serif;
+        }
+        #demo {
+            display: flex;
+            flex-direction: row;
+        }
+        #mcode {
+            width: 300px;
+        }
+        #fcode {
+            width: 600px;
+        }
+        #mcode, #fcode {
+            height: 600px;
+            margin: 5px;
+            border-radius: 3px;
+            border: 1px solid #aaa;
+        }
+        #mcode, #fcode {
+            display: flex;
+            flex-direction: column;
+        }
+        #mhead, #rhead, #fhead {
+            padding: 3px;
+            text-align: center;
+            background-color: rgba(61,133,198,0.25);
+            border-bottom: 1px solid #aaa;
+        }
+        #rhead {
+            border-top: 1px solid #aaa;
+        }
+        #mbody, #fbody {
+            flex-grow: 1;
+            border: 0;
+        }
+        #rbody {
+            height: 45%;
+        }
+        #mfoot {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            padding: 3px;
+        }
+        #mfoot button {
+            width: 100%;
+        }
+        #rbody, #fbody {
+            font-family: monospace;
+            font-size: smaller;
+            white-space: pre;
+            overflow: auto;
+        }
+        #api {
+            width: 812px;
+        }
+        li {
+            list-style: circle;
+        }
+        li label {
+            white-space: pre;
+            font-family: monospace;
+        }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
+    <script xsrc="/code/engine.js"></script>
+    <script>
+        let msgs = [];
+        let edit;
+        function $(id) { return document.getElementById(id) }
+        function onload() {
+            let fnstr = demo.toString().split("\n");
+            edit = ace.edit($("mbody"), {
+                mode: "ace/mode/javascript",
+                theme: "ace/theme/chrome",
+                selectionStyle: "text"
+            });
+            edit.session.setTabSize(4);
+            edit.session.setUseSoftTabs(true);
+            edit.session.setValue("{}");
+            window.addEventListener('message', receive_message);
+        }
+        function receive_message(msg) {
+            let { origin, source, target, data } = msg;
+            msgs.push(JSON.stringify(data));
+            $('rbody').innerText = msgs.join("\n-----\n");
+            $('rbody').scrollTop = 1000000;
+        }
+        function send_message() {
+            let code = edit.session.getValue();
+            $('fbody').contentWindow.postMessage(eval(`(${code})`));
+        }
+    </script>
+</head>
+<body onload="onload()">
+    <h2 id="title">Kiri:Moto Frame Message API</h2>
+    <div id="demo">
+        <div id="mcode">
+            <div id="mhead">message</div>
+            <div id="mbody"></div>
+            <div id="mfoot"><button onclick="send_message()">send message</button></div>
+            <div id="rhead">output</div>
+            <div id="rbody"></div>
+        </div>
+        <div id="fcode">
+            <div id="fhead">frame</div>
+            <iframe id="fbody" src="/kiri/"></iframe>
+        </div>
+    </div>
+    <div id="api">
+        <h2>Message API</h2>
+        <li><label>load(url)</label> - where URL points to an STL</li>
+        <li><label>parse(data)</label> - where data is a string or binary STL</li>
+        <li><label>setMode(mode)</label> - FDM, CAM, LASER, SLA</li>
+        <li><label>setListener(fn)</label> - function to receive engine progress messages</li>
+        <li><label>setDevice(options)</label> - change default object parameters</li>
+        <li><label>setProcess(options)</label> - change default process parameters</li>
+        <li><label>moveTo(x,y,z)</label> - absolute move origin of loaded object</li>
+        <li><label>move(x,y,z)</label> - relative move origin of loaded object</li>
+        <li><label>scale(x,y,z)</label> - scale axes of loaded object</li>
+        <li><label>rotate(x,y,z)</label> - rotate axes of loaded object in radians</li>
+        <li><label>slice()</label> - async slice loaded object</li>
+        <li><label>prepare()</label> - async path routing of slice data</li>
+        <li><label>export()</label> - async gcode generation from path routing</li>
+    </div>
+</body>
+</html>
