# Dashboard CSS - Visualising changes during development

**URL:** <https://discourse.nodered.org/t/dashboard-css-visualising-changes-during-development/52664>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [24 October 2021 15:03 UTC](https://discourse.nodered.org/t/dashboard-css-visualising-changes-during-development/52664 "2021-10-24T15:03:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![letshin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/letshin/32/51665_2.png) [@letshin](https://discourse.nodered.org/u/letshin)\
**Post date:** [24 October 2021 15:03 UTC](https://discourse.nodered.org/t/dashboard-css-visualising-changes-during-development/52664/1 "2021-10-24T15:03:00Z")

</div>

Hi. Wanted to ask during CSS changes how do people visualise changes. Uploading changes and reloading the webpage takes forever.

Is there a way to get a 'dummy' html/css onto jsfiddle and edit the css from there before reuploading onto Node Red? Where can I get the default CSS from?

---

<div class="post-metadata">

**Author:** ![HaroldPetersInskipp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/haroldpetersinskipp/32/42319_2.png) [@HaroldPetersInskipp](https://discourse.nodered.org/u/HaroldPetersInskipp)\
**Post date:** [24 October 2021 15:47 UTC](https://discourse.nodered.org/t/dashboard-css-visualising-changes-during-development/52664/2 "2021-10-24T15:47:08Z")

</div>

I just use Firefox's web developer tools to visualize my changes, then copy them into an editor or directly into a ui-template node.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [25 October 2021 09:06 UTC](https://discourse.nodered.org/t/dashboard-css-visualising-changes-during-development/52664/3 "2021-10-25T09:06:12Z")

</div>

> [@letshin](#):
>
> Uploading changes and reloading the webpage takes forever.

What do you mean by uploading changes? Where are you changing css?

---

<div class="post-metadata">

**Author:** ![letshin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/letshin/32/51665_2.png) [@letshin](https://discourse.nodered.org/u/letshin)\
**Post date:** [25 October 2021 21:44 UTC](https://discourse.nodered.org/t/dashboard-css-visualising-changes-during-development/52664/4 "2021-10-25T21:44:57Z")

</div>

Sorry, I meant deploying changes, not uploading. I'm editing CSS with the on the template node. Ideally, I would like to export a mockup of a dashboard page and trial changes there to make the editing more efficient, before deploying changes I would be fully happy with onto node-red.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 October 2021 09:24 UTC](https://discourse.nodered.org/t/dashboard-css-visualising-changes-during-development/52664/5 "2021-10-26T09:24:32Z")

</div>

> [@letshin](#):
>
> Uploading changes and reloading the webpage takes forever.

So if you edit the template node, hit Deploy (with deploy changed nodes selected) and then switch to browser you should see the results immediately the template node is run. It should not take forever.

---

<div class="post-metadata">

**Author:** ![letshin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/letshin/32/51665_2.png) [@letshin](https://discourse.nodered.org/u/letshin)\
**Post date:** [26 October 2021 10:05 UTC](https://discourse.nodered.org/t/dashboard-css-visualising-changes-during-development/52664/6 "2021-10-26T10:05:05Z")

</div>

Yes, I know this, thanks. But deploying these changes (I have already selected changed nodes only) takes between 3-10s each time and I'm using developer tools to identify the different CSS classes to modify on my current system. Reloading the website also can take 1-4 seconds. Not to mention the server (Pi Zero W) crashing every so often. So it all adds up to taking a very long time to compare changes. I am of course aware this is likely a limitation of the kit I am using. I am looking to shift the server to better hardware but I am first trying to see if I can achieve what I want out of Node-Red before spending more money which I think is reasonable.

So I'm asking if there is a more efficient/alternative way of doing this. I.e. how one can possibly export the dashboard HTML and CSS and open it as a separate documents from Node-Red to visualise changes. I hope that makes sense.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 October 2021 10:36 UTC](https://discourse.nodered.org/t/dashboard-css-visualising-changes-during-development/52664/7 "2021-10-26T10:36:38Z")

</div>

A Pi shouldn't crash, I would sort that issue first. You are right, on a Pi Zero even deploying changes can take a little while. I suggest that you install node-red on your PC and use that for testing css. Provided the display layer of your application is separate from the workings then that should not be difficult. All my ui stuff goes through MQTT so I can run the dashboard flows on any machine I like, just by connecting to the appropriate broker.

Edit: I don't know of any way to do the export you suggested, but that is not an area where I have expertise.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [26 October 2021 14:42 UTC](https://discourse.nodered.org/t/dashboard-css-visualising-changes-during-development/52664/8 "2021-10-26T14:42:09Z")

</div>

CSS alone does not talk too much. It works together with the HTML structure. So the only way to understand why some rule affects and what it affects, is to have it working with the actual HTML. And to analyse it there is developer tools in all modern browsers. Each of them has some thing better than other but overall, there is no better tools. To simplify the workflow, may be this would help : [What's New In DevTools (Chrome 65) - Chrome Developers](https://developer.chrome.com/blog/new-in-devtools-65/)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [26 October 2021 18:09 UTC](https://discourse.nodered.org/t/dashboard-css-visualising-changes-during-development/52664/9 "2021-10-26T18:09:14Z")

</div>

On my Raspberry Pi Zero deploy is sometimes instant and sometimes takes several seconds.  
Probably it's no comfort to you but on a Pi 3B or 4 it always deploys faster than I can switch to the dashboard tab. I guess that's the difference between single and multi core processors.

---

<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:** [25 November 2021 18:09 UTC](https://discourse.nodered.org/t/dashboard-css-visualising-changes-during-development/52664/10 "2021-11-25T18:09:26Z")

</div>

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