HTML Viewer Online — Free HTML Tree Browser

Browse the DOM tree of any HTML in read-only mode. Attributes shown inline, text nodes labelled, nesting depth visible at a glance — like DevTools, but for any markup you paste.

Input HTML

DOM Tree

What is an HTML Viewer?

An HTML viewer renders any markup as a read-only DOM tree — element nodes with their attributes, text nodes, and comment nodes — laid out by depth. Unlike a live preview iframe (which shows the rendered visual page), a tree viewer shows the underlying structure your markup describes. This is the right tool when you need to inspect structure rather than see how it renders.

The OpenFormatter HTML viewer parses with the browser's native DOMParser — which means it follows the same error-recovery rules a real browser uses, and it never executes scripts or loads external resources. Pasting untrusted HTML is safe.

How to view an HTML tree — 4 steps

Paste HTML. Full document or fragment — both work.
Click View Tree. DOMParser parses the markup; the renderer walks the tree and emits one line per node.
Read the structure. Indent shows depth, attributes show inline, text and comment nodes are labelled.
Copy if needed. Useful for documentation, bug reports, or sharing structure in code review.

Sample input and tree output

Input HTML

<div class="card" id="hero">
  <h2>Hello</h2>
  <p>Body</p>
</div>

DOM Tree

<div class="card" id="hero">
  <h2>
    #text "Hello"
  <p>
    #text "Body"

Read-only tree

Structure-first view: elements, attributes, text, and comments. No editing, no rendering — just the DOM as nodes.

Inline attributes

Every attribute (id, class, data-*, aria-*, src, href) appears on the same line as its tag — no expansion needed.

No script execution

DOMParser parses without running scripts or fetching resources. Pasting untrusted HTML cannot affect your browser.

Common use cases

check_circleInspecting third-party widget HTML before integration
check_circleSharing the structure of a bug-causing fragment in a ticket
check_circleConfirming where a class or id sits in the tree
check_circleAuditing CMS-generated HTML for unexpected wrappers
check_circleReviewing email-template structure node by node
check_circleComparing the DOM of two HTML samples side-by-side
check_circleDocumenting a component's output for design-system docs
check_circleDebugging unexpected text-node whitespace from server templates

Viewer vs. editor vs. live preview

The HTML Viewer shows structure (read-only, tree). The HTML Editor shows source with edit capability and re-formatting on demand. A live preview iframe shows the visual rendering — what the browser paints. Pick by intent: inspect (viewer), modify (editor), or see-as-rendered (preview). All three exist for different stages of HTML work.

Want to do more than browse?

Edit, format, or validate next.

HTML Editor HTML Formatter HTML Validator

Frequently Asked Questions

What does the HTML viewer show me?

A read-only DOM tree of your markup. Each element appears on its own line with its tag name, all attributes inline (id, class, src, data-*, etc.), and indent reflecting nesting depth. Text nodes appear as #text "first 60 chars…". Comments are rendered as . The view is read-only — no edits — making it ideal for inspection without risk of accidental change.

How is this different from the HTML Editor?

The viewer is read-only — paste once, browse the tree, no editing. The Editor is read/write — paste, edit in place with formatting, copy back out. Use the viewer when you only need to inspect structure (e.g. "where does this class live in the tree?"); use the editor when you intend to modify the markup.

Why is this not just the browser DevTools Elements panel?

DevTools shows the DOM of the currently loaded page. This viewer shows the DOM of any markup you paste, without loading it as a page. That matters when (a) you only have a fragment, (b) the markup contains untrusted scripts you do not want executed, or (c) you want to inspect structure without leaving your current tab.

How does it handle malformed HTML?

The viewer uses the browser's built-in DOMParser, which applies the same error-recovery rules as a real browser. Unclosed tags are usually closed at parent boundaries; mis-nested tags are reordered. The output reflects what a browser would render, not the literal markup. Use the HTML Validator if you want to surface the underlying errors.

Are attributes shown in the order I wrote them?

Yes. DOMParser preserves attribute order on each element, and the viewer iterates over element.attributes in that order. So id, class, data-* attributes appear in the same order you wrote them.

Does it execute scripts in the pasted HTML?

No. DOMParser parses HTML to a Document object but does not execute scripts or load external resources. <script> tags appear in the tree as nodes — their content is treated as text. Pasting markup with potentially malicious JavaScript is safe.

Can I paste a fragment, or do I need a full document?

Both work. DOMParser will wrap fragments in synthetic <html>, <head>, and <body> elements — those wrappers will appear in the tree. If you want to see only your fragment, paste it inside <html>...</html> or strip the wrappers visually after viewing.

Is the HTML uploaded?

No. Parsing and tree rendering run entirely in your browser using DOMParser. Any markup containing internal layouts, hidden form values, or proprietary data structures never leaves your device.