A professional CIDR subnet calculator for network administrators and developers. Built with React and modern web technologies, subnetctl provides comprehensive subnet analysis with binary representations, network classification, and a clean, technical interface.
🌐 Live Demo: https://lforlinux.github.io/subnetctl
- CIDR Parsing - Intelligent parsing of CIDR notation with validation
- Complete Subnet Analysis - Network address, broadcast address, subnet mask, wildcard mask
- Host Range Calculation - First and last usable host addresses
- Binary Representations - Full binary display for all network components
- Network Classification - Automatic detection of network class and address type
- Multiple Format Support - Decimal, binary, and hexadecimal representations
- Private/Public Detection - Automatic classification of private vs public addresses
- Copy Functionality - One-click copying of all calculated values
- Real-time Validation - Instant feedback on invalid CIDR notation
- Responsive Design - Works seamlessly on desktop and mobile devices
- Dark/Light Theme - Toggle between themes with persistent user preference
- Modern UI - Clean, technical interface with monospace fonts
- Tech-focused Design - Professional blue/cyan color scheme
- Binary Display - Formatted binary representations with dots for readability
- Network Statistics - Comprehensive host count and range information
- React 18 - Modern React with hooks
- Vite - Fast build tool and dev server
- Tailwind CSS - Utility-first CSS framework
- Custom Subnet Logic - Proprietary CIDR calculation algorithms
- Docker - Containerized deployment
- Docker and Docker Compose installed on your system
- Clone the repository:
git clone <repository-url>
cd subnetctl- Build and run with Docker Compose:
docker-compose up --build- Open your browser and navigate to
http://localhost:3000
- Start the application:
docker-compose up - Build and start:
docker-compose up --build - Stop the application:
docker-compose down - View logs:
docker-compose logs -f
- Node.js (version 18 or higher)
- npm or yarn
- Clone the repository:
git clone <repository-url>
cd subnetctl- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run buildThe built files will be in the dist directory.
- Enter a CIDR notation in the input field (e.g.,
192.168.1.0/24) - Click "Calculate Subnet" to see the analysis
- View comprehensive subnet information including:
- Network and broadcast addresses
- Subnet and wildcard masks
- Host range and count
- Binary representations
- Network classification
192.168.1.0/24- Common home network10.0.0.0/8- Large private network172.16.0.0/12- Medium private network203.0.113.0/24- Public network example
- Click the copy button next to any value to copy it to your clipboard
- All binary representations are formatted with dots for readability
- Copy individual values or entire CIDR notations
- Click the theme toggle button in the top-right corner
- Your preference is saved and will persist across sessions
- Supports both light and dark themes
subnetctl/
├── public/
│ └── index.html # Main HTML file
├── src/
│ ├── components/
│ │ ├── InputForm.jsx # CIDR input form
│ │ ├── SubnetResults.jsx # Results display
│ │ ├── BinaryDisplay.jsx # Binary representation component
│ │ ├── CopyButton.jsx # Copy to clipboard functionality
│ │ └── ThemeToggle.jsx # Theme toggle component
│ ├── utils/
│ │ └── subnetUtils.js # CIDR calculation utilities
│ ├── App.jsx # Main application component
│ ├── index.css # Tailwind CSS styles
│ └── main.jsx # Application entry point
├── nginx.conf # Nginx configuration
├── Dockerfile # Docker configuration
├── docker-compose.yml # Docker Compose setup
├── tailwind.config.js # Tailwind configuration
├── postcss.config.js # PostCSS configuration
├── package.json # Dependencies and scripts
└── README.md # This file
The tool intelligently parses CIDR notation and provides:
- Input Validation - Real-time validation of CIDR format
- Error Handling - Clear error messages for invalid input
- Format Support - Standard CIDR notation (x.x.x.x/y)
For each CIDR input, the tool calculates:
- Network Address - The network portion of the CIDR
- Broadcast Address - The broadcast address for the subnet
- Subnet Mask - Network mask in decimal and binary
- Wildcard Mask - Inverse of subnet mask
- Host Range - First and last usable host addresses
- Host Count - Total and usable host counts
- Formatted Binary - Binary strings with dots for readability
- Multiple Formats - Decimal, binary, and hexadecimal
- Copy Functionality - Easy copying of all values
- Visual Formatting - Clear separation of octets
- Network Class - Automatic detection (A, B, C, D, E)
- Address Type - Private vs public classification
- Special Networks - Loopback, link-local detection
- RFC Compliance - Follows standard network classification
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Tailwind CSS - Utility-first CSS framework
- Vite - Next generation frontend tooling
- React - JavaScript library for building user interfaces
- JetBrains Mono - Monospace font for technical display