Structure Analysis (DOM)
Walks the DOM tree, counts and classifies elements, and turns the document structure into something visual instead of a raw outline.
PageDNA
Turn Any Website Into Visual DNA
Generative visualization of a website's structure, style and behavior.
Web Application
Live
Official product page
Publisher:
POLPROG
Official product page
3
Analysis Dimensions
5
Visualizations Explored
2
Modes (File / URL)
1
Playwright Backend
01 / PageDNA
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.
02 / Key Features
Key Features
The most important capabilities, explained in practical terms.
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.
03 / Download
Product access
A clear path from the official source to your first successful workflow.
Choose the right platform
Use one of the official links available for your device or browser.
Install or open
Follow the store instructions or open the web application. No third-party installers.
Configure and begin
Review the options, choose your preferences and start with the core workflow.
Official access options
04 / Technology
Technology behind the product
A transparent look at the core technologies used to build and maintain this product.
Next.js
React
TypeScript
Tailwind CSS
Docker
05 / Security
Privacy & Security
Your data stays on your device. Always.