NetSim Pro is a comprehensive, browser-based network simulation and learning platform that brings together five critical networking domains in one unified interface: Topology Designer, Protocols & Ports Reference, Packet Simulator, IP Analyzer, and Network Design Guide. Built with pure HTML/CSS/JavaScript, this educational tool allows networking students, IT professionals, and engineers to design networks, simulate packet flows, explore protocols, analyze IP addressing, and follow a structured design guide — all in a safe, simulated environment. No actual network equipment required. 🔌
| Module | Focus | Key Capabilities |
|---|---|---|
| 01 — Topology Designer | Network Design | Drag-and-drop devices, connection wiring, auto-layout, packet animation, device info panel |
| 02 — Protocols & Ports | Protocol Reference | 27+ protocols, layer-based filtering, search, modal with RFC details, example headers |
| 03 — Packet Simulator | Packet Flow | Visual packet travel, OSI layer animation, protocol selection, burst mode, real-time logging |
| 04 — IP Analyzer | Addressing | IP classification, CIDR subnet calculation, binary/hex conversion, range reference, subnet table |
| 05 — Design Guide | Methodology | 7-step structured workflow, interactive checklists, progress tracking, best practices |
- 7 device types with unique icons and colors:
- Router (Cyan) — Network routing, gateway
- Switch (Green) — LAN switching, VLANs
- Firewall (Red) — Security policies, filtering
- Server (Purple) — Applications, services
- Desktop (Amber) — End-user workstations
- Laptop (Amber) — Mobile endpoints
- Cloud/Internet (Cyan) — External networks
- Drag-and-drop placement — intuitive device positioning
- Grid background — alignment reference
- Device movement — click and drag to reposition
- Auto-layout — circular arrangement with one click
- Right-click delete — quick removal
- Wire Tool mode — toggle to connect devices
- Click-to-connect — select first device, then second
- Visual connections — lines between devices
- No duplicate connections — prevents redundant links
- Click any device to display:
- Device name and type
- IP address (auto-assigned)
- MAC address
- Connection count
- Status (Online)
- Test packet — animated ping between first and last device
- Visual travel — glowing dot moves across connections
- Real-time feedback — toast notifications
| Category | Protocols |
|---|---|
| Application | HTTP, HTTPS, DNS, DHCP, FTP, SSH, SMTP, IMAP, SNMP, LDAP, NTP |
| Transport | TCP, UDP |
| Network | IP, ICMP |
| Link | ARP |
- Port numbers — standard IANA assignments
- Transport protocol — TCP/UDP identification
- OSI layer classification — Application/Transport/Network/Link
- Detailed descriptions — purpose and functionality
- Example headers — packet structure visualization
- RFC references — official standards documentation
- Handshake processes — connection establishment flows
- Security considerations — vulnerabilities and mitigations
- Common use cases — real-world applications
- Real-time search — by protocol name, port, keyword
- Layer filtering — All/Application/Transport/Network/Link
- Protocol tags — quick identification (web, encrypted, DNS, etc.)
- Click any protocol card to open detailed modal
- Tabular metadata — RFC, handshake, security, use cases
- Code blocks — example headers and packet structures
- Close on backdrop — click outside to dismiss
- 5-node network path:
- Client (192.168.1.10) — Amber
- Gateway (192.168.1.1) — Cyan
- Firewall (10.0.0.1) — Red
- Internet Router (203.0.113.1) — Cyan
- Server (93.184.216.34) — Purple
| Parameter | Options |
|---|---|
| Source | Desktop (192.168.1.10), Laptop (192.168.1.20), Server (10.0.0.5) |
| Destination | DNS (8.8.8.8), Web Server (93.184.216.34), Gateway, Internal Server |
| Protocol | HTTP, HTTPS, DNS, SSH, SMTP, FTP, ICMP |
| Payload Size | 64–65,535 bytes |
| TTL | 1–255 |
- Packet travel — glowing dot traverses network path
- Color-coded — protocol-specific colors
- Sequential animation — hop-by-hop visualization
- Burst mode — 10 packets in rapid succession
- 7-layer visualization — Physical to Application
- Real-time highlighting — active layer illuminates during traversal
- Protocol-specific layers — dynamic protocol mapping:
- HTTP — Application (HTTP) → Transport (TCP) → Network (IP) → Link (Ethernet)
- HTTPS — Application (HTTPS) → TLS → Transport (TCP)
- DNS — Application (DNS) → Transport (UDP) → Network (IP)
- ICMP — Network (ICMP+IP) → Link (Ethernet)
- Timestamped entries — HH:MM:SS.mmm format
- Source → Destination — directional arrows
- Protocol badge — color-coded identification
- Payload size and TTL — packet metadata
- Auto-scroll — latest entries always visible
| Type | Detection | Color |
|---|---|---|
| Private | 10.0.0.0/8, 172.16.0.0/12, 192.168.0.0/16 | 🟢 Green |
| Public | All other global unicast | 🟡 Amber |
| Loopback | 127.0.0.0/8 | 🟡 Amber |
| Link-local | 169.254.0.0/16 | 🟡 Amber |
| Multicast | 224.0.0.0/4 | 🔵 Cyan |
| Reserved | 0.0.0.0/8, 240.0.0.0/4 | 🔴 Red |
- Network address — subnet identifier
- Broadcast address — subnet-wide communication
- Subnet mask — dotted decimal notation
- Usable hosts — total hosts minus network/broadcast
- Decimal representation — integer conversion
- Hexadecimal — 8-digit hex format
- Octet breakdown — 8-bit per octet visualization
- Bit highlighting — 1 (cyan) / 0 (dim)
- Period separators — dotted decimal grouping
- Color coding — visual binary representation
- 11 common ranges including:
- RFC 1918 private spaces (10.0.0.0/8, 172.16.0.0/12, 192.168.0.0/16)
- Loopback (127.0.0.0/8)
- APIPA (169.254.0.0/16)
- Documentation ranges (192.0.2.0/24)
- Multicast (224.0.0.0/4)
- Click to auto-fill — instant analysis
| CIDR | Subnet Mask | Usable Hosts | Use Case |
|---|---|---|---|
| /8 | 255.0.0.0 | 16,777,214 | Class A |
| /16 | 255.255.0.0 | 65,534 | Class B |
| /24 | 255.255.255.0 | 254 | Standard LAN |
| /25 | 255.255.255.128 | 126 | Small subnet |
| /26 | 255.255.255.192 | 62 | Smaller subnet |
| /27 | 255.255.255.224 | 30 | Very small |
| /28 | 255.255.255.240 | 14 | Small office |
| /29 | 255.255.255.248 | 6 | Point-to-point+ |
| /30 | 255.255.255.252 | 2 | Point-to-point |
| /32 | 255.255.255.255 | 1 | Host route |
- One-click random IP — test various scenarios
- Template library — private, public, loopback, reserved
| Step | Title | Key Activities |
|---|---|---|
| 1 | Gather Business Requirements | Identify needs, budget, constraints, user count, performance requirements |
| 2 | Assess Current Infrastructure | Diagram existing devices, document technologies, audit bandwidth |
| 3 | Define Network Goals | Performance benchmarks, security requirements, redundancy, scalability |
| 4 | Select Devices & Technologies | Choose hardware, wireless strategy, VLAN scheme, cabling standards |
| 5 | Design the Physical Network | Logical topology, cable routes, IP addressing, VLAN structure, power redundancy |
| 6 | Develop Implementation Plan | Phased rollout, team assignments, rollback scenarios, maintenance windows |
| 7 | Document the Network Design | Store diagrams, document IPs/MACs, record configurations, create runbooks |
- Expandable steps — click headers to reveal content
- Task checklists — check off completed items
- Progress tracking — step status (Pending/In Progress/Complete)
- Auto-advance — completing a step unlocks the next
- Reopen functionality — revisit completed steps
- Detailed guidance — best practices for each phase
- Real-world considerations — production network requirements
- Security-focused — integrated throughout the design process
- Dark background (
#080c18) — professional lab environment - Cyan accent (
#00d4ff) — network devices, protocols, primary actions - Green (
#00ff88) — switches, success states - Red (
#ff4466) — firewalls, alerts - Purple (
#a855f7) — servers - Amber (
#ffaa00) — end-user devices
- JetBrains Mono — Monospace for code, IPs, packet data
- Space Grotesk — Sans-serif for UI and labels
- Live indicator — pulsing green dot in header
- Toast notifications — user feedback with color coding
- Progress bars — step completion, scan progress
- Color-coded badges — protocol layers, severity indicators
- Hover tooltips — IP pool cells, device info
- Animated packet travel — real-time simulation
- Grid background — topology designer reference
- Pure HTML5/CSS3/JavaScript — No frameworks or dependencies
- Canvas API — Topology designer, packet animation
- Flexbox/Grid — Responsive layout across all tabs
- Custom fonts — JetBrains Mono, Space Grotesk
| Component | Purpose | Features |
|---|---|---|
| Topology Canvas | Network design | Device placement, connections, auto-layout |
| Protocol Grid | Reference library | 27+ protocols, search, filtering |
| Packet Simulator | Flow visualization | OSI traversal, burst mode, logging |
| IP Analyzer | Address analysis | CIDR calc, binary display, reference tables |
| Design Guide | Methodology | 7-step workflow, interactive checklists |
// Topology Designer
drawTopo() // Render canvas with devices and connections
autoLayout() // Circular arrangement of all devices
startPacketAnim() // Animate packet between devices
toggleConnectMode() // Enable/disable wiring tool
showDeviceInfo() // Display device properties panel
// Protocols & Ports
renderProtocols() // Render protocol grid with filtering
showProtoModal() // Display detailed protocol information
filterProtocols() // Real-time search filtering
setLayer() // Filter by OSI layer
// Packet Simulator
sendPacket() // Send single packet with animation
sendBurst() // Send 10 packets sequentially
animateOSI() // Highlight OSI layers during traversal
logPacket() // Add entry to packet log
// IP Analyzer
analyzeIP() // Parse IP/CIDR and calculate results
classifyIP() // Determine IP type (private/public/etc.)
randomIP() // Generate random IP address
toBinary() // Convert octet to binary string
// Design Guide
renderGuide() // Render interactive design steps
toggleStep() // Expand/collapse step content
toggleCheck() // Toggle checklist item
completeStep() // Mark step as complete| Time | Module | Scene | Action |
|---|---|---|---|
| 0:00 | Topology | Canvas | Drag devices (Router, Switch, Firewall) onto canvas |
| 0:05 | Topology | Wiring | Toggle Wire Tool → connect Router → Switch → Firewall |
| 0:10 | Topology | Packet | Click "Send Test Packet" → glowing dot animates |
| 0:15 | Protocols | Search | Type "DNS" → filter results → click card |
| 0:20 | Protocols | Modal | Show DNS details (port 53, RFC 1034, example header) |
| 0:25 | Packet | Simulator | Select HTTP → Click "Send Packet" |
| 0:30 | Packet | Animation | Packet travels Client→Gateway→Firewall→Router→Server |
| 0:35 | Packet | OSI | OSI layers highlight sequentially (7→1) |
| 0:40 | IP | Analyzer | Enter "192.168.1.100/24" → Analyze |
| 0:45 | IP | Results | Shows: Private IP, Class C, subnet mask, binary display |
| 0:50 | IP | Reference | Click "10.0.0.0/8" range → auto-fills → Analyze |
| 0:55 | Guide | Steps | Expand Step 3 (Define Goals) → check off tasks |
| 1:00 | Guide | Complete | Click "Mark Complete" → unlocks Step 4 |
| 1:05 | All | Navigation | Tab through 5 modules |
| 1:10 | Toast | Feedback | Success message appears |
- Load Time: < 1 second (no external dependencies)
- Memory Usage: < 60 MB
- Animation: Canvas-based packet animation (60fps)
- Real-time Updates: Protocol search filtering (instant)
NetSim Pro is designed for:
- CCNA candidates — practice subnetting, protocol knowledge, network design
- Network+ students — understand OSI model, IP addressing, device roles
- Networking professionals — refresh protocol details, design methodologies
- IT instructors — demonstrate concepts with interactive visuals
MIT License — see LICENSE file for details.
- Cisco Networking Academy — CCNA curriculum inspiration
- IETF RFCs — Protocol specifications and standards
- Wireshark — Packet dissection methodology
- Subnet Calculators — CIDR calculation references
- GitHub Issues: Create an issue
- Website: https://willie-conway.github.io/netsim-pro/
- Add more protocols (BGP, OSPF, RIP, etc.)
- Implement VLAN configuration module
- Add routing table simulation
- Include wireless networking (802.11)
- Add network security ACL configuration
- Implement IPv6 addressing support
- Add network performance monitoring
- Include subnetting practice quiz
- Add export/import for topology designs
- Implement real-time collaboration
NetSim Pro is more than a simulator — it's your interactive networking lab. 🚀
Updated: March 2026