# Better Node Tree and Editor Synchronization **URL:** \ **Category:** Elements\ **Created:** [November 15, 2024, 6:40pm UTC](https://forums.realmacsoftware.com/t/better-node-tree-and-editor-synchronization/45285 "2024-11-15T18:40:38Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [November 15, 2024, 6:40pm UTC](https://forums.realmacsoftware.com/t/better-node-tree-and-editor-synchronization/45285/1 "2024-11-15T18:40:38Z")
I would very much like to see a way for the selection in the node tree to scroll the selected component into view in the editor. It can be disconcerting when a node is selected and then you start editing the properties but you don’t have the component in view in the editor. Ideally when clicking on a node it would be scrolled into view in the editor. But it might be the case that some additional action makes this happen, possibly a double-click. Would something like this be feasible? While we are on the topic of node/editor navigation I would find it incredibly useful if there was something like a scroll to top in the Elements editor. When doing mobile first development I seem to spend a lot of time scrolling back to the top of the editor. In fact, it would be nice to have it work both ways, scroll to the top or bottom. Although if my first request in this post was implemented this would satisfy my needs as I could simply select a node at the bottom of the tree to have it scrolled into view. _UPDATE: one other addition I would like to see in the Node Browser is the ability to color code the root nodes. So in addition to being able to give them unique names, also allow a background color to be set. This would make visually navigating the tree so much easier._ ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [November 21, 2024, 6:35pm UTC](https://forums.realmacsoftware.com/t/better-node-tree-and-editor-synchronization/45285/2 "2024-11-21T18:35:54Z")
> [@handshaper](#): > > UPDATE: one other addition I would like to see in the Node Browser is the ability to color code the root nodes. So in addition to being able to give them unique names, also allow a background color to be set. This would make visually navigating the tree so much easier. A minimum coloring option would be to add a background color to globals that are in the node tree. The breadcrumb at the bottom of the window already does this by coloring them GREEN, why not also do the same thing in the node browser as it would make finding them much easier. The coloring is also used in the editor for the component label, why not do this in the node browser as well. ---
**Author:** ![sbchasin](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/sbchasin/32/26943_2.png) [@sbchasin](https://forums.realmacsoftware.com/u/sbchasin)\ **Post date:** [December 15, 2024, 8:53pm UTC](https://forums.realmacsoftware.com/t/better-node-tree-and-editor-synchronization/45285/3 "2024-12-15T20:53:40Z")
> [@handshaper](#): > > Ideally when clicking on a node it would be scrolled into view in the editor. And the reverse, when a component is selected in the editor, the node view scrolls to the component in its view (it already selects it, but if not in view, it doesn’t scroll to bring it in view) ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [December 15, 2024, 9:47pm UTC](https://forums.realmacsoftware.com/t/better-node-tree-and-editor-synchronization/45285/4 "2024-12-15T21:47:25Z")
> [@sbchasin](#): > > And the reverse, when a component is selected in the editor, the node view scrolls to the component in its view (it already selects it, but if not in view, it doesn’t scroll to bring it in view) I agree, these selections should always be in sync and in view. It gets highly confusing if you are working something that is not visible, but selected. ---
**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\ **Post date:** [December 15, 2024, 10:55pm UTC](https://forums.realmacsoftware.com/t/better-node-tree-and-editor-synchronization/45285/5 "2024-12-15T22:55:06Z")
It would be nice to see the current selection also reflected in the structure toolbar at the bottom, ie. container \> **flex** \> image \> etc. ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [December 16, 2024, 12:45am UTC](https://forums.realmacsoftware.com/t/better-node-tree-and-editor-synchronization/45285/6 "2024-12-16T00:45:41Z")
But isn’t the current selection in the sturcture toolbar always the last item in trail? ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [December 16, 2024, 8:52am UTC](https://forums.realmacsoftware.com/t/better-node-tree-and-editor-synchronization/45285/7 "2024-12-16T08:52:10Z")
> [@handshaper](#): > > A minimum coloring option would be to add a background color to globals that are in the node tree. At the very least we should colour the Globals green 🤔 > [@sbchasin](#): > > when a component is selected in the editor, the node view scrolls to the component in its view (it already selects it, but if not in view, it doesn’t scroll to bring it in view) Yes, we should probably support this both ways, I’ll add a ticket for it! > [@anon68150607](#): > > It would be nice to see the current selection also reflected in the structure toolbar at the bottom, ie. container \> **flex** \> image \> etc. Hmm, the current selection is always the last in the breadcrumb trail, making it easy to navigate back up the tree. But you want to show the entire tree around an object? ---
**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\ **Post date:** [December 16, 2024, 11:54am UTC](https://forums.realmacsoftware.com/t/better-node-tree-and-editor-synchronization/45285/8 "2024-12-16T11:54:34Z")
I think having children of the selected elements would be useful in being able to quickly traverse a single branch of the tree, as well as providing some indication of where the current object sits in the hierarchy. I see it as a convenience from always having to switch to the node browser, which will always provide a more complete, but more complex representation of the entire tree. The main difficulty would be communicating elements that have multiple children, such as flex/grid elements or groups. If possible, having a drop-down/pop-up to select which child you want to focus on, with the node view (if visible), viewport and structure bar all updating at once to reflect the current selection. Container \> Flex \> **Flex Item[1]** \> [Image | Text | SVG] \> etc… ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [December 16, 2024, 12:32pm UTC](https://forums.realmacsoftware.com/t/better-node-tree-and-editor-synchronization/45285/9 "2024-12-16T12:32:07Z")
> [@anon68150607](#): > > The main difficulty would be communicating elements that have multiple children, such as flex/grid elements or groups. If possible, having a drop-down/pop-up to select which child you want to focus on, with the node view (if visible), viewport and structure bar all updating at once to reflect the current selection. Urgh, yeah. I think it’s better to work in the Node tree… just imagine if you could make the node tree always visible 😜 ---
**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\ **Post date:** [December 16, 2024, 1:39pm UTC](https://forums.realmacsoftware.com/t/better-node-tree-and-editor-synchronization/45285/10 "2024-12-16T13:39:42Z")
> [@dan](#): > > I think it’s better to work in the Node tree… just imagine if you could make the node tree always visible 😜 To me, this is an interesting paradox. The node tree is arguably the most useful tool in Elements. Yet, it is the farthest from a WYSIWYG interface. ---
**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\ **Post date:** [December 16, 2024, 1:43pm UTC](https://forums.realmacsoftware.com/t/better-node-tree-and-editor-synchronization/45285/11 "2024-12-16T13:43:32Z")
> [@dan](#): > > …just imagine if you could make the node tree always visible 😜 Just imagine if you could select and work with elements visually within the page viewport and not have to rely on the node tree. 😉 ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [December 16, 2024, 2:01pm UTC](https://forums.realmacsoftware.com/t/better-node-tree-and-editor-synchronization/45285/12 "2024-12-16T14:01:35Z")
> [@anon68150607](#): > > Just imagine if you could select and work with elements visually within the page viewport and not have to rely on the node tree. 😉 You mostly can, and more improvements are coming. ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [December 16, 2024, 2:06pm UTC](https://forums.realmacsoftware.com/t/better-node-tree-and-editor-synchronization/45285/13 "2024-12-16T14:06:38Z")
> [@Flash](#): > > To me, this is an interesting paradox. The node tree is arguably the most useful tool in Elements. Yet, it is the farthest from a WYSIWYG interface. Every good/powerful design tool has a layers (or node) panel, Photoshop, Figma, Cinema 4D, Pixelmator… there’s a reason they exist. Designing complex things, gets complex fast. Personally, I love the Node tree, and see it as an added benefit and not taking away from the WYSIWYG nature of Elements. ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [December 16, 2024, 4:32pm UTC](https://forums.realmacsoftware.com/t/better-node-tree-and-editor-synchronization/45285/14 "2024-12-16T16:32:46Z")
> [@dan](#): > > Personally, I love the Node tree, and see it as an added benefit and not taking away from the WYSIWYG nature of Elements. I think the node tree is awesome. I cannot imagine working in Elements without it. I look forward to the day when it can hopefully always be visible in the UI to make adding elements even easier. ---
**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\ **Post date:** [December 16, 2024, 4:38pm UTC](https://forums.realmacsoftware.com/t/better-node-tree-and-editor-synchronization/45285/15 "2024-12-16T16:38:12Z")
💡 I think that the **Pages** tab and the **Page Layout** tab (node tree) could usefully be combined. I am not sure what value there is in having them separated? ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [May 12, 2025, 5:07pm UTC](https://forums.realmacsoftware.com/t/better-node-tree-and-editor-synchronization/45285/16 "2025-05-12T17:07:45Z")
@handshaper new dev diary just dropped, [this ones for you](https://forums.realmacsoftware.com/t/dev-diary-80-we-just-made-selecting-things-way-easier-in-elements/47522) 😉 ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [May 12, 2025, 6:15pm UTC](https://forums.realmacsoftware.com/t/better-node-tree-and-editor-synchronization/45285/17 "2025-05-12T18:15:24Z")
@dan Made my day Dan, what a great way to start the week. It looks fantastic, can’t wait to give it a spin. Well done!