# Is it possible embed chart into Note app ?

**URL:** <https://talk.observablehq.com/t/is-it-possible-embed-chart-into-note-app/3191>\
**Category:** Help\
**Created:** [April 29, 2020, 12:25pm UTC](https://talk.observablehq.com/t/is-it-possible-embed-chart-into-note-app/3191 "2020-04-29T12:25:35Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![steveyang331](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/steveyang331/32/2991_2.png) [@steveyang331](https://talk.observablehq.com/u/steveyang331)\
**Post date:** [April 29, 2020, 12:25pm UTC](https://talk.observablehq.com/t/is-it-possible-embed-chart-into-note-app/3191/1 "2020-04-29T12:25:35Z")

</div>

such as ,embed chart into Google doc, dropbox paper alike notebook app .

That real JS script code can’t embed notebook app.

Thanks.

---

<div class="post-metadata">

**Author:** ![thomasballinger](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/thomasballinger/32/2293_2.png) [@thomasballinger](https://talk.observablehq.com/u/thomasballinger)\
**Post date:** [April 30, 2020, 4:25pm UTC](https://talk.observablehq.com/t/is-it-possible-embed-chart-into-note-app/3191/2 "2020-04-30T16:25:53Z")

</div>

My favorite note app lately is Observable, which handles embedding arbitrary web content, including Observable notebooks, pretty well. 😉

I haven’t seen any embeds of Observable into things like Google Docs or Dropbox Paper though. Any platform that allows arbitrary HTML+JavaScript to be embedded should work well with Observable, so I bet there are some options. I’d love to see [TiddlyWiki](https://tiddlywiki.com/) embeds for example.

Any platform which allows plugins that allow arbitrary HTML+JavaScript would work too: I’ve tried Airtable custom blocks, there was a post about [Bubble.io](http://Bubble.io) on the forum a while ago, but I don’t know if that worked out. Observable strives to be a reliable, convenient place for your content, which includes being able to flexibly embed it. It would be great to collect examples, are there any other interesting places folks have embedded Observable cells or notebooks?

---

<div class="post-metadata">

**Author:** ![steveyang331](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/steveyang331/32/2991_2.png) [@steveyang331](https://talk.observablehq.com/u/steveyang331)\
**Post date:** [May 1, 2020, 2:59am UTC](https://talk.observablehq.com/t/is-it-possible-embed-chart-into-note-app/3191/3 "2020-05-01T02:59:56Z")

</div>

Maybe there’s 2 solutions to embed Observable HTML+ JS code. into Notebook doc app.

1. Observable support it with embed link ,like [https://observablehq.com/embed/xxxxxx](https://observablehq.com/embed/xxxxxx)
2. Build a website on Github with Zeit or other place, embed html file with Observable HTML+ JS code.

I guess 2nd choice is possible.

---

<div class="post-metadata">

**Author:** ![steveyang331](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/steveyang331/32/2991_2.png) [@steveyang331](https://talk.observablehq.com/u/steveyang331)\
**Post date:** [May 2, 2020, 11:53am UTC](https://talk.observablehq.com/t/is-it-possible-embed-chart-into-note-app/3191/4 "2020-05-02T11:53:04Z")

</div>

I found Roam support hiccup code .

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/6/657b0c36a94b9fe0596819ad559e3cb04ea16e97.png)

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/c/cef0fd8e4b844db1d61c59955771985057f98d1f.png)

@thomasballinger

---

<div class="post-metadata">

**Author:** ![thomasballinger](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/thomasballinger/32/2293_2.png) [@thomasballinger](https://talk.observablehq.com/u/thomasballinger)\
**Post date:** [May 3, 2020, 1:03am UTC](https://talk.observablehq.com/t/is-it-possible-embed-chart-into-note-app/3191/5 "2020-05-03T01:03:27Z")

</div>

Nice find @steveyang331! I whipped up an embed code generator based on Jeremy’s that generates Hiccup code: [https://observablehq.com/@ballingt/handy-roam-research-embed-code-generator](https://observablehq.com/@ballingt/handy-roam-research-embed-code-generator)

The gist is that pasting code like this into Roam Research…

```auto
:hiccup [:iframe {
    :height 500
    :width 600
    :srcdoc "<div id=\"observablehq-b9a930e6\"></div>
<script type=\"module\">
import {Runtime, Inspector} from \"https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js\";
import define from \"https://api.observablehq.com/d/eceaa744227c4fea.js?v=3\";
const inspect = Inspector.into(\"#observablehq-b9a930e6\");
(new Runtime).module(define, name => (
  name === \"vegaPetalsWidget\"
  || name === 'viewof sepalLengthLimits'
  || name === 'viewof sepalWidthLimits') && inspect());
</script>
"}]

```

…results in something like this:

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/d/d261ff2205eddc570d00490ce05578067aef48bd.png)

This could be cleaned up a bit: I didn’t style the iframe beyond setting its dimensions, and I don’t think an iframe is actually necessary at all! It was just the simplest way to make this embed code generator. Suggestion are welcome on that notebook!

Any other interesting places people have found to embed Observable cells?

---

<div class="post-metadata">

**Author:** ![steveyang331](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/steveyang331/32/2991_2.png) [@steveyang331](https://talk.observablehq.com/u/steveyang331)\
**Post date:** [May 3, 2020, 2:44am UTC](https://talk.observablehq.com/t/is-it-possible-embed-chart-into-note-app/3191/6 "2020-05-03T02:44:14Z")

</div>

@thomasballinger

WOW !!!

**I have to say YOU 're really bright !!!**

As my code level, it will take a lot of years to write right code .

But you , wow ! really really awesome !

> [@thomasballinger](#):
>
> Any other interesting places people have found to embed Observable cells?

Probably No! or Roam ppl

Maybe someone don’t know Observable, Someone don’t know Roam can run hiccup code.

Only me think it, and you’ve done yet.

Not sure what excatly requirement, but it’s an ability to run code, embed code on Note app .

What else note app can run code ? Only Roam what I’ve found.

What else ppl think it about ? Only me think it.

Only you’ve done already.

I can’t wait tweet for your wisedom.

[https://twitter.com/Steve\_Yang331/status/1256780592735293446?s=20](https://twitter.com/Steve_Yang331/status/1256780592735293446?s=20)

---

<div class="post-metadata">

**Author:** ![steveyang331](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/steveyang331/32/2991_2.png) [@steveyang331](https://talk.observablehq.com/u/steveyang331)\
**Post date:** [May 3, 2020, 3:54am UTC](https://talk.observablehq.com/t/is-it-possible-embed-chart-into-note-app/3191/7 "2020-05-03T03:54:59Z")

</div>

> [@steveyang331](#):
>
> > [@thomasballinger](#):
> >
> > Any other interesting places people have found to embed Observable cells?
> 
> Roam ppl

Roam support export json file.  
Observable support build chart and others (mind map, etc) by json file.

So. What we’ve done Roam and Observable ?

At first, we have to know what Roam can do , and then expand Roam statistical chart on Observable.

## Simple and small imagination :

1 . Build a table in Roam

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/4/4c5e421f66900242ab388e9e82567efd460ffb29.png)

1. Export to json file or share that page or convert csv file.

2. Base on [Bar Chart / Chris Rice | Observable](https://observablehq.com/@colocarto/bar-chart)

3. Build chart

4. Roam roam-research-embed-code-generator

5. Embed into Roam

6. Share it .

But I don’t know write code to handle Roam Json file .  
and don’t know get data by Roam share page url or API .

I use upload csv file

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/1/13d331de13f65ea011140ff5ebe1781b2fb39039.png)

---

<div class="post-metadata">

**Author:** ![nixsee](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/nixsee/32/3368_2.png) [@nixsee](https://talk.observablehq.com/u/nixsee)\
**Post date:** [July 1, 2020, 12:09am UTC](https://talk.observablehq.com/t/is-it-possible-embed-chart-into-note-app/3191/8 "2020-07-01T00:09:21Z")

</div>

Hey there, this looks very cool! However, when I pasted your code into Roam, I got an error saying “:iframe dom tag is not supported in :hiccup”

Does it still work for you? Do I need to do something special for it to work?

---

<div class="post-metadata">

**Author:** ![thomasballinger](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/thomasballinger/32/2293_2.png) [@thomasballinger](https://talk.observablehq.com/u/thomasballinger)\
**Post date:** [July 6, 2020, 1:58am UTC](https://talk.observablehq.com/t/is-it-possible-embed-chart-into-note-app/3191/9 "2020-07-06T01:58:17Z")

</div>

It’s not just you, this isn’t working for me anymore either. I don’t regularly use Roam so I don’t know when this changed, but it seems to have been recent. [Other folks seem to have noticed this recently too](https://www.reddit.com/r/RoamResearch/comments/hlbvem/iframe/) and there’s hearsay there that it was to address security issues with hiccup. I hope iframe support comes back once they’ve had a chance to iron things out!

---

<div class="post-metadata">

**Author:** ![nixsee](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/nixsee/32/3368_2.png) [@nixsee](https://talk.observablehq.com/u/nixsee)\
**Post date:** [July 6, 2020, 2:03pm UTC](https://talk.observablehq.com/t/is-it-possible-embed-chart-into-note-app/3191/10 "2020-07-06T14:03:20Z")

</div>

Thanks. I can’t say I’m surprised - Roam has some wonderful ideas, but it hasn’t been implemented well at all. I moved past it in the same day that I messaged you - using Obsidian now and waiting eagerly to see what Athens Research comes out with.

---

<div class="post-metadata">

**Author:** ![steveyang331](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/steveyang331/32/2991_2.png) [@steveyang331](https://talk.observablehq.com/u/steveyang331)\
**Post date:** [August 1, 2020, 5:41am UTC](https://talk.observablehq.com/t/is-it-possible-embed-chart-into-note-app/3191/11 "2020-08-01T05:41:43Z")

</div>

@thomasballinger @nixsee

Obsidian v0.8.1 allow embed , , so you know try embed observable code.

But I don’t know how .

---

<div class="post-metadata">

**Author:** ![tophtucker](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tophtucker/32/4781_2.png) [@tophtucker](https://talk.observablehq.com/u/tophtucker)\
**Post date:** [November 2, 2020, 9:34pm UTC](https://talk.observablehq.com/t/is-it-possible-embed-chart-into-note-app/3191/12 "2020-11-02T21:34:23Z")

</div>

Embedding in Roam and other sites (Notion, Medium, etc.) is now much easier and more reliable, since the release last month of our new embedding options: [Intro](https://observablehq.com/@observablehq/introduction-to-embedding?collection=@observablehq/embedding-notebooks), [Troubleshooting](https://observablehq.com/@observablehq/troubleshooting-embedding).

In any link-shared or published notebook, click “Embed cells” in the notebook menu or “Embed” in the cell menu. Under “Iframe”, click “Copy URL only” and paste it into Roam’s Iframe block:

```auto
{{iframe: https://observablehq.com/embed/@d3/bar-chart-race?cell=chart}}

```

Hit “Enter” and it will expand to a live resizable embed.