` the page controls, with the frame's inputs. You are editing the user's site, not writing a frame. If the user only wants the frame to show up and does not care how, an iframe of the `/j/` URL is simpler (see the Embedding guide). Use this recipe when the frame should read as native page content: page styles and fonts, page scrolling, no iframe border or fixed height, no framejs.io page loaded. ## What a frame is `GET https://framejs.io/j/.json` (CORS open) returns the frame: ```json { "js": "...", "inputs": {}, "modules": [], "og": {}, "definition": {} } ``` - `js` is an ES module, or occasionally a URL to the module source. It draws into a global `root` element and may `export` `onInputs(inputs)` and `onResize(width, height)`. - `inputs` is the data handed to `onInputs`. A value `{ "type": "url", "value": "https://…" }` is a reference: fetch it first. - `modules` is a list of stylesheet / script URLs the code expects loaded before it runs (an entry starting with `{` is an import map). - Any other key (e.g. `state`) is URL state the frame saved with `setJson`; the code reads it back with `getJson(key)`. The template below supplies exactly those globals (`root`, `getJson`, `setJson`, `saveJson`, `setOutput`, `setOutputs`, `log`, `logStdout`, `logStderr`), loads `modules`, imports `js`, then calls `onInputs` and `onResize`. ## The template Copy it verbatim; change only the last line (where the frame comes from) and the `

`'s size and placement. ```html

``` ## Where the frame comes from (the last line) Pick one, and say which in your summary: - **Live** — `runFrame("https://framejs.io/j/.json", …)`. The page always shows the frame's latest saved version: edit the frame at framejs.app and the page updates with no deploy. Use `framejs.io` here, not `framejs.app`: framejs.io's `.json` route is the CORS-open one. To stop the page changing under its readers, pin one published version: `…/j/.json?v=`. - **Frozen in the site** — download the JSON once (`curl -o frame.json https://framejs.io/j/.json`), commit it next to the page and call `runFrame("./frame.json", …)`. Nothing is fetched from framejs at runtime (CDN imports inside `js` still are). Best for a published post that must not change. - **Inline** — `runFrame({ js, inputs }, …)` with the object written in the page, for small frames or frames the site's build generates. Put `js` in a string the site's tooling escapes for you (JSON, not a hand-written template literal: backticks and a literal closing script tag in the code break it). The user can also pass their own data instead of the frame's saved inputs: `runFrame({ ...frame, inputs: { "data.json": myData } }, root)`, or later with the returned `setInputs(...)`. ## Rules - **Do not** load the framejs.io runtime page, `@metapages/metapage`, or the editor. This recipe exists to avoid them. - **One frame per page.** Frame code uses page globals (`root`, `setJson`, …), so two frames on one page overwrite each other. For several frames on one page, iframe the others. - **Keep the `

` id `root`** unless the page already has a `#root` (React and Vue apps often do). Frame code may call `document.getElementById("root")`, so if you must rename it, check the frame's `js` does not. - **Give the `

` a size.** Frames are written to fill `root`; a `

` with no height renders nothing for most canvas / chart frames. - **Import maps** (a `modules` entry starting with `{`) cannot be added after the page has started loading modules: copy the JSON into a `