Inspect Element HTML with HTML Viewer Webflow App
Inspect selected Webflow markup, follow its nested structure, and copy HTML directly from Designer.
Without a markup view in Designer, builders may inspect an element by hand or switch to another tool. HTML Viewer displays its markup in a Designer extension and refreshes the view when the selection changes.
Made by Paul Rodriguez, HTML Viewer is for Webflow users examining layouts, debugging nested components, or preparing HTML excerpts for documentation. The app is listed as free.
What's included
The extension combines these details and actions in its markup view:
- Shows nested elements recursively, using indentation and syntax highlighting.
- Displays text, classes, and attributes, including src and alt.
- Detects heading tags from h1 through h6.
- Copies HTML to the clipboard with a one-click option.
Setting it up
HTML Viewer is a Webflow Designer extension built with Designer API v2. Install it, then select an element in Designer to see its markup; selecting another element updates the display.
What it handles
In a Webflow project, the extension helps builders inspect layouts, troubleshoot nested components, and prepare markup snippets for documentation. Its recursive view makes the selected element’s nested content visible, with indentation to show the structure.
For an image, the markup view can show attributes such as src and alt. It also displays text and classes, and detects heading levels from h1 to h6.
HTML Viewer FAQ
Who made HTML Viewer?
HTML Viewer was made by Paul Rodriguez.
What happens when I select another element?
The displayed HTML updates when the selection changes in Webflow Designer.
Can HTML Viewer help with documentation?
Yes. Webflow users can use it to prepare HTML snippets for documentation.
How is nested markup presented?
Nested elements appear recursively, with indentation and syntax highlighting.