<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#0a0a0a">
  <title>Download HTML, view and download website source code</title>
  <meta name="description" content="Paste any URL to view, copy, and download its full HTML source code with syntax highlighting, meta tag extraction, response headers, and asset listing. Works on mobile.">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://downloadhtml.com/">

  <!-- Open Graph -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="Download HTML, view and download website source code">
  <meta property="og:description" content="Paste any URL to view, copy, and download its full HTML source code with syntax highlighting, meta tag extraction, and asset listing.">
  <meta property="og:url" content="https://downloadhtml.com/">
  <meta property="og:image" content="https://downloadhtml.com/og-image.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Illustration of a code editor showing color-coded HTML source with a download arrow icon emerging from beneath the panel">
  <meta property="og:site_name" content="Download HTML">
  <meta property="og:locale" content="en_US">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Download HTML, view and download website source code">
  <meta name="twitter:description" content="Paste any URL to view, copy, and download its full HTML source code with syntax highlighting and metadata extraction.">
  <meta name="twitter:image" content="https://downloadhtml.com/og-image.jpg">
  <meta name="twitter:image:alt" content="Illustration of a code editor showing color-coded HTML source with a download arrow icon emerging from beneath the panel">

  <!-- Favicon (SVG only — works in all modern browsers) -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">

  <!-- Preload self-hosted fonts (above-the-fold, same-origin) -->
  <link rel="preload" href="/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/fonts/jbmono-latin.woff2" as="font" type="font/woff2" crossorigin>

  <link rel="stylesheet" href="/style.css">
  <link rel="stylesheet" href="/prism.min.css">

  <!-- JSON-LD -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebApplication",
        "@id": "https://downloadhtml.com/#app",
        "name": "Download HTML",
        "url": "https://downloadhtml.com/",
        "description": "View, copy, and download the HTML source code of any webpage with syntax highlighting, meta tag extraction, response headers, and asset listing.",
        "applicationCategory": "DeveloperApplication",
        "operatingSystem": "Any",
        "browserRequirements": "Requires JavaScript and a modern browser",
        "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
        "creator": { "@type": "Organization", "name": "Landing Page Labs", "url": "https://www.landingpagelabs.co" }
      },
      {
        "@type": "WebSite",
        "@id": "https://downloadhtml.com/#site",
        "url": "https://downloadhtml.com/",
        "name": "Download HTML",
        "publisher": { "@type": "Organization", "name": "Landing Page Labs", "url": "https://www.landingpagelabs.co" }
      },
      {
        "@type": "FAQPage",
        "mainEntity": [
          {
            "@type": "Question",
            "name": "What is HTML source code?",
            "acceptedAnswer": { "@type": "Answer", "text": "HTML, short for HyperText Markup Language, is the code that makes up every webpage. When you visit a website, your browser downloads the HTML and renders it visually. This tool lets you see that raw code before the browser interprets it." }
          },
          {
            "@type": "Question",
            "name": "Why would I want to view a page's source code?",
            "acceptedAnswer": { "@type": "Answer", "text": "Developers inspect source code to debug issues, learn how a site is built, audit SEO tags, check performance, or extract specific information like meta tags and asset URLs. It is also useful for competitive research and accessibility audits." }
          },
          {
            "@type": "Question",
            "name": "How is this different from 'View Source' in my browser?",
            "acceptedAnswer": { "@type": "Answer", "text": "Similar, but with extras: syntax highlighting, line numbers, meta tag extraction, asset listing, and the ability to download the HTML as a file. It also works on mobile, where browser 'View Source' is not available." }
          },
          {
            "@type": "Question",
            "name": "Can I view HTML source code on iPhone or Android?",
            "acceptedAnswer": { "@type": "Answer", "text": "Yes. iOS Safari and most mobile browsers do not have a built-in 'View Source' option. Download HTML works on any browser. Paste a URL, and the source code, meta tags, and assets are returned in seconds." }
          }
        ]
      }
    ]
  }
  </script>
</head>
<body>
  <nav class="site-nav" aria-label="Primary">
    <div class="site-nav-inner">
      <a class="site-nav-brand" href="/" aria-label="Download HTML home">
        <svg class="brand-mark" width="22" height="22" viewBox="0 0 24 24" aria-hidden="true">
          <rect width="24" height="24" rx="5" fill="#0a0a0a"/>
          <path d="M9 8 L5 12 L9 16" fill="none" stroke="#3b82f6" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M15 8 L19 12 L15 16" fill="none" stroke="#3b82f6" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M14 6.5 L10 17.5" stroke="#fff" stroke-width="2.2" stroke-linecap="round"/>
        </svg>
        <span class="brand-text"><span class="brand-text-light">Download</span> <span class="brand-text-strong">HTML</span></span>
      </a>
      <div class="site-nav-links">
        <a href="/blog" class="site-nav-link">Blog</a>
      </div>
    </div>
  </nav>

  <div class="app">
    <!-- Hero -->
    <header class="header">
      <div class="header-top">
        <h1 class="logo">View, copy, and download HTML source code</h1>
        <p class="tagline">Paste any URL to inspect a website's HTML, meta tags, response headers, and assets, then export the source.</p>
      </div>
      <form class="url-bar" id="urlForm">
        <div class="url-input-wrap">
          <span class="url-prefix">https://</span>
          <input
            type="text"
            id="urlInput"
            class="url-input"
            placeholder="example.com"
            spellcheck="false"
            autocomplete="off"
            autofocus
            aria-label="Website URL"
          >
        </div>
        <button type="submit" class="btn btn-primary" id="fetchBtn">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M14 8L2 8M14 8L9 3M14 8L9 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          <span>Fetch</span>
        </button>
      </form>
      <div class="loading-bar" id="loadingBar"></div>

      <ul class="trust-pills" aria-label="What we do not do">
        <li>Free, no signup</li>
        <li>Works on mobile</li>
        <li>No data stored</li>
      </ul>
    </header>

    <!-- Error message -->
    <div class="error-msg" id="errorMsg" role="alert"></div>

    <main>
      <!-- Empty state -->
      <div class="empty-state" id="emptyState">
        <div class="empty-icon" aria-hidden="true">&lt;/&gt;</div>
        <p>Enter a URL above to view its source code</p>
      </div>

      <!-- Results -->
      <div class="results" id="results">
        <!-- Toolbar -->
        <div class="toolbar" id="toolbar">
          <div class="toolbar-left">
            <span class="toolbar-label" id="toolbarLabel"></span>
          </div>
          <div class="toolbar-right">
            <button class="btn btn-sm" id="copyBtn" title="Copy HTML">
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><rect x="5" y="5" width="9" height="9" rx="1.5" stroke="currentColor" stroke-width="1.5"/><path d="M11 5V3.5A1.5 1.5 0 009.5 2h-6A1.5 1.5 0 002 3.5v6A1.5 1.5 0 003.5 11H5" stroke="currentColor" stroke-width="1.5"/></svg>
              <span>Copy</span>
            </button>
            <button class="btn btn-sm" id="downloadBtn" title="Download HTML file">
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M8 2v8m0 0L5 7m3 3l3-3M2 12v1.5A1.5 1.5 0 003.5 15h9a1.5 1.5 0 001.5-1.5V12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
              <span>Download</span>
            </button>
            <div class="toolbar-divider"></div>
            <button class="btn btn-sm" id="prettyBtn" title="Pretty Print">Pretty</button>
            <button class="btn btn-sm" id="minifyBtn" title="Minify">Minify</button>
            <div class="toolbar-divider"></div>
            <button class="btn btn-sm" id="wrapBtn" title="Toggle word wrap">Wrap</button>
          </div>
        </div>

        <!-- Code viewer -->
        <div class="code-viewer" id="codeViewer">
          <pre class="line-numbers"><code class="language-html" id="codeBlock"></code></pre>
        </div>

        <!-- Panels -->
        <div class="panels">
          <div class="panel" id="requestPanel">
            <button class="panel-header" data-panel="requestBody" aria-expanded="false">
              <span>Request Info</span>
              <svg class="panel-chevron" width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
            <div class="panel-body" id="requestBody"></div>
          </div>

          <div class="panel" id="metaPanel">
            <button class="panel-header" data-panel="metaBody" aria-expanded="false">
              <span>Meta Tags</span>
              <svg class="panel-chevron" width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
            <div class="panel-body" id="metaBody"></div>
          </div>

          <div class="panel" id="headersPanel">
            <button class="panel-header" data-panel="headersBody" aria-expanded="false">
              <span>Response Headers</span>
              <svg class="panel-chevron" width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
            <div class="panel-body" id="headersBody"></div>
          </div>

          <div class="panel" id="assetPanel">
            <button class="panel-header" data-panel="assetBody" aria-expanded="false">
              <span>Assets</span>
              <svg class="panel-chevron" width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
            <div class="panel-body" id="assetBody"></div>
          </div>
        </div>
      </div>
    </main>

    <!-- FAQ -->
    <section class="faq" id="faq" aria-labelledby="faq-heading">
      <h2 id="faq-heading">Frequently asked questions</h2>
      <details>
        <summary>What is HTML source code?</summary>
        <p>HTML, short for HyperText Markup Language, is the code that makes up every webpage. When you visit a website, your browser downloads the HTML and renders it visually. This tool lets you see that raw code before the browser interprets it.</p>
      </details>
      <details>
        <summary>Why would I want to view a page's source code?</summary>
        <p>Developers inspect source code to debug issues, learn how a site is built, audit SEO tags, check performance, or extract specific information like meta tags and asset URLs. It is also useful for competitive research and accessibility audits.</p>
      </details>
      <details>
        <summary>How is this different from "View Source" in my browser?</summary>
        <p>Similar, but with extras: syntax highlighting, line numbers, meta tag extraction, asset listing, and the ability to download the HTML as a file. It also works on mobile, where browser "View Source" is not available.</p>
      </details>
      <details>
        <summary>Can I view HTML source code on iPhone or Android?</summary>
        <p>Yes. iOS Safari and most mobile browsers do not have a built-in "View Source" option. Download HTML works on any browser. Paste a URL, and the source code, meta tags, and assets are returned in seconds.</p>
      </details>
      <details>
        <summary>How does the server fetch work?</summary>
        <p>When you enter a URL, our serverless function fetches the page's HTML on your behalf and returns it with syntax highlighting. This server-side approach avoids browser security restrictions that would normally prevent reading another site's code directly.</p>
      </details>
    </section>

    <!-- Sister tools -->
    <section class="sister-tools" aria-labelledby="sister-heading">
      <h2 id="sister-heading">More free tools from Landing Page Labs</h2>
      <ul class="sister-list">
        <li>
          <a href="https://svgscraper.com/?utm_source=downloadhtml.com&amp;utm_medium=referral&amp;utm_campaign=lpl-tools&amp;utm_content=sister-tools-card" target="_blank" rel="noopener">
            <svg class="sister-logo" viewBox="0 0 24 24" aria-hidden="true">
              <rect width="24" height="24" rx="5" fill="#2563eb"/>
              <path d="M7 17 L12 7 L17 17 Z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>
              <circle cx="12" cy="12" r="1.4" fill="#fff"/>
              <circle cx="7" cy="17" r="0.9" fill="#fff"/>
              <circle cx="17" cy="17" r="0.9" fill="#fff"/>
              <circle cx="12" cy="7" r="0.9" fill="#fff"/>
            </svg>
            <div class="sister-meta">
              <span class="sister-name">SVG Scraper</span>
              <span class="sister-desc">Extract every SVG from a site</span>
            </div>
          </a>
        </li>
        <li>
          <a href="https://inspectbrand.com/?utm_source=downloadhtml.com&amp;utm_medium=referral&amp;utm_campaign=lpl-tools&amp;utm_content=sister-tools-card" target="_blank" rel="noopener">
            <svg class="sister-logo" viewBox="0 0 24 24" aria-hidden="true">
              <rect width="24" height="24" rx="5" fill="#111"/>
              <circle cx="11" cy="9" r="3.5" fill="none" stroke="#fff" stroke-width="2"/>
              <line x1="13.6" y1="11.6" x2="16.5" y2="14.5" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
              <circle cx="6.5" cy="18" r="2.2" fill="#FF6B6B"/>
              <circle cx="12" cy="18" r="2.2" fill="#4ECDC4"/>
              <circle cx="17.5" cy="18" r="2.2" fill="#FFD43B"/>
            </svg>
            <div class="sister-meta">
              <span class="sister-name">Inspect Brand</span>
              <span class="sister-desc">Favicons, colors, fonts</span>
            </div>
          </a>
        </li>
        <li>
          <a href="https://makeutms.com/?utm_source=downloadhtml.com&amp;utm_medium=referral&amp;utm_campaign=lpl-tools&amp;utm_content=sister-tools-card" target="_blank" rel="noopener">
            <svg class="sister-logo" viewBox="0 0 24 24" aria-hidden="true">
              <rect width="24" height="24" rx="5" fill="#0a0a0b"/>
              <line x1="3.5" y1="12" x2="9" y2="12" stroke="#f59e0b" stroke-width="2.2" stroke-linecap="round"/>
              <rect x="9.5" y="9.5" width="4" height="5" rx="1.2" fill="#f59e0b"/>
              <rect x="14.5" y="9.5" width="3" height="5" rx="1.2" fill="#f59e0b" opacity="0.65"/>
              <rect x="18.5" y="9.5" width="2" height="5" rx="1" fill="#f59e0b" opacity="0.4"/>
            </svg>
            <div class="sister-meta">
              <span class="sister-name">Make UTMs</span>
              <span class="sister-desc">UTM campaign URL builder</span>
            </div>
          </a>
        </li>
        <li>
          <a href="https://fontcompressor.com/?utm_source=downloadhtml.com&amp;utm_medium=referral&amp;utm_campaign=lpl-tools&amp;utm_content=sister-tools-card" target="_blank" rel="noopener">
            <svg class="sister-logo" viewBox="0 0 24 24" aria-hidden="true">
              <rect width="24" height="24" rx="5" fill="#2563eb"/>
              <text x="12" y="17" font-family="ui-sans-serif,system-ui,sans-serif" font-size="15" font-weight="700" fill="#fff" text-anchor="middle">F</text>
            </svg>
            <div class="sister-meta">
              <span class="sister-name">Font Compressor</span>
              <span class="sister-desc">Compress fonts to WOFF2</span>
            </div>
          </a>
        </li>
      </ul>
    </section>

    <!-- Footer -->
    <footer class="footer">
      <div class="footer-inner">
        <p>Free HTML viewer. <a href="/blog">Read the blog</a> or <a href="/">view another site</a>.</p>
        <a class="footer-lpl" href="https://links.landingpagelabs.co/downloadhtml" target="_blank" rel="noopener">
          <span>Built by</span>
          <img src="https://landing-page-labs.b-cdn.net/LPLabsLogo-NavBar.svg" alt="Landing Page Labs" height="22" width="100" loading="lazy" decoding="async">
        </a>
      </div>
    </footer>
  </div>

  <script src="/prism.min.js" defer></script>
  <script src="/app.js" defer></script>
</body>
</html>