Live DOM panel (HTML)

In Blend for Visual Studio, the Live DOM panel shows the structure of the app that you’re designing and lets you select elements that you want to style. More importantly, Live DOM view automatically and dynamically updates as the state of the app changes, including elements declared in the HTML markup and elements that are dynamically generated.

Elements in the Live DOM panel

The Live DOM panel displays each element within the DOM (Document Object Model). Each element is displayed relative to the html document node and to the other elements in the DOM. Each element is displayed by its HTML ID (or by the element name if no ID is assigned). If one or more classes are assigned to the element, the first class name is displayed in darker text after the element.

Icons are displayed before each element to indicate what the element is.


b5-icn-livedom-listview   indicates a ListView control

b5-btn-livedom-appbar   indicates an AppBar control

b5-icn-livedom-button   indicates a Button control

b5-icn-livedom-rating   indicates a Review control

b5-icn-livedom-element   indicates an HTML element

The structure of a document can be significantly altered at runtime by JavaScript and browser rendering engines. For example:

  • Elements may be added or removed.

  • Relationships between elements may change.

  • New classes may be created and existing classes may be renamed.

  • Attribute values may be changed.

If an element has been dynamically changed, one of the following icons is displayed after the element to indicate how it was altered:

b5-icn-livedom-parser   indicates an element that is generated by the parser.

b5-icn-livedom-dynamic   indicates an element that is dynamically generated.

b5-icn-livedom-moved   indicates an element that has been dynamically moved.

Lice DOM fragment icon   indicates an HTML fragment.

Element visibility

You can change the visibility of elements from the Live DOM panel.

Click Hide 4230580c-9c6b-4144-a3cc-1c68ea7b8cf9 to turn off the visibility of an element.

Click Show aea22778-684f-4832-9cd2-7329cee0b699 to turn on the visibility of an element.

See Also


Related documents view (HTML)


Areas of the workspace (Windows Store apps)

Blend app workspace (HTML)

Assets panel (HTML)

CSS Properties panel (HTML)

Device panel (HTML)

HTML Attributes panel

Interactive mode (HTML)

Projects panel (HTML)

Style Rules panel (HTML)

Tools panel (HTML)