How PageDNA works
Three steps from any page to its visual DNA.
The flow
How PageDNA works
Feed a page
Paste code, drop files, share a URL, or run the browser snippet on the page you're viewing.
Extract structure
PageDNA parses the DOM, samples the CSS, traces interactions, and scores complexity, locally when possible.
Generate visual DNA
Five 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 from URL or snippet.
Ready to see your page's DNA?
Feed a page, watch PageDNA read its structure, and export the visualization.