# Feature Request: Hiding Cell

**URL:** <https://talk.observablehq.com/t/feature-request-hiding-cell/2252>\
**Category:** Feedback\
**Created:** [August 11, 2019, 8:54am UTC](https://talk.observablehq.com/t/feature-request-hiding-cell/2252 "2019-08-11T08:54:52Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![alijaya](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/alijaya/32/2011_2.png) [@alijaya](https://talk.observablehq.com/u/alijaya)\
**Post date:** [August 11, 2019, 8:54am UTC](https://talk.observablehq.com/t/feature-request-hiding-cell/2252/1 "2019-08-11T08:54:52Z")

</div>

It would be great if we could hide certain cell from view. Because sometimes we just want to show the interactive document without showing the code (especially the import cell).

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [August 11, 2019, 11:14am UTC](https://talk.observablehq.com/t/feature-request-hiding-cell/2252/2 "2019-08-11T11:14:51Z")

</div>

Hi @alijaya. I understand your question to be commenting on the Observable UI, so the couple links below may not directly respond to your concern. Because your profile on the forum is just a couple of days old, and just in case you haven’t come across them before…

Outside of the Observable UI, you can opt in to render specific cells in an HTML document:

> **[Downloading and Embedding Notebooks](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks)**
>
> An Observable notebook by Observable.

If you find yourself struggling with aesthetic bits, check around–there are a few nice tricks among users:

> **[Embed notebooks with custom width](https://observablehq.com/@toja/custom-notebook-width)**
>
> An Observable notebook by Torben Jansen.

---

<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:** [August 11, 2019, 12:18pm UTC](https://talk.observablehq.com/t/feature-request-hiding-cell/2252/3 "2019-08-11T12:18:45Z")

</div>

For notebooks hosted on [observablehq.com](http://observablehq.com) itself, it’s unlikely that a way to completely hide cells will be added, see this post:

> [@View-only mode?](https://talk.observablehq.com/t/view-only-mode/447/7):
>
> I’ve been referring to these as “inspector cells”. All cells are defined by code, and this code is hidden by default; it’s only shown if the cell is pinned or focused. An inspector cell is any cell that doesn’t return DOM. When a cell returns some non-DOM value such as a number, string, object or function, this is displayed by Observable’s built-in inspector (much like a browser’s developer tools). There’s no way to hide a cell entirely, and that’s mostly deliberate: we want the code to be acce…

---

<div class="post-metadata">

**Author:** ![alijaya](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/alijaya/32/2011_2.png) [@alijaya](https://talk.observablehq.com/u/alijaya)\
**Post date:** [August 12, 2019, 6:54am UTC](https://talk.observablehq.com/t/feature-request-hiding-cell/2252/4 "2019-08-12T06:54:39Z")

</div>

Ah thanks for the reply 😃… that’s what I need 😃

---

<div class="post-metadata">

**Author:** ![dbuzz123](https://avatars.discourse-cdn.com/v4/letter/d/c68b51/32.png) [@dbuzz123](https://talk.observablehq.com/u/dbuzz123)\
**Post date:** [May 21, 2020, 9:55pm UTC](https://talk.observablehq.com/t/feature-request-hiding-cell/2252/5 "2020-05-21T21:55:59Z")

</div>

I am also looking for such feature. My notebook is pretty complex with lot of code and variables, but ultimately gives page size visualization. I want to hide/shrink all coding cells in exported code. Is there a workaround for this? I tried looking at inspector.css, but can’t infer how to apply styling to accomplish this. But maybe there is another way?

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [May 22, 2020, 9:43am UTC](https://talk.observablehq.com/t/feature-request-hiding-cell/2252/6 "2020-05-22T09:43:17Z")

</div>

> [@dbuzz123](#):
>
> I want to hide/shrink all coding cells in exported code

What do you mean by “exported code”? If you embed your notebook elsewhere you have full control over which cells should get displayed. But inside the ObservableHQ editor you will always have at least one output row per cell, even if it is blank.

The order of cells in Observable notebooks is arbitrary. If you want to draw attention to some cells, you can move them to the top, and section off other areas of your notebook through the use of horizontal lines and headings, e.g.:

```auto
md`---
## Appendix`

```

---

<div class="post-metadata">

**Author:** ![dbuzz123](https://avatars.discourse-cdn.com/v4/letter/d/c68b51/32.png) [@dbuzz123](https://talk.observablehq.com/u/dbuzz123)\
**Post date:** [May 22, 2020, 4:29pm UTC](https://talk.observablehq.com/t/feature-request-hiding-cell/2252/7 "2020-05-22T16:29:01Z")

</div>

> @mootari What do you mean by “exported code”?

… → “Download Code”

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [May 22, 2020, 4:54pm UTC](https://talk.observablehq.com/t/feature-request-hiding-cell/2252/8 "2020-05-22T16:54:25Z")

</div>

From the downloaded folder, open `index.html` in your editor and replace the lines

```auto
const runtime = new Runtime();
const main = runtime.module(define, Inspector.into(document.body));

```

with

```auto
const runtime = new Runtime();
const inspect = Inspector.into(document.body);

const cells = new Set(["foo", "bar"]); // The cells that you want to display.
const main = runtime.module(define, name => cells.has(name) ? inspect() : undefined);

```

where “foo” and “bar” are just examples of cell names.

---

<div class="post-metadata">

**Author:** ![dmaynard](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dmaynard/32/2613_2.png) [@dmaynard](https://talk.observablehq.com/u/dmaynard)\
**Post date:** [June 4, 2020, 8:16pm UTC](https://talk.observablehq.com/t/feature-request-hiding-cell/2252/9 "2020-06-04T20:16:22Z")

</div>

I also have a use case for hiding a cell. I have a Covid-19 by state notebook at [https://observablehq.com/@dmaynard/covid-19-us-states-explorer](https://observablehq.com/@dmaynard/covid-19-us-states-explorer) This notebook allows the user to either choose the Top-k states for a given variable OR manually choose the states to include. Manually selection requires 50 checkboxes which takes up a lot of screen real estate. If the user has choose to see the top 5 states in terms of new cases per 100,000 I would like to hide the 50 checkboxes. Is there a way to wrap the viewof checkbox in html and hide this DOM element via code?

---

<div class="post-metadata">

**Author:** ![Steve](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@Steve](https://talk.observablehq.com/u/Steve)\
**Post date:** [June 4, 2020, 10:56pm UTC](https://talk.observablehq.com/t/feature-request-hiding-cell/2252/11 "2020-06-04T22:56:18Z")

</div>

Maybe something like this dmaynard?

```
viewof excluded = { return (selectionModeTxt == "5") 
  ? md`<hr>`
  : checkbox(stateCodes)}
```

---

<div class="post-metadata">

**Author:** ![dmaynard](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dmaynard/32/2613_2.png) [@dmaynard](https://talk.observablehq.com/u/dmaynard)\
**Post date:** [June 5, 2020, 12:07am UTC](https://talk.observablehq.com/t/feature-request-hiding-cell/2252/12 "2020-06-05T00:07:29Z")

</div>

Thank you for the suggestion. When I read it I thought Aha, that’s so easy, but alas I tried it and the 50 checkboxes still get displayed. My theory is that because the variable excluded has a static dependency (referenced in the source) to checkbox then checkbox get gets re-evaluated (and displayed) even though the dynamic reference is never called. I did include you suggestion and updated the page since it still works the same way.  
David Maynard

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [June 5, 2020, 4:53am UTC](https://talk.observablehq.com/t/feature-request-hiding-cell/2252/13 "2020-06-05T04:53:30Z")

</div>

This will work:

```auto
viewof excluded = selectionModeTxt === "0"
  ? checkbox(stateCodes)
  : Object.assign(html`<hr>`, {value: null})

```

An HR element by itself can be used as a view, but since its value is initially undefined, any cell referencing _excluded_ won’t run (and will display its previous value). However, if you explicit set the element’s value to null, then downstream cells will run immediately.

A similar technique is used here:

> **[Wait Until Button](https://observablehq.com/@mbostock/wait-until-button)**
>
> An Observable notebook by Mike Bostock.

---

<div class="post-metadata">

**Author:** ![dmaynard](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dmaynard/32/2613_2.png) [@dmaynard](https://talk.observablehq.com/u/dmaynard)\
**Post date:** [June 6, 2020, 11:00pm UTC](https://talk.observablehq.com/t/feature-request-hiding-cell/2252/14 "2020-06-06T23:00:26Z")

</div>

Wonderful. It worked perfectly and helped enlighten me about Observable data flow. Thank you very much.  
David

---

<div class="post-metadata">

**Author:** ![spersels](https://avatars.discourse-cdn.com/v4/letter/s/4af34b/32.png) [@spersels](https://talk.observablehq.com/u/spersels)\
**Post date:** [February 15, 2021, 3:26pm UTC](https://talk.observablehq.com/t/feature-request-hiding-cell/2252/15 "2021-02-15T15:26:35Z")

</div>

Glad you got this to work - I have no idea where I would even put the code snippet mentioned above. Could you share a little more about your solution and perhaps show wherer had now you used this code snippet?

---

<div class="post-metadata">

**Author:** ![spersels](https://avatars.discourse-cdn.com/v4/letter/s/4af34b/32.png) [@spersels](https://talk.observablehq.com/u/spersels)\
**Post date:** [February 15, 2021, 3:36pm UTC](https://talk.observablehq.com/t/feature-request-hiding-cell/2252/16 "2021-02-15T15:36:27Z")

</div>

This did not work for me - it prints the cells in the list but does not display the main graph.

---

<div class="post-metadata">

**Author:** ![spersels](https://avatars.discourse-cdn.com/v4/letter/s/4af34b/32.png) [@spersels](https://talk.observablehq.com/u/spersels)\
**Post date:** [February 15, 2021, 3:52pm UTC](https://talk.observablehq.com/t/feature-request-hiding-cell/2252/17 "2021-02-15T15:52:33Z")

</div>

Never mind - user error ☹ - this did work - thanks for the help!

---

<div class="post-metadata">

**Author:** ![qcgm1978](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/qcgm1978/32/6488_2.png) [@qcgm1978](https://talk.observablehq.com/u/qcgm1978)\
**Post date:** [May 10, 2022, 5:46pm UTC](https://talk.observablehq.com/t/feature-request-hiding-cell/2252/18 "2022-05-10T17:46:31Z")

</div>

I don’t know whether I miss something. And I don’t understand the above answers too. But I found `main.variable().define` simply solved my problem, i.e. don’t pass `observe()` to `variable()` function

---

<div class="post-metadata">

**Author:** ![tp-duarte](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tp-duarte/32/7624_2.png) [@tp-duarte](https://talk.observablehq.com/u/tp-duarte)\
**Post date:** [April 3, 2023, 5:33pm UTC](https://talk.observablehq.com/t/feature-request-hiding-cell/2252/19 "2023-04-03T17:33:21Z")

</div>

@qcgm1978 Perfect! Your answer also worked for me!

Thanks for sharing