Roam Research Docs · Developer documentation
{{iframe-component: URL [block-refs] | [options]}}
{and: {[[Food]] not: [[Vegetarian]]}}.
{{iframe-component: https://iframe.stianhaklev.repl.co/wordcloud {and: [[parameters]]} }}
postMessage, they receive data about the relevant subset of blocks, and can call a number of API functions.
<script src="%PUBLIC_URL%/iframeResizer.contentWindow.min.js"/></script>
| are passed in the URL parameter opts, so the actual URL called for the spreadsheet above, which is invoked using {{iframe-component: https://iframe.stianhaklev.repl.co/spreadsheet | 3x3}} is actually https://iframe.stianhaklev.repl.co/spreadsheet?opts=3x3
postMessage.
window.parent.postMessage({ type: "roamIframeAPI.ready" }, "*");
addEventListener("message).
window.addEventListener("message", (e) => {
if (!typeof e.data === "object" || !e.data["roam-data"]) {
return;
}
// do things with e.data
}
{
"blocks-below": {
"order": 0,
"uid": "diqQJPCS1",
"string": "{{iframe-component: https://iframe.stianhaklev.repl.co/chat}}",
"id": 1392,
"children": [
{
"order": 0,
"uid": "W5RHM_o56",
"string": "Buzz Lightyear: Hello",
"id": 1396
},
{
"order": 1,
"uid": "SAbdRqJJ8",
"string": "Other user:Nice to meet you!",
"id": 1397
}
]
},
"block-refs": [],
"user": {
"display-name": "Buzz Lightyear",
"uid": "fsgfsfsgT5FZQdzAI7P40aB3"
}
}
{
"blocks-below": {
"order": 0,
"uid": "diqQJPCS1",
"string": "{{iframe-component: https://iframe.stianhaklev.repl.co/chat ((jg94ngNDd))}}",
"id": 1392
},
"block-refs": [
{
"order": 1,
"uid": "jg94ngNDd",
"string": "The minimum is just iframe-component, followed by a URL. ",
"id": 1338,
"children": [
{
"order": 0,
"uid": "gnglVpCCV",
"string": "You can optionally specify one or more block-references separated by a space, like in the word cloud example above",
"id": 1337
},
{
"order": 1,
"uid": "j13RVmFat",
"string": "You can optionally add options after a vertical bar (|), as in the spreadsheet example above",
"id": 1339
}
]
}
],
"user": {
"display-name": "Buzz Lightyear",
"uid": "sdfsdfsdfVlT5FZQdzAI7P40aB3"
}
}
.block
create
location
parent-uid optional defaults to the Iframe Component block. Must be a descendant of the Iframe Component block.
order optional defaults to "last"
block
string required
uid optional
window.parent.postMessage({
type: "roamIframeAPI.data.block.create",
block: {string: changeCell.key+': '+
updatedCell.value }}, "*");
move
location
parent-uid required Must be a descendant of the Iframe Component block.
order required
block
uid required Must be a descendant of the Iframe Component block.
update
block
uid required Must be a descendant of the Iframe Component block.
string optional
open optional
delete
block
uid required Must be a descendant of the Iframe Component block.
.right-sidebar
.add-window
window
type
block-uid
window.parent.postMessage({
type: "roamIframeAPI.ui.right-sidebar.add-window",
window: {"block-uid": targetBlock.uid ,
"type": "block"}}, "*");
.main-window
.zoom-block
block
uid required
markdown version · view in Roam Research · exported 2026-07-03