# Newbie: focused viewing notebooks and visualizations (reader mode)

**URL:** <https://talk.observablehq.com/t/newbie-focused-viewing-notebooks-and-visualizations-reader-mode/4199>\
**Category:** Help\
**Created:** [November 23, 2020, 4:29pm UTC](https://talk.observablehq.com/t/newbie-focused-viewing-notebooks-and-visualizations-reader-mode/4199 "2020-11-23T16:29:23Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![thelazydogsback](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/thelazydogsback/32/3896_2.png) [@thelazydogsback](https://talk.observablehq.com/u/thelazydogsback)\
**Post date:** [November 23, 2020, 4:29pm UTC](https://talk.observablehq.com/t/newbie-focused-viewing-notebooks-and-visualizations-reader-mode/4199/1 "2020-11-23T16:29:23Z")

</div>

Sorry if I’m missing something…  
How do I view notebooks without the editing chrome in a way that maximizes screen real-estate for consumption rather than editing? E.g.:  
(1) A “reader mode” for the whole notebook – no editing margins on left or right – take up whole screen width  
(2) Temporarily select a single cell/visualization and make it full screen in a modal

thanks!

---

<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:** [November 23, 2020, 6:14pm UTC](https://talk.observablehq.com/t/newbie-focused-viewing-notebooks-and-visualizations-reader-mode/4199/2 "2020-11-23T18:14:29Z")

</div>

Good question! The closest thing would likely be Observable’s embed URL:

 ![embed url](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/e/e02f62083f57a432d7150a02462870f20bea6c15.gif)

You can find more details about Observable’s embed feature in this notebook:

> **[Easier Embedding and Sharing with Observable](https://observablehq.com/@observablehq/easier-embedding-and-sharing-with-observable)**
>
> Easier Embedding and Sharing with Observable What's New? We are excited to announce a new tool for embedding on Observable! Now, you can share your full interactive notebook on your blog, on platforms like Notion or Wordpress and many more through...

Note that Observable’s default CSS limits the maximum width of some elements to make them more readable. If you want to override this width, add a cell with the following code to your notebook:

```javascript
html`<style>
.katex-display, figure, h1, h2, h3, h4, h5, h6, p, table {
  max-width: 100%;
}
</style>`

```

There is however no (official) way to increase the actual notebook width inside the editor user interface.

---

<div class="post-metadata">

**Author:** ![thelazydogsback](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/thelazydogsback/32/3896_2.png) [@thelazydogsback](https://talk.observablehq.com/u/thelazydogsback)\
**Post date:** [November 24, 2020, 5:10pm UTC](https://talk.observablehq.com/t/newbie-focused-viewing-notebooks-and-visualizations-reader-mode/4199/3 "2020-11-24T17:10:01Z")

</div>

Thanks, I knew about embedding – but that seems like an awful lot of work if all I just want is just a better experience when I’m browsing notebooks.

---

<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:** [November 24, 2020, 5:39pm UTC](https://talk.observablehq.com/t/newbie-focused-viewing-notebooks-and-visualizations-reader-mode/4199/4 "2020-11-24T17:39:24Z")

</div>

> [@thelazydogsback](#):
>
> if all I just want is just a better experience when I’m browsing notebooks.

You can also select “View in fullscreen” via the dot menu in the upper right, which will remove most of the UI. Note that this is not the same as putting your tab into fullscreen mode via your browser’s settings.

---

<div class="post-metadata">

**Author:** ![samguyer](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/samguyer/32/4942_2.png) [@samguyer](https://talk.observablehq.com/u/samguyer)\
**Post date:** [May 10, 2021, 6:45pm UTC](https://talk.observablehq.com/t/newbie-focused-viewing-notebooks-and-visualizations-reader-mode/4199/5 "2021-05-10T18:45:20Z")

</div>

I’m brand new to Observable as well, although I have been using D3 for a few years. I’m surprised at the huge waste of space in the default notebook layout. The chart that I’m currently working on is a treemap, and in the current view it sits in the middle of the window and only occupies about 50% of the available width of the screen.

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [May 10, 2021, 8:01pm UTC](https://talk.observablehq.com/t/newbie-focused-viewing-notebooks-and-visualizations-reader-mode/4199/6 "2021-05-10T20:01:56Z")

</div>

> [@samguyer](#):
>
> The chart that I’m currently working on is a treemap, and in the current view it sits in the middle of the window and only occupies about 50% of the available width of the screen.

While that’s true of the _notebook_, it’s not necessarily true of the of the visualization’s ultimate home, if you embed it elsewhere. For example, [here’s a notebook I wrote](https://observablehq.com/@mcmcclur/ncaa-brackets) to visualize NCAA tournament brackets, which could certainly benefit from more space. It gets that space, when I [embed it in a web page](https://wncviz.com/demos/NCAA_Brackets/).

From my perspective, Observable is really a development environment. In that context, extra space for things like the tree view on the right and the embedding button on the left make sense. I agree with you that there’s more than necessary but it doesn’t bother me because I’m ultimately interested in embedding.

---

<div class="post-metadata">

**Author:** ![samguyer](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/samguyer/32/4942_2.png) [@samguyer](https://talk.observablehq.com/u/samguyer)\
**Post date:** [May 11, 2021, 3:36pm UTC](https://talk.observablehq.com/t/newbie-focused-viewing-notebooks-and-visualizations-reader-mode/4199/7 "2021-05-11T15:36:48Z")

</div>

Ah ok, that is a better way to think about it. Thanks. I will shift over to using the embedding for the real display.

Cool visualization, btw.
