HTML Viewer

About HTML Viewer

HTML Viewer lets you instantly inspect the complete HTML structure of any Webflow element — including all nested children, classes, and attributes — with clean syntax highlighting.

What It Does

View the full HTML markup of your selected element in real time. Perfect for debugging layouts, understanding element hierarchy, inspecting attributes, or preparing code for export.

Key Features

• Real-time display: HTML updates instantly when you select any element.
• Complete hierarchy: Shows all nested children recursively.
• Syntax highlighting: Color-coded tags, attributes, and values for easy reading.
• Smart class detection: Automatically converts Webflow class names to proper HTML format.
• Full attributes: Displays all relevant HTML attributes such as src, alt, and loading.
• Heading levels: Detects and displays the correct h1–h6 tags.
• Clean formatting: Indented, readable HTML structure.

Perfect For

• Inspecting element structure before export
• Debugging nested component layouts
• Understanding class inheritance and structure
• Verifying custom attributes and properties
• Learning how Webflow generates HTML output
• Copying clean HTML snippets for documentation

How It Works

1. Select any element in the Webflow Designer.
2. View the complete HTML structure instantly.
3. Inspect classes, attributes, and nested elements.
4. Switch elements to explore their HTML output.

What You'll See

• Tags: All HTML elements (div, section, h1, p, img, etc.).
• Classes: Converted to lowercase with hyphens (e.g., image-3).
• Attributes: Full attribute list for each element.
• Text content: All text inside elements.
• Children: Properly indented nested structure.
• Self-closing tags: Correct formatting for img, br, hr, and more.

Technical Details

• Built with Webflow Designer API v2.
• Supports all Webflow element types (DivBlock, Section, Heading, etc.).
• Handles custom DOM elements and HTML tags.
• Dynamically extracts heading levels (h1–h6).
• Retrieves attributes via getAllAttributes().
• Processes nested elements recursively.
• Uses custom regex parsing for syntax highlighting.

Example Use Case

Select a div with nested content and instantly preview the corresponding HTML output with accurate indentation and syntax highlighting.