📔Dynamic DOM Navigation

Easily explore and interact with your Webflow project's structure using the DOM Navigator. Select elements, manage attributes, and stay synced with real-time updates for efficient project management.

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.

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.