# Embedded notebook shows input value at bottom of cell

**URL:** <https://talk.observablehq.com/t/embedded-notebook-shows-input-value-at-bottom-of-cell/985>\
**Category:** Help\
**Created:** [July 13, 2018, 1:04am UTC](https://talk.observablehq.com/t/embedded-notebook-shows-input-value-at-bottom-of-cell/985 "2018-07-13T01:04:24Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jchatkinson](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jchatkinson/32/815_2.png) [@jchatkinson](https://talk.observablehq.com/u/jchatkinson)\
**Post date:** [July 13, 2018, 1:04am UTC](https://talk.observablehq.com/t/embedded-notebook-shows-input-value-at-bottom-of-cell/985/1 "2018-07-13T01:04:24Z")

</div>

I am really loving these notebooks as design calc worksheets, and would like to embed notebooks into my website. However, one issue I am having is that when I have inputs, the input value is displayed in the bottom of the cell in the embedded notebook, but not on the original.

embedded example : [https://www.kinson.io/post/design-load-combos/](https://www.kinson.io/post/design-load-combos/)

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

workbook: [https://beta.observablehq.com/@jchatkinson/design-load-combinations-for-buildings](https://beta.observablehq.com/@jchatkinson/design-load-combinations-for-buildings)

Any ideas how to get consistant behavior on both (ie, don’t show the input value in the bottom of cell)

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [July 13, 2018, 10:32am UTC](https://talk.observablehq.com/t/embedded-notebook-shows-input-value-at-bottom-of-cell/985/2 "2018-07-13T10:32:10Z")

</div>

It looks like the default `Inspector` object that is created for each cell of your notebook by the line:

```
Runtime.load(notebook, Inspector.into(document.getElementById('obs-notebook')));

```

(which you presumably pasted from @jashkenas’s [embedding tutorial](https://beta.observablehq.com/@jashkenas/downloading-and-embedding-notebooks)), creates an extra div for the value of each of your HTML input cells. This is probably a bug / oversight in the way that the `notebook-inspector` module treats `viewof` cells that our friends at Observable HQ will fix now that you’ve brought it to their attention.

In the meantime though, the following hack will make those extra divs disappear. If you add this CSS rule, the extra cells will disappear:

```
.observablehq--number {
  display: none
}

```

Unfortunately, this also hides all cells of the notebook which output an unformatted JS Number. For your notebook in particular, this means that the two cells that compute the “Factored load” (cell `Ff` and the last cell in your appendix) will be hidden as well. Fortunately, you can easily work around this. I’m guessing that your notebook is still in progress and you can do without unformatted number output cells in the final version. So you can just embed `Ff` or the result of the Factored load function in a template literal in some other cell which won’t be affected by this CSS rule.

In case you want to hide the appendix altogether, note that you can edit the `Runtime.load` call (quoted above) so that it calls `Inspector.into` on the cells you care about, and `return true` on everything else. See the discussion in @jashkenas’s embedding tutorial and the embedding code on [its linked Breakout example](http://ashkenas.com/breakout/) for some ideas.

---

<div class="post-metadata">

**Author:** ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)\
**Post date:** [July 13, 2018, 4:43pm UTC](https://talk.observablehq.com/t/embedded-notebook-shows-input-value-at-bottom-of-cell/985/3 "2018-07-13T16:43:49Z")

</div>

Thanks for the great answer, @bgchen!

`Inspector.into` isn’t creating an “extra” div, per se — it’s just that `viewof` creates two variables, both `viewof a` and just `a`, and `Inspector.into` inspects _everything_.

For now, the best way to handle this is to name the cells you care about, and use `new Inspector` for each variable that you’d like to embed on the page. That way you don’t have to show your “Imports and other misc things” either…

---

<div class="post-metadata">

**Author:** ![jchatkinson](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jchatkinson/32/815_2.png) [@jchatkinson](https://talk.observablehq.com/u/jchatkinson)\
**Post date:** [July 13, 2018, 5:07pm UTC](https://talk.observablehq.com/t/embedded-notebook-shows-input-value-at-bottom-of-cell/985/4 "2018-07-13T17:07:49Z")

</div>

Thanks for the advice @bgchen and @jashkenas!

I would ideally like to keep the simplicity of dropping in a link with a hugo shortcode

`{{< notebook "url_to_notebook" >}}`

to embed the notebooks, so I guess I will have to dig into this a little more to figure out a way that is generalized but also allows for selective rendering of cells.

---

<div class="post-metadata">

**Author:** ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)\
**Post date:** [July 13, 2018, 5:10pm UTC](https://talk.observablehq.com/t/embedded-notebook-shows-input-value-at-bottom-of-cell/985/5 "2018-07-13T17:10:53Z")

</div>

Just a thought, but if you add a metadata cell to your notebook, like so:

```auto
embed = ["intro", "D", "L", "S", "W", "E", "table"]

```

… then your Hugo shortcode can look at that value to decide what to render, and in what order.

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [July 14, 2018, 1:17am UTC](https://talk.observablehq.com/t/embedded-notebook-shows-input-value-at-bottom-of-cell/985/6 "2018-07-14T01:17:47Z")

</div>

Thanks to you for the clarification! One question: will there be any changes to the way `Inspector` or `Runtime.load` interact with `viewof` cells or should we just keep this behavior in mind for the future?

---

<div class="post-metadata">

**Author:** ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)\
**Post date:** [July 16, 2018, 5:18pm UTC](https://talk.observablehq.com/t/embedded-notebook-shows-input-value-at-bottom-of-cell/985/7 "2018-07-16T17:18:04Z")

</div>

@bgchen — There’s currently no plan to change the behavior of `Inspector.into()` it’s [a simple, “brute” function](https://github.com/observablehq/notebook-inspector/blob/master/src/index.js#L49-L57) that blindly renders every variable in the runtime’s main module, in order, into a given container.

Useful for debugging or extremely simple examples, but for any sophisticated use case, you’re expected to use `new Inspector` — or your own custom rendering strategy — yourself.