# How to show Json object in a notification popup, pretty-printed
**URL:** https://discourse.nodered.org/t/how-to-show-json-object-in-a-notification-popup-pretty-printed/97111
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [17 May 2025 22:02 UTC](https://discourse.nodered.org/t/how-to-show-json-object-in-a-notification-popup-pretty-printed/97111 "2025-05-17T22:02:10Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [17 May 2025 22:02 UTC](https://discourse.nodered.org/t/how-to-show-json-object-in-a-notification-popup-pretty-printed/97111/1 "2025-05-17T22:02:10Z")
I can pretty print an object to the debug panel:
```auto
const myObject = {
name: 'Eleanor',
age: 30,
hobbies: ['Chocolate', 'Swimming', 'Ornithology']
};
const prettyPrintedObject = JSON.stringify(myObject, null, 2);
msg.payload = (prettyPrintedObject);
return msg;
```
This is the output
But passing that string to a dashboard notify node recombines all the lines:
How can I get a similar pretty print in a dashboard notification?
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [17 May 2025 22:33 UTC](https://discourse.nodered.org/t/how-to-show-json-object-in-a-notification-popup-pretty-printed/97111/2 "2025-05-17T22:33:54Z")
Not really D2 but should be usable anyway. I have a web component that will do this.
> **[Testing TotallyInformation's web-components - syntax-highlight](https://wc.totallyinformation.net/tests/syntax-highlight)**
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [17 May 2025 23:02 UTC](https://discourse.nodered.org/t/how-to-show-json-object-in-a-notification-popup-pretty-printed/97111/3 "2025-05-17T23:02:44Z")
since the notification supports html, just wrap your string in a ``
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [18 May 2025 05:51 UTC](https://discourse.nodered.org/t/how-to-show-json-object-in-a-notification-popup-pretty-printed/97111/4 "2025-05-18T05:51:50Z")
Thanks both. 😄
The `` tags do what I need.
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [18 May 2025 09:46 UTC](https://discourse.nodered.org/t/how-to-show-json-object-in-a-notification-popup-pretty-printed/97111/5 "2025-05-18T09:46:47Z")
> [@jbudd](#):
>
> The `` tags do what I need.
Oops, I spoke too soon.
It does indeed work for the above json snippet (ie it satisfies the title of the thread).
But with real world data it causes the notification popup to extend below the bottom of the screen; no scrollbar is shown.
Without a scrollbar there is no way to get to the "Close" button to click it.
This looks like a bug in the notification node?
Further, `ctrl a` **also** selects everything in the dashboard beneath the popup.
This also looks like a bug in the notification node?
What I'm actually trying to do is display the json that defines a change node so the user can copy it and import into their editor. There are several "Set .... to" lines each containing json, so the pretty output from JSON.stringify() is not really ideal.
I've had a look at the Markdown node too but I can't seem to get the code to both display and be importable.
Edit - What I am trying to achieve is analgous to the editor's "Export a selected node in compact format" function, only with the node settings generated in the dashboard.
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [18 May 2025 09:56 UTC](https://discourse.nodered.org/t/how-to-show-json-object-in-a-notification-popup-pretty-printed/97111/6 "2025-05-18T09:56:29Z")
can you add some local CSS to make the scrollbars auto ?
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [18 May 2025 10:00 UTC](https://discourse.nodered.org/t/how-to-show-json-object-in-a-notification-popup-pretty-printed/97111/7 "2025-05-18T10:00:26Z")
> [@jbudd](#):
>
> But with real world data it causes the notification popup to extend below the bottom of the screen; no scrollbar is shown.
That can be solved by adding styles or utility classes to the pre - or wrap it in a div.
something like:
```html
JSON_HERE
```
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [18 May 2025 10:07 UTC](https://discourse.nodered.org/t/how-to-show-json-object-in-a-notification-popup-pretty-printed/97111/8 "2025-05-18T10:07:26Z")
Good suggestion @dceejay. I can right click in the popup and Inspect to see it's makeup.
I can add
```auto
v-overlay__content {
overflow: scroll;
}
```
Which does create a scrollbar but it's slider is also off the bottom of the screen.
So I can scroll down and then select all the code, but only using the keyboard up/down keys.