2d:null 2e:["$","title",null,{"children":"Handy Roam Research Embed Code Generator | Thomas Ballinger | Observable"}] 33:T52b,md`# Handy Roam Research Embed Code Generator Roam Research seems to support embedding arbitrary HTML, so long as you write it in [Hiccup](https://github.com/weavejester/hiccup#hiccup) – thanks to [steveyang331](https://twitter.com/Steve_Yang331) for pointing this out on the [Observable forum](https://talk.observablehq.com/t/is-it-possible-embed-chart-into-note-app/3191/4). So in Roam Research, pasting in this code: \`\`\`.clj :hiccup [:iframe { :height 500 :width 600 :srcdoc "

"}] \`\`\` results in this:

This notebooks is a version of Jeremy's [Handy Embed Code Generator](https://observablehq.com/@jashkenas/handy-embed-code-generator) that generates Hiccup code in the format expected by Roam Research.`34:[{"id":"c3fab254a006f1a3a1f9f63aba8ab1460db4752529036b9962950bde0ec195bab823daa6b278b1c3401e545b3bd640ddfdcad805cf9859af218cb2b9fed4ddf0","href":"https://static.observableusercontent.com/files/c3fab254a006f1a3a1f9f63aba8ab1460db4752529036b9962950bde0ec195bab823daa6b278b1c3401e545b3bd640ddfdcad805cf9859af218cb2b9fed4ddf0","name":"poweredByObservable@2.svg","type":"application/xml","lastModified":1588464211816.846,"size":17203},{"id":"7ec49056b65ce72ebf6ba09ddba6f097fb330442d3a66eb4926aa0245eb3e19222b5dd15a1916a818833436cb8cd1579ff96ae83f22852c06bf5d9c5d88b7087","href":"https://static.observableusercontent.com/files/7ec49056b65ce72ebf6ba09ddba6f097fb330442d3a66eb4926aa0245eb3e19222b5dd15a1916a818833436cb8cd1579ff96ae83f22852c06bf5d9c5d88b7087","name":"image.png","type":"image/png","lastModified":1588464822074.123,"size":126476}] 31:{"id":"e8fd771d08524aa1","slug":"handy-roam-research-embed-code-generator","title":"Handy Roam Research Embed Code Generator","thumbnail":"7a3a5802a3d9f35f377e39affc7951982759a40c787c61add3b6c760889772d9","access_level":"public","create_time":"$D2020-05-03T00:03:31.816Z","update_time":"$D2020-05-03T03:15:32.741Z","view_time":null,"first_public_time":"$D2020-05-03T00:52:16.669Z","fork":{"id":"7105991ec342b0dc","slug":"handy-embed-code-generator","title":"Handy Embed Code Generator","owner":{"id":"172cc08ef8a18a4b","login":"jashkenas","name":"Jeremy Ashkenas"}},"stars":10,"starred":false,"owner":{"type":"team","id":"8d59e5c626effee2","login":"ballingt","name":"Thomas Ballinger","avatar_url":"https://avatars-next.observableusercontent.com/fdc16c011489d914c05fa5992a7992413727fc69e4f73671ec38919807f547e7","tier":"starter_2024"},"version":514,"publish_version":514,"role":null,"authored":false,"authors":[{"type":"individual","id":"4c607438c80998ad","login":"ballingt","name":"Thomas Ballinger","avatar_url":"https://avatars-next.observableusercontent.com/fdc16c011489d914c05fa5992a7992413727fc69e4f73671ec38919807f547e7","tier":null}],"members":[{"type":"individual","id":"4c607438c80998ad","login":"ballingt","name":"Thomas Ballinger","avatar_url":"https://avatars-next.observableusercontent.com/fdc16c011489d914c05fa5992a7992413727fc69e4f73671ec38919807f547e7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Handy Roam Research Embed Code Generator","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"md`#### Step One: \nType in the name of the notebook you’d like to embed. For example, try \\`@fil/bonne-glsl\\` or \\`@d3/streamgraph-transitions\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"viewof slug = text({ submit: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"cellNames\n ? md`#### Step two:\nPick the cells you want to embed. You can drag them to change their order. ${recommendation}`\n : html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"viewof cells = selectOrder(cellNames ? cellNames : [])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"hasCells\n ? md`### Step three:\n\nWould you like your embed to stay fresh whenever a new version of the notebook is published on Observable? Or would you like it to be pinned to the version you’re looking at right now?`\n : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"viewof pinned = hasCells\n ? radio({\n options: [\"Latest published version\", `Pinned to version ${version}`],\n value: \"Latest published version\"\n })\n : Object.assign(md``, { value: null })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"hasCells ? md`You’re done! Here’s your embed code:` : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"hasCells\n ? md`\n~~~clojure\n${embedCodeForHiccup}\n~~~\n`\n : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"hasCells\n ? md`
\nAnd here’s a live preview of roughly what it will look like, when embedded:`\n : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"md`For now, the dimensions of the iframe is baked into the embed.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"viewof iframeWidth = slider({\n title: \"iframe width\",\n min: 100,\n max: 1200,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"viewof iframeHeight = slider({\n title: \"iframe height\",\n min: 100,\n max: 1200,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"preview = {\n if (!hasCells) return md``;\n return html`

Preview

${Object.assign(\n html`