IT Tools is an open-source collection of web-based utilities designed for developers and IT professionals to perform common technical tasks without switching between multiple sites. It solves the fragmentation problem of having to remember and navigate dozens of standalone tools for tasks like JSON formatting, base64 encoding, or IP validation. Built with Vue.js and TypeScript, it offers a unified, responsive interface with dark mode support and is optimized for speed and usability.
The platform is deployed via Vercel and can be self-hosted using Docker, Cloudron, Tipi, or Unraid. It supports internationalization, has a modular tool architecture, and is built with Vue 3, Volar, and Vitest for type-safe development and testing. The project encourages community contributions through a structured tool creation script and ESLint/Volar-based development workflow.
What You Get
- JSON Formatter & Validator - Parses, minifies, prettifies, and validates JSON with real-time error highlighting and syntax coloring.
- Base64 Encoder/Decoder - Converts text, files, or binary data to and from Base64 with drag-and-drop support and clipboard integration.
- UUID Generator - Generates RFC 4122 compliant UUIDs (v1, v4, v5) with options for custom namespaces and output formats.
- HTTP Status Code Reference - Interactive lookup tool with descriptions, examples, and curl commands for all standard HTTP status codes.
- IP Address Tools - Validates IPv4/IPv6, converts between decimal/hex/binary, and checks if an IP is private or public.
- Date & Timestamp Converter - Converts between Unix timestamps, ISO 8601, RFC 2822, and human-readable formats with timezone support.
- URL Encoder/Decoder - Encodes and decodes URL components with proper percent-encoding and handles edge cases like non-ASCII characters.
- Hash Generator - Computes MD5, SHA-1, SHA-256, and SHA-512 hashes of text or files with hex and base64 output options.
- Color Converter - Converts between HEX, RGB, HSL, HSV, and CMYK color formats with live preview and copy-to-clipboard.
- QR Code Generator - Creates customizable QR codes from text, URLs, or JSON with options for size, color, and logo embedding.
Common Use Cases
- Debugging API responses - A backend developer uses the JSON formatter and HTTP status code tool to quickly parse and understand malformed API responses without leaving their browser.
- Writing scripts with encoded data - A DevOps engineer uses the Base64 encoder to encode configuration files before embedding them in shell scripts or Kubernetes manifests.
- Preparing data for web forms - A frontend developer converts hex colors to RGB for dynamic CSS injection using the color converter tool.
- Validating user input in real time - A full-stack developer embeds the IP validator or UUID generator in a form to validate inputs before submission without backend calls.
Under The Hood
Architecture
- Modular tool system using a centralized factory pattern to register each utility as a self-contained route, component, and metadata entity, ensuring clean separation of concerns
- Component-driven UI with dynamic layout injection that maintains consistent global structure while enabling tool-specific rendering
- Plugin-based dependency injection via Vue’s app.use() system to cleanly extend functionality without component pollution
- Type-safe configuration powered by TypeScript interfaces and Vite’s auto-import system, reducing boilerplate with composable utilities
- Monorepo-style organization with isolated tool directories that promote reusability, testability, and independent development
Tech Stack
- Vue 3 with TypeScript as the core framework, complemented by Pinia for state management and Vue Router for navigation
- Vite as the build tool with seamless TypeScript support and automatic component/composable registration
- Comprehensive testing stack using Vitest for unit tests and Playwright for end-to-end browser validation
- Icon system leveraging multiple icon libraries with dynamic imports for optimized bundle size
- Multi-platform deployment support via Docker, Netlify, and Vercel with platform-specific routing configurations
- Rich ecosystem of specialized utilities including rich text editors, code editors, and internationalization libraries
Code Quality
- Extensive test coverage across unit, integration, and end-to-end scenarios to ensure robust functionality and UI integrity
- Clear separation of concerns with composables, services, and components, enabling testable logic and declarative UI
- Strong type safety enforced throughout the codebase with precise interfaces and type guards to prevent runtime errors
- Defensive programming with graceful input validation, returning safe defaults instead of throwing exceptions
- Consistent, descriptive naming conventions and explicit test case naming that reflect edge cases and expected behaviors
What Makes It Unique
- Native integration of phone number parsing with dynamic country detection from browser locale, enabling context-aware input handling
- Unified FormatTransformer abstraction that reduces boilerplate across dozens of tools through declarative, type-safe transformation templates
- Advanced WiFi QR code generator with full EAP phase-2 authentication support, a rare feature in web-based utilities
- Theme-aware collapsible menu with persistent state and CSS-in-JS theming that adapts to user preferences while preserving accessibility
- Shadow DOM encapsulation via Vue plugin to isolate tool UIs from global styles, enabling safe third-party embedding
- Real-time chronometer using RAF with millisecond precision and zero external dependencies, demonstrating optimized performance for high-frequency updates