Understanding how network protocols work is often heavy going: RFCs and textbooks explain the concepts, but it's hard to "see" handshakes, packet structure, and attacks in action. Protocols Visualizer is a free, interactive web app that turns those ideas into visual, step-by-step flows and simulations.
Try it here: https://protocols-visualizer.vercel.app/en
The app is built around the OSI model. You can browse all seven layers — from Physical (Bluetooth, USB, Coaxial) up to Application (HTTP, DNS, FTP, SMTP) — and open each protocol to explore three main areas: Communication Flow (animated sequence diagrams), Packet Anatomy (interactive headers), and Attack Simulation (e.g. SYN Flood, ARP Spoofing, deauth, Bad USB). The goal is to make dense topics like TCP handshakes, IP routing, or common attacks easier to grasp by showing them in motion instead of only in text.
The project is implemented with Next.js, React, TypeScript, and Tailwind CSS, and is available in English and Portuguese. Whether you're studying for certs, teaching networking, or just curious how the stack works, Protocols Visualizer is a handy companion to see protocols in action.
Feedbacks are welcome
Top comments (0)