Structuuranalyse (DOM)
Doorloopt de DOM-boom, telt en classificeert elementen en maakt van de documentstructuur iets visueels in plaats van een ruwe overzichtsweergave.
PageDNA
Verander elke website in visueel DNA
Generatieve visualisatie van de structuur, stijl en het gedrag van een website.
Webapplicatie
Live
Officiële productpagina
Publisher:
POLPROG
Officiële productpagina
3
Analysedimensies
5
Verkende visualisaties
2
Modi (bestand / URL)
1
Playwright-backend
01 / PageDNA
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.
02 / Belangrijkste functies
Belangrijkste functies
De belangrijkste mogelijkheden praktisch uitgelegd.
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.
03 / Download
Toegang tot het product
Een duidelijk pad van de officiële bron naar je eerste geslaagde workflow.
Kies het juiste platform
Gebruik een van de officiële links voor je apparaat of browser.
Installeer of open
Volg de instructies van de store of open de webapplicatie. Geen installatieprogramma's van derden.
Configureer en begin
Bekijk de opties, kies je voorkeuren en begin met de belangrijkste workflow.
Officiële toegangsopties
04 / Technologie
Technologie achter het product
Een transparant overzicht van de kerntechnologieën waarmee dit product wordt gebouwd en onderhouden.
Next.js
React
TypeScript
Tailwind CSS
Docker
05 / Beveiliging
Privacy & beveiliging
Je gegevens blijven op je apparaat. Altijd.