# First (working) prototype of a WYSIWYG editor for Dashboard 2.0

**URL:** <https://discourse.nodered.org/t/first-working-prototype-of-a-wysiwyg-editor-for-dashboard-2-0/91128>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [19 September 2024 20:50 UTC](https://discourse.nodered.org/t/first-working-prototype-of-a-wysiwyg-editor-for-dashboard-2-0/91128 "2024-09-19T20:50:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [19 September 2024 20:50 UTC](https://discourse.nodered.org/t/first-working-prototype-of-a-wysiwyg-editor-for-dashboard-2-0/91128/1 "2024-09-19T20:50:32Z")

</div>

This is _very much_ a W.I.P (just in case it's not already clear from the shoddy UI you're about to watch), but this is the first step in our vision for what we're hoping to achieve with Dashboard 2.0 and a supporting layout editor, i.e. editing the layout live in the Dashboard itself.

![ScreenRecording2024-09-19at21.34.33-ezgif.com-video-to-gif-converter](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/2/62e9d35cdea825de0e137a9ca6b4a785bec8b51f.gif)

This video shows a significant breakthrough for us as it demonstrates groups being re-ordered (i.e. the nodes being modified) from within the Dashboard editor and being saved/deployed all without being in the Node-RED editor).

Next steps will be re-sizing, supporting different layout types, and clearing out the significant number of hardcoded lines of code I currently have in order to get this working 😃

You'll need to be patient before this is ready for release, but wanted to share what's going on behind the scenes nonetheless.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [23 September 2024 17:45 UTC](https://discourse.nodered.org/t/first-working-prototype-of-a-wysiwyg-editor-for-dashboard-2-0/91128/2 "2024-09-23T17:45:26Z")

</div>

and now with group re-sizing:

![ScreenRecording2024-09-23at18.42.20-ezgif.com-video-to-gif-converter](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/c/dc160967e952f937e0b021426c22f21c53d69568.gif)

---

<div class="post-metadata">

**Author:** ![SonoraTechnical](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sonoratechnical/32/20033_2.png) [@SonoraTechnical](https://discourse.nodered.org/u/SonoraTechnical)\
**Post date:** [26 September 2024 17:02 UTC](https://discourse.nodered.org/t/first-working-prototype-of-a-wysiwyg-editor-for-dashboard-2-0/91128/3 "2024-09-26T17:02:11Z")

</div>

Nice to see development moving in this direction! The trend in the last two decades has been to move most major development tools away from a WYSIWYG environment. Glad to see you all bucking the trend.

---

<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:** [26 October 2024 17:02 UTC](https://discourse.nodered.org/t/first-working-prototype-of-a-wysiwyg-editor-for-dashboard-2-0/91128/4 "2024-10-26T17:02:32Z")

</div>

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