PageDNA
PageDNA - Verander elke website in visueel DNA
Generatieve visualisatie van de structuur, stijl en het gedrag van een website.
Webapplicatie Live
Over
PageDNA verandert elke website in visueel DNA. Het analyseert de pagina langs drie assen - structuur (DOM), stijl (CSS, lay-out, typografie, kleur) en gedrag (interactiviteit, animatie, netwerk) - en geeft het resultaat weer als een generatieve visualisatie in plaats van een dashboard.
De frontend draait volledig in de browser, dus een door de gebruiker geladen pagina kan worden geanalyseerd zonder iets te uploaden. De URL-modus wordt aangedreven door een kleine Node.js + Playwright-backend, die de doelpagina in een echte browser laadt, de structuur, stijl en het gedrag vastlegt en de gegevens terugstuurt naar de visuele engine.
Mogelijke visualisaties die het project verkent zijn DOM City (structuur als gebouwen), CSS Portrait (stijl als palet en textuur), Layout DNA (compositionele vorm), Interaction Map (event-topologie) en Code Galaxy (bestands- en modulestructuur). Elke visualisatie wordt pas getoond zodra deze daadwerkelijk is geïmplementeerd.
Belangrijkste functies
Structuuranalyse (DOM)
Doorloopt de DOM-boom, telt en classificeert elementen en maakt van de documentstructuur iets visueels in plaats van een ruwe overzichtsweergave.
Stijlanalyse (CSS, lay-out, kleur, typografie)
Extraheert het palet, de typografische schaal en de lay-outtaal van een pagina zodat de ontwerpkeuzes in één oogopslag leesbaar worden.
Gedrags-/interactiviteitsanalyse
Legt interacties, animaties en netwerkaanroepen vast zodat het gedrag van de pagina naast de statische structuur zichtbaar wordt.
Frontend in de browser
De visualisatie-engine draait volledig in de browser van de gebruiker - geen upload nodig voor lokaal geladen pagina's.
URL-modus aangedreven door Playwright
De URL-modus gebruikt een kleine Node.js + Playwright-backend die de doelpagina in een echte browser laadt en de gegevens terugvoert naar de visualisatie-engine.
Generatieve visualisaties
DOM City, CSS Portrait, Layout DNA, Interaction Map en Code Galaxy maken van de analyse kunstwerken in plaats van dashboards.
Herbruikbaar voor ontwerp en audit
Nuttig om de site van een concurrent te begrijpen, je eigen site te profileren of een visueel portret van een bestaande pagina te maken.
Structuuranalyse (DOM)
Doorloopt de DOM-boom, telt en classificeert elementen en maakt van de documentstructuur iets visueels in plaats van een ruwe overzichtsweergave.
Stijlanalyse (CSS, lay-out, kleur, typografie)
Extraheert het palet, de typografische schaal en de lay-outtaal van een pagina zodat de ontwerpkeuzes in één oogopslag leesbaar worden.
Gedrags-/interactiviteitsanalyse
Legt interacties, animaties en netwerkaanroepen vast zodat het gedrag van de pagina naast de statische structuur zichtbaar wordt.
Frontend in de browser
De visualisatie-engine draait volledig in de browser van de gebruiker - geen upload nodig voor lokaal geladen pagina's.
URL-modus aangedreven door Playwright
De URL-modus gebruikt een kleine Node.js + Playwright-backend die de doelpagina in een echte browser laadt en de gegevens terugvoert naar de visualisatie-engine.
Generatieve visualisaties
DOM City, CSS Portrait, Layout DNA, Interaction Map en Code Galaxy maken van de analyse kunstwerken in plaats van dashboards.
Herbruikbaar voor ontwerp en audit
Nuttig om de site van een concurrent te begrijpen, je eigen site te profileren of een visueel portret van een bestaande pagina te maken.
Privacy & beveiliging
Je gegevens blijven op je apparaat. Altijd.
