How PageDNA works
Three steps from any page to its visual DNA.
The flow
How PageDNA works
Feed a page
Enter a website URL to scan the live page, or open the demo to explore the views first.
Extract structure
PageDNA parses the DOM, samples the CSS, traces interactions, and scores complexity, locally when possible.
Generate visual DNA
Seven visualization modes turn the analysis into a coherent, exportable visual identity.
Signal layers
What PageDNA reads
The signal layers behind every visualization.
DOM
Sections, containers, and content hierarchy.
CSS
Colors, type scale, radii, shadows, spacing.
Layout
Depth, semantics, and structural rhythm.
Interactions
Links, forms, buttons, and focus paths.
Code signals
Files, modules, imports, and complexity.
Snapshot
Optional rendered preview captured during a URL scan.
Ready to see your page's DNA?
Feed a page, watch PageDNA read its structure, and export the visualization.