# Add an image, or even a dynamic svg, to a node in the admin editor?

**URL:** <https://discourse.nodered.org/t/add-an-image-or-even-a-dynamic-svg-to-a-node-in-the-admin-editor/40142>\
**Category:** General\
**Created:** [1 February 2021 01:05 UTC](https://discourse.nodered.org/t/add-an-image-or-even-a-dynamic-svg-to-a-node-in-the-admin-editor/40142 "2021-02-01T01:05:37Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![vegabook](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vegabook/32/36284_2.png) [@vegabook](https://discourse.nodered.org/u/vegabook)\
**Post date:** [1 February 2021 01:05 UTC](https://discourse.nodered.org/t/add-an-image-or-even-a-dynamic-svg-to-a-node-in-the-admin-editor/40142/1 "2021-02-01T01:05:37Z")

</div>

I know that you can create dashboards in a separate tab using [node-red-dashboard](https://flows.nodered.org/node/node-red-dashboard). However is it possible to have actual visualizations in the admin editor itself? For example might it be possible for part of the DAG to include a chart of the output of a node of some kind, right there in the editor? The idea is this:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/5/d57e4cd48f1e5249b0789ee2afcf976373d50117.png)

I guess another version of the question is whether or not appearance of custom nodes is limited to what is shown here:  
[https://nodered.org/docs/creating-nodes/appearance](https://nodered.org/docs/creating-nodes/appearance)  
Are there no other javascript "hooks" we can use to target the admin editor with other visual things? Or do such things _have to_ live in another tab.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [1 February 2021 10:22 UTC](https://discourse.nodered.org/t/add-an-image-or-even-a-dynamic-svg-to-a-node-in-the-admin-editor/40142/2 "2021-02-01T10:22:16Z")

</div>

There are very few graphical elements for the editor, but see [node-red-contrib-data-view (node) - Node-RED](https://flows.nodered.org/node/node-red-contrib-data-view) to include a chart in the editor.  
It's still in development, but does provide a basic chart.

---

<div class="post-metadata">

**Author:** ![vegabook](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vegabook/32/36284_2.png) [@vegabook](https://discourse.nodered.org/u/vegabook)\
**Post date:** [1 February 2021 10:35 UTC](https://discourse.nodered.org/t/add-an-image-or-even-a-dynamic-svg-to-a-node-in-the-admin-editor/40142/3 "2021-02-01T10:35:58Z")

</div>

This is brilliant! So it's proof of concept that you can go "off the reservation" with the design of in-editor nodes. Not that I necessarily want to pollute the editor with all sorts of gumpf, but intermediate visualization of data is really quite a cool use case. And if this is possible, other things must be possible too. This is precisely what I required.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [1 February 2021 10:44 UTC](https://discourse.nodered.org/t/add-an-image-or-even-a-dynamic-svg-to-a-node-in-the-admin-editor/40142/4 "2021-02-01T10:44:14Z")

</div>

I also find `node.status` extremely useful to display data beneath the function & debug nodes.  
See [Node status : Node-RED](https://nodered.org/docs/creating-nodes/status)

![lamp](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/2/22cc71d0c9142f460980b63310b7b73f6d359eff.gif)

---

<div class="post-metadata">

**Author:** ![vegabook](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vegabook/32/36284_2.png) [@vegabook](https://discourse.nodered.org/u/vegabook)\
**Post date:** [1 February 2021 11:27 UTC](https://discourse.nodered.org/t/add-an-image-or-even-a-dynamic-svg-to-a-node-in-the-admin-editor/40142/5 "2021-02-01T11:27:27Z")

</div>

That is just awesome. I'm so excited about Node-red. I had looked at it a few years ago but let it lapse and picked up again because I need a system for financial markets data flows. The only concern I still have is Node-Red's throughput capacity for "firehose" data (say, 300 data points per second) but I assume there are back-pressure capabilities that will allow me to downsample if necessary. I'm going to stress test it on low end hardware (Rpi4) to give me some idea of the minimum throughput capabilities. I'll also be working with arrays and matrices using Apache Arrow (for which [there is a javascript binding](https://arrow.apache.org/docs/js/)) so I'll have to see how that works.

It's a bit of a different use case than IOT but I see no reason why this fantastic project shouldn't be applicable. The node editor workflow is really exaclty what I'm looking for and what I appreciate is the careful design aesthetic and great docs. Very well run project, clearly.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [1 February 2021 11:59 UTC](https://discourse.nodered.org/t/add-an-image-or-even-a-dynamic-svg-to-a-node-in-the-admin-editor/40142/6 "2021-02-01T11:59:57Z")

</div>

> [@vegabook](#):
>
> but I assume there are back-pressure capabilities that will allow me to downsample if necessary.

Yes, but as node-RED is only single threaded, it may be an advantage to downsample the data in a script (not in node-RED), and then use the downsampled data in node-RED to process and display.  
Otherwise the downsampling process will consume the single threaded runtime.

---

<div class="post-metadata">

**Author:** ![vegabook](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vegabook/32/36284_2.png) [@vegabook](https://discourse.nodered.org/u/vegabook)\
**Post date:** [1 February 2021 12:31 UTC](https://discourse.nodered.org/t/add-an-image-or-even-a-dynamic-svg-to-a-node-in-the-admin-editor/40142/7 "2021-02-01T12:31:26Z")

</div>

agreed. There will be a downsampling capability in the datafeed service external to Node-Red (written in Elixir calling Rust for heavy workloads).

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [15 February 2021 12:32 UTC](https://discourse.nodered.org/t/add-an-image-or-even-a-dynamic-svg-to-a-node-in-the-admin-editor/40142/8 "2021-02-15T12:32:11Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.