> For the complete documentation index, see [llms.txt](https://app-docs.creoglyph.io/attriflow/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://app-docs.creoglyph.io/attriflow/features/dynamic-dom-navigation.md).

# Dynamic DOM Navigation

### Overview

* Seamlessly convert raw HTML to Webflow elements.
* Ensure HTML content is preserved and compatible.

### Steps

* Open AttriFlow in your Webflow project.
* The DOM Tree Navigator appears on the left panel, displaying the hierarchical structure of your project.
* **Single Element**: Click on any element in the tree to select it.
* **Multiple Elements**: Use **Ctrl+Click** to select multiple elements simultaneously.
* **Enter Components**: Double-click on a component in the tree to dive into its structure.
* **Exit Components**: Click the **Back to Parent** button to return to the main structure.
* Use the **Expand All** or **Collapse All** icons to control the visibility of child elements in the DOM tree.
* **Manual Refresh**: Click the **Refresh DOM** icon to reload the tree instantly.

{% hint style="danger" %}
While you can explore the DOM visually, the app currently lacks a built-in **search bar** to locate specific elements by tag, class, or ID directly.

Projects with an extensive DOM tree might experience slower navigation or longer refresh times.

Certain Webflow component structures may not display their full hierarchy due to Webflow-specific constraints.

While there is auto-refresh, frequent changes to the DOM may still require manual refreshing to capture all updates.
{% endhint %}