A professional subnet calculator built with Next.js and shadcn/ui for network engineers and cloud architects. Plan, split, and export network configurations for AWS, Azure, and Google Cloud.

Try it live at calc.artofinfra.com

• Real-time Calculation: Automatically calculates subnet information as you type
• IPv4 & IPv6 Support: Full support for both IPv4 and IPv6 subnet calculations
• Multi-Cloud Support:
  • Normal Mode: Standard subnetting calculations
  • AWS VPC Mode: AWS-specific calculations with 5 reserved IP addresses
  • Azure VNet Mode: Azure-specific calculations with 5 reserved IP addresses
  • Google Cloud VPC Mode: GCP-specific calculations with 4 reserved IP addresses
• Comprehensive Results: Network address, broadcast address, host ranges, subnet masks, and more
• Input Validation: Real-time validation with provider-specific constraints

• Interactive Splitting: Split subnets into smaller networks
  • Equal splits (halves, quarters, eighths, up to 256 subnets)
  • Custom CIDR-based splits
  • Cloud provider constraint validation
  • Real-time split preview
• Subnet Joining: Combine adjacent subnets back into larger networks
  • Automatic adjacency detection
  • Multi-subnet selection with quick-select groups
  • Join validation and preview
• Custom Groups: Organize subnets into named groups for better management
• Visual Views:
  • Sortable table view with detailed information
  • Hierarchical tree view showing parent-child relationships
  • Search and filter capabilities

• Browser Storage: Save configurations to browser localStorage
• Multiple Configurations: Store and manage multiple subnet configurations
• Import/Export: Export configurations to JSON files for backup or sharing
• Auto-restore: Session state preserved across page refreshes
• Keyboard Shortcuts:
  • Ctrl/Cmd + S - Save configuration
  • Ctrl/Cmd + O - Load configuration

Export your subnet configurations directly to IaC formats:

• Terraform (.tf) - HashiCorp Configuration Language
• CloudFormation (.yaml) - AWS native IaC
• Bicep (.bicep) - Azure native IaC

Supported cloud providers:

• AWS VPC with subnets
• Azure VNet with subnets
• Google Cloud VPC with subnetworks

Export options include:

• VPC/VNet resource generation
• Descriptive comments
• Custom resource naming prefixes

• Multiple Formats: Export subnet data as:
  • Plain text (human-readable)
  • CSV (spreadsheet-compatible)
  • JSON (programmatic use)
• Flexible Scope: Export all subnets or selected subnets only
• Copy to Clipboard: Quick copy for documentation
• Download Files: Save exports with timestamped filenames

• Professional UI: Clean, responsive design using shadcn/ui components
• Dark/Light Theme: Automatic theme switching with system preference detection
• Mobile Friendly: Fully responsive on desktop, tablet, and mobile
• Accessibility: Full keyboard navigation and screen reader support
• Toast Notifications: Clear feedback for all operations

• Node.js 18+
• npm or yarn

# Clone the repository
git clone https://github.com/danjonesio/AoI-Subnet-Calculator.git
cd AoI-Subnet-Calculator

# Install dependencies
npm install

# Run the development server
npm run dev

Open http://localhost:3000 in your browser.

npm test

The project includes 580+ tests covering subnet calculations, UI components, and integration scenarios.

npm run build

This creates an out directory with static files ready for deployment.

1. Enter an IP address (e.g., 192.168.1.0)
2. Enter a CIDR prefix (e.g., 24)
3. Select cloud provider mode if needed
4. Click "Calculate Subnet" or results appear automatically

1. Calculate a parent subnet
2. Choose split type:
   • Equal Split: Select number of subnets (2, 4, 8, etc.)
   • Custom CIDR: Specify exact target prefix length
3. Preview shows resulting subnets
4. Click "Split Subnet" to execute

1. Select adjacent subnets using checkboxes
2. Use "Quick Select Adjacent Groups" for convenience
3. Click "Join Selected Subnets"
4. System validates and combines into larger subnet

1. Press Ctrl/Cmd + S or click the Save button
2. Enter a name and optional description
3. Configuration is saved to browser storage
4. Load later with Ctrl/Cmd + O or Load button

1. Select a cloud provider mode (AWS, Azure, or GCP)
2. Scroll to "Infrastructure as Code Export" section
3. Choose format (Terraform, CloudFormation, or Bicep)
4. Set resource prefix and options
5. Copy to clipboard or download file

AWS VPC (10.0.1.0/24)

• 251 usable hosts (5 reserved by AWS)
• Reserved: .0 (network), .1 (router), .2 (DNS), .3 (future), .255 (broadcast)

Azure VNet (10.1.0.0/24)

• 251 usable hosts (5 reserved by Azure)
• Reserved: .0 (network), .1 (gateway), .2/.3 (DNS), .255 (broadcast)

Google Cloud (10.2.0.0/24)

• 252 usable hosts (4 reserved by GCP)
• Reserved: .0 (network), .1 (gateway), .254, .255 (broadcast)

Start: 10.0.0.0/22 (1024 hosts)
  ├── 10.0.0.0/24 - Web tier (254 hosts)
  ├── 10.0.1.0/24 - Application tier (254 hosts)
  ├── 10.0.2.0/24 - Database tier (254 hosts)
  └── 10.0.3.0/24 - Management tier (254 hosts)

Start: 2001:db8::/48
  └── Split into /64 subnets for VLANs
      ├── 2001:db8:0:1::/64 - VLAN 1
      ├── 2001:db8:0:2::/64 - VLAN 2
      └── ... (65,536 subnets available)

The project is deployed on Cloudflare Pages at calc.artofinfra.com.

• Build command: npm run build
• Build output: out
• Root directory: /

The static out directory can be deployed to:

• Vercel
• Netlify
• GitHub Pages
• AWS S3 + CloudFront
• Any static web server

• Next.js 15 - React framework with static export
• TypeScript - Type safety
• Tailwind CSS - Utility-first styling
• shadcn/ui - Accessible UI components
• Radix UI - Headless component primitives
• Jest - Testing framework

• Maximum 10,000 subnets per calculation
• IPv4 CIDR: /0 to /32
• IPv6 CIDR: /0 to /128

• AWS VPC: /16 to /28
• Azure VNet: /8 to /29
• Google Cloud: /8 to /29

Contributions are welcome! Please feel free to submit issues and pull requests.

MIT License - feel free to use this for your networking projects!

Created by Dan Jones at Art of Infra