# Embed a cell in react, without downloading notebook first
**URL:** https://talk.observablehq.com/t/embed-a-cell-in-react-without-downloading-notebook-first/3897
**Category:** Help
**Created:** [September 17, 2020, 4:47pm UTC](https://talk.observablehq.com/t/embed-a-cell-in-react-without-downloading-notebook-first/3897 "2020-09-17T16:47:51Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)
#### Post date: [September 17, 2020, 4:47pm UTC](https://talk.observablehq.com/t/embed-a-cell-in-react-without-downloading-notebook-first/3897/1 "2020-09-17T16:47:51Z")
Hi there,
I’m wondering if it is possible to embed a cell in react without downloading the notebook first, and if anyone has an example of how to do this.
This notebook is great ([https://observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app](https://observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app)) but I’d like to use the embed code provide at the cell level (described here [https://observablehq.com/@observablehq/downloading-and-embedding-notebooks](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks)) and embed so that the viz in react updates when I’ve updated the cell on observables. Is that even possible (I’m new to react)?
---
### Author:  [@asg017](https://talk.observablehq.com/u/asg017)
#### Post date: [September 18, 2020, 3:19am UTC](https://talk.observablehq.com/t/embed-a-cell-in-react-without-downloading-notebook-first/3897/2 "2020-09-18T03:19:45Z")
Hey @mbrownshoes, it’s possible to embed Observable notebooks into a React app without having to download it by using [Dynamic imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import). When you [download the code for a notebook](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks), that link is an ES Module, meaning with vanilla JS you could do something like this from a browser:
```auto
import('https://api.observablehq.com/@d3/bar-chart.js?v=3').then(({default:define})=>{
runtime.module(define, name => {
if (name === "chart")
return new Inspector(document.body);
})
})
```
However, when it comes to React specifically, using `import()` is different. Most React bundlers [will override dynamic imports](https://reactjs.org/docs/code-splitting.html) for it’s own React-specific usecase, and I’ve never been able to figure out how to use the “normal” dynamic import in the standard create-react-app (if anyone knows how, I’d love to hear how!)
As a workaround, you _could_ use `eval()` around your import statement, [which you can see in this CodePen](https://codepen.io/asg017_ucsd/pen/VwaGRQE?editors=1010), but this is extremely unsafe if you accept user-input here. Copy with caution!
---
### Author:  [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)
#### Post date: [September 18, 2020, 2:57pm UTC](https://talk.observablehq.com/t/embed-a-cell-in-react-without-downloading-notebook-first/3897/3 "2020-09-18T14:57:40Z")
Thanks for your thoughts @asg017 I’m not sure why it’s unsafe but sounds like something I should avoid. I’ll stick with downloading for now, until I hear of something a little more full proof. Cheers
---
### Author:  [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [September 18, 2020, 6:41pm UTC](https://talk.observablehq.com/t/embed-a-cell-in-react-without-downloading-notebook-first/3897/4 "2020-09-18T18:41:18Z")
> [@mbrownshoes](#):
>
> I’m not sure why it’s unsafe
This part is important:
> [@asg017](#):
>
> if you accept user-input here
You’ll want to avoid arbitrary code execution. Using `eval()` (or `new Function()`) is perfectly fine if you have full control over the eval’d code.