Features
PageDNA analyzes the structure, style, and behavior of a website and turns it into a unique generative visualization.
Five visualization modes
Each mode reveals a different layer of the same page.
DOM City
Turns page structure into a skyline of sections, containers, and content towers.
CSS Portrait
Transforms colors, radii, spacing, shadows, and typography into a flowing abstract portrait.
Layout DNA
Maps semantic structure and depth into radial rings, a fingerprint of the page.
Interaction Map
Shows interactive elements and the paths between them as a glowing graph.
Code Galaxy
Turns files, components, and dependencies into constellations of stars and orbits.
Four ways to feed a page
Bring a page to PageDNA in whatever way fits your workflow.
Paste code
Drop in raw HTML, CSS, and JavaScript. PageDNA parses everything client side.
Upload files
Drag and drop .html, .css, .js, .jsx, .tsx, .json files from a project.
Analyze URL
Point at a live URL. PageDNA loads it in a headless Chromium and returns a full analysis.
Browser snippet
Useful for private or authenticated pages. It runs in your own tab and exports only structural data.
Ready to see your page's DNA?
Feed a page, watch PageDNA read its structure, and export the visualization.