Webflow app · Development

Inspect Element HTML with HTML Viewer Webflow App

Inspect selected Webflow markup, follow its nested structure, and copy HTML directly from Designer.

HTML Viewer preview

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.

Flowpilot
Flowpilot Get coding and design help in the Webflow Designer, where Flowpilot brings chatbot assistance to your work.
Install app
Smootify
Smootify Build Shopify storefront pages in Webflow, then publish and update their designs from the Designer.
Install app
Sass
Sass Write custom CSS and Sass for a Webflow site, compile it in the browser, and preview it in the designer.
Install app
Class Merger
Class Merger Webflow site owners can consolidate a selected element’s classes into one named class while retaining responsive styles.
Install app
CodeBlock
CodeBlock Add CSS or JavaScript to your Webflow site with an editor that formats code and stays available as you navigate.
Install app