PageDNA
PageDNA - Turn Any Website Into Visual DNA
Generative visualization of a website's structure, style and behavior.
Web Application Live
About
PageDNA turns any website into visual DNA. It analyses the page across three axes - structure (DOM), style (CSS, layout, typography, colour) and behaviour (interactivity, animation, network) - and renders the result as a generative visualization rather than a dashboard.
The frontend runs entirely in the browser, so a page loaded by the user can be analysed without uploading anything. URL mode is powered by a small Node.js + Playwright backend, which loads the target page in a real browser, captures its structure, style and behaviour, and sends the data back to the visual engine.
Possible visualisations explored by the project include DOM City (structure as buildings), CSS Portrait (style as palette and texture), Layout DNA (compositional shape), Interaction Map (event topology) and Code Galaxy (file and module structure). Each one is exposed only once it is actually implemented.
Key Features
Structure Analysis (DOM)
Walks the DOM tree, counts and classifies elements, and turns the document structure into something visual instead of a raw outline.
Style Analysis (CSS, Layout, Color, Typography)
Extracts the palette, typographic scale and layout language of a page so the design decisions become readable at a glance.
Behaviour / Interactivity Analysis
Captures interactions, animations and network calls so the page's behaviour shows up next to its static structure.
In-Browser Frontend
The visualisation engine runs entirely in the user's browser - no upload required for pages loaded locally.
Playwright-Powered URL Mode
URL mode uses a small Node.js + Playwright backend that loads the target page in a real browser and feeds the data back to the visualization engine.
Generative Visualisations
DOM City, CSS Portrait, Layout DNA, Interaction Map and Code Galaxy turn the analysis into artworks rather than dashboards.
Reusable for Design & Audit
Useful for understanding a competitor's site, profiling your own, or producing a visual portrait of an existing page.
Structure Analysis (DOM)
Walks the DOM tree, counts and classifies elements, and turns the document structure into something visual instead of a raw outline.
Style Analysis (CSS, Layout, Color, Typography)
Extracts the palette, typographic scale and layout language of a page so the design decisions become readable at a glance.
Behaviour / Interactivity Analysis
Captures interactions, animations and network calls so the page's behaviour shows up next to its static structure.
In-Browser Frontend
The visualisation engine runs entirely in the user's browser - no upload required for pages loaded locally.
Playwright-Powered URL Mode
URL mode uses a small Node.js + Playwright backend that loads the target page in a real browser and feeds the data back to the visualization engine.
Generative Visualisations
DOM City, CSS Portrait, Layout DNA, Interaction Map and Code Galaxy turn the analysis into artworks rather than dashboards.
Reusable for Design & Audit
Useful for understanding a competitor's site, profiling your own, or producing a visual portrait of an existing page.
Privacy & Security
Your data stays on your device. Always.
