Skip to main content
Toollyz

Search tools

Search for a command to run...

Website Source Viewer

Paste any page's HTML and get back: a pretty-printed source view (light formatter), the heading outline tree, every external + inline script (with byte counts), every stylesheet, every `<a>` link, every `<img>`, every `<meta>` tag, every `<iframe>`. 100% offline.

What is the Website Source Viewer?

Website Source Viewer is a one-stop inspector for any page's HTML. The textarea accepts the raw View-Source output (or any HTML fragment); DOMParser parses it into a real DOM tree that we then walk for seven distinct views. **Source** — pretty-printed with consistent indentation (the formatter handles self-closing void elements correctly so `<img>`, `<meta>`, `<br>` don't break the tree). **Outline** — the H1-H6 heading hierarchy in DOM order with visual indentation per level — exactly the document outline screen readers see. **Scripts** — every `<script>` tagged inline vs external, byte count for inline blobs, type attribute if set. **Styles** — every `<link rel=stylesheet>` href + every `<style>` block with byte counts. **Links** — every `<a href>` with the anchor text and rel attribute. **Images** — every `<img>` with src, alt, width × height. **Meta** — every `<meta>` and its content. Top-of-page stats show element / script / style / image / link / iframe counts at a glance.

How to use it

  1. Paste a page's HTML into the textarea — or click Sample for a complete example.
  2. Read the live stat bar: total elements, scripts, styles, images, links, iframes.
  3. Switch between the seven tabs (Source / Outline / Scripts / Styles / Links / Images / Meta).
  4. Click Copy on the Source view to grab the prettified HTML.

Benefits

  • Seven views from one paste: Source, Outline, Scripts, Styles, Links, Images, Meta.
  • Light HTML pretty-printer with correct self-closing handling.
  • Heading outline tree with visual indentation per level.
  • Asset inventory tables for scripts, styles, links, images, iframes.
  • Byte counts for inline scripts and styles — find the bloat.
  • Tab navigation keeps the page lightweight (only the active tab renders).
  • Tracks total element count, script count and image count.
  • Settings (paste) persists in localStorage for an undo-friendly workflow.
  • Runs 100% in your browser — no server, no upload.

Frequently asked questions

Can it fetch a URL directly?

No — the site is statically exported with no backend. Browser same-origin policy would block client-side fetches of third-party URLs anyway. Open the page, View Source, paste here.

Does the pretty-printer handle invalid HTML?

Yes — DOMParser is forgiving. Browser-style error recovery applies, so partial fragments, unclosed tags, or HTML5 quirks parse into a 'best-effort' DOM that the tool can still walk.

Why is the inline script byte count interesting?

Inline scripts go straight in the HTML payload — every byte is critical-path. A 200-line inline `<script>` adds ~5 KB of blocking JS to time-to-first-byte. The Scripts tab flags them so you know what to lift out to an external file.

Does it parse style content?

We list `<style>` blocks and external `<link>` stylesheets, but don't parse the CSS itself. Use the dedicated CSS Minifier or CSS Formatter for that.

What about JavaScript content?

Same — listed but not parsed. For JS minification or analysis use the JS Minifier or a dedicated tool.

Why no syntax highlighting on the Source tab?

Shipping a full HTML highlighter would add significant bundle weight for limited benefit — the prettified output is readable as-is. For colourised export, use the Code Screenshot Generator.

How does the outline differ from screen-reader behaviour?

Outline algorithm in HTML5 was deprecated; modern screen readers use document order of headings. This tool matches that — H1-H6 in DOM order with indentation per level.

Why does the meta tab include both `name=` and `property=`?

OG tags use `property=`, most others use `name=`, viewport / http-equiv use their own attributes. The tool normalises all three so you see every meta tag in one table.

What's a reasonable element count?

A typical content page has 500-2,000 elements. Above 3,000 you're hitting modern SPA territory; above 10,000 the page is likely under-optimised and bad for performance.

Are my pastes saved?

Yes — your HTML input persists in localStorage under `toollyz:source-viewer`.

Is anything uploaded?

No. Parsing and analysis run entirely in your browser.

Related tools

See all developer tools