LiveCanvas 3.11: the Tree View



May 6, 2024

Join our Discord

The last LiveCanvas update brings a new, powerful feature to the editor, allowing precise inspection and editing of the page elements: the Tree view, accessible via a new button placed in the main toolbar.

Upon clicking this button, a window is revealed, showing all the HTML elements of the page in a collapsible tree view: clicking each element, the inner elements are revealed, showing each and every tag. Right clicking reveals a contextual menu that helps you easily interact and edit elements.

The Tree View is especially beneficial for managing long or intricately designed pages. It's ideal for selecting and editing elements that are not easily reachable via the classic contextual menus, egĀ  using Z-Index, negative margins, absolute positioning, and more, offering an alternative way to reach handles that may be obscured by other elements.


Let's highlight the main features:

1. Expand and Collapse all: Easily expand or collapse all elements with a single action.
2. Draggable: The Tree window is fully draggable (and resizable), allowing you to position it anywhere on your screen for optimal accessibility.
3. Interactive Highlighting: Hover over any item in the Tree to see a blue border around the corresponding element on the page, helping you grasp which element you're on.
4. Reverse Highlighting: Vice versa, when you hover over an element on the page, a magenta border highlights the corresponding item in the Tree.
5. Contextual Interaction: Right-click on any Tree item to access a contextual menu for more detailed element management.
6. Code Editor Context: As you hover over the code editor, the corresponding item in the Tree is highlighted, helping you keep focus on the right context.
7. Rearrangement Flexibility: Effortlessly rearrange elements within their parent elements to perfect your page layout.
8. Class Visibility on hover: The first three classes of each element are displayed by default; hover over the element to view the full list of applied classes for deeper insight.
9. Contextual Menu Navigation: When opening contextual menus on the page, the Tree window automatically scrolls to and highlights the active element, saving time and maintaining focus.

Hope you'll enjoy this release, and that it will help you unleash your creativity. See you next time!