Start a project

Tool 13 of 194 · AI visibility

Rendered vs Raw HTML Diff

See exactly what a crawler that doesn't run JavaScript gets from your page compared with what visitors see, facet by facet and block by block.

Rendered vs Raw HTML Diff at a glanceIllustration: 1, Raw + rendered HTML; 2, processed in your browser; 3, What JavaScript adds.Rendered vs Raw HTML Diff</>1Raw + rendered HTML−++3What JavaScript adds2In yourbrowser
1 Raw + rendered HTML 2 processed on your device 3 What JavaScript adds

Rendered vs Raw HTML Diff

Raw HTML (what the server sends)

Fetch sends this address to leej.uk, which reads the page once as LeejTools/1.0 and keeps only a count. Or paste below: pasted text never leaves your device.

Rendered DOM (after JavaScript)

On a computer: open the page, then DevTools, Elements, right-click <html>, Copy, Copy outerHTML, and paste below. On a phone: save the page as a file in your browser (Share, Save to Files, on iPhone) and open it here.

What JavaScript adds

    Want the AI crawler view of your whole site? Run PingAI, which scores how well ChatGPT, Claude, Perplexity, Gemini and Copilot can reach and read it.

    FacetRawRenderedOnly after JavaScriptOnly in raw

    Text, block by block

    Report (JSON)

    01

    What it does

    Diffs the raw HTML and the rendered DOM facet by facet and works out the share of text that only exists after JavaScript runs.

    • Title, description, robots, canonical, headings, links, JSON-LD
    • Share of rendered text missing from the raw HTML
    • Canonical or robots changed by JavaScript flagged
    • Links only reachable after rendering

    02

    Private by design

    Everything you paste or upload stays in your browser. Only when you press Fetch does leej.uk read the address you give, once, as LeejTools/1.0, keeping nothing but a daily count.

    03

    What you get

    A facet table, a text diff and a JSON report, with a Copy and a Download button on every result.

    • JavaScript SEO
    • Rendering
    • AI crawlers
    • SPA

    Why it matters

    Google renders JavaScript, eventually. Most AI crawlers don't: GPTBot, ClaudeBot and PerplexityBot read the HTML your server sends and stop there. A single-page app that ships an empty <div id="root"> looks fine in a browser and blank to them, and a canonical or noindex set by JavaScript may be read differently depending on when Google looks.

    This tool compares the two versions of the page the way a crawler would see them: title, description, robots, canonical, headings, links, structured data and text, each diffed on its own. It tells you what share of the text depends on JavaScript and which signals change, so you know what to server-render first. There's no headless browser behind it; you paste the rendered DOM from your own browser, so what you compare is what you saw.

    How it works

    1. InputThe HTML before and after JavaScript
    2. In your browserTitles, links, text and JSON-LD compared
    3. OutputWhat crawlers without JavaScript miss

    Where it fits in a designer's workflow

    1. Plan
    2. Design
    3. Build
    4. Test
    5. Launch
    Checking a JavaScript site is visible to AI crawlers.

    By the numbers

    What the sample page has before and after JavaScriptTitle: raw HTML: 1; Title: rendered: 1; Meta description: raw HTML: 0; Meta description: rendered: 1; Robots meta: raw HTML: 1; Robots meta: rendered: 1; Canonical: raw HTML: 1; Canonical: rendered: 1; Headings: raw HTML: 0; Headings: rendered: 2; Links: raw HTML: 0; Links: rendered: 4; JSON-LD blocks: raw HTML: 0; JSON-LD blocks: rendered: 1; Text blocks: raw HTML: 1; Text blocks: rendered: 6Title: raw HTML1Title: rendered1Meta description: raw HTML0Meta description: rendered1Robots meta: raw HTML1Robots meta: rendered1Canonical: raw HTML1Canonical: rendered1Headings: raw HTML0Headings: rendered2Links: raw HTML0Links: rendered4JSON-LD blocks: raw HTML0JSON-LD blocks: rendered1Text blocks: raw HTML1Text blocks: rendered6
    Compared by this tool on its sample pair: 100% of the rendered text (38 of 38 words) is only there after JavaScript. Google renders JavaScript, later; most AI crawlers fetch raw HTML only, so what's missing from the raw column is invisible to them. Source: Google: JavaScript SEO basics.
    Show the numbers as a table
    FacetRawRendered
    Title11
    Meta description01
    Robots meta11
    Canonical11
    Headings02
    Links04
    JSON-LD blocks01
    Text blocks16

    How to use it

    1. Fetch the raw HTML, or paste view-source.
    2. Copy the rendered DOM from DevTools (Copy outerHTML) and paste it, or open a saved page file.
    3. Read the share of JavaScript-only text and the findings.
    4. Server-render what's missing, starting with the canonical, robots and main content.

    FAQ

    Why does it matter if Google renders JavaScript?

    Rendering can be delayed, and most AI and social crawlers never render at all. Anything only in the rendered DOM is invisible to them.

    How do I get the rendered DOM on an iPhone?

    Use Share, then Save to Files, or Options, Web Archive, then open the file here. Or copy it on a computer and paste it in.

    Why strip hydration attributes?

    Frameworks add attributes like data-reactroot or ng-version while hydrating. They're not content, and stripping them keeps the diff about what crawlers read.

    Is anything uploaded?

    Only if you press Fetch: the address, which leej.uk reads once as LeejTools/1.0. Pasted HTML and files stay on your device.

    Work with me

    Want a site that gets these right?

    I build fast, accessible websites and web apps that pass these checks from day one. Tell me about your project and I'll reply personally with honest next steps.

    All developer tools · Back to leej.uk