A comprehensive collection of 31 advanced developer utility tools for encoding/decoding, data conversion, formatting, generation, and testing. Built with React, TypeScript, and Vite for optimal performance and developer experience.
Encode and decode text to/from Base64 format with support for multiple character encodings.
- UTF-8, ASCII, UTF-16, Latin-1 support
- Real-time encoding/decoding
- Batch processing capabilities
- Performance: <100ms for typical text
Generate QR codes from text and scan QR codes from images.
- Multiple error correction levels
- Customizable sizes and colors
- Camera integration for live scanning
- Export formats: PNG, SVG, JPG
Encode URLs for safe transmission and decode encoded URLs back to readable format.
- Batch URL processing
- Internationalization support
- Query parameter handling
Convert images to Base64 strings for embedding in HTML/CSS and decode Base64 data back to images.
- Drag-and-drop file upload
- Support for multiple image formats
- Image metadata display
- Preview functionality
Decode JWT tokens to inspect contents and generate tokens for testing.
- Header, payload, and signature analysis
- Expiration validation
- Client-side secret handling (with security warnings)
- Formatted JSON display
Encode HTML special characters to entities and decode entities back to original characters.
- HTML 4, HTML 5, XML, and Numeric entity support
- Code formatting preservation
- Extended symbol support (mathematical, Greek, etc.)
Compress text data using GZip algorithm and decompress GZip data back to original content.
- Multiple compression levels (1-9)
- Compression ratio and size comparison
- Batch processing capabilities
Parse and analyze digital certificates to extract detailed information.
- PEM, DER, and Base64 format support
- Certificate validation and security analysis
- Subject, issuer, and validity period extraction
- Fingerprint calculation
Parse and visualize cron expressions with human-readable descriptions.
- Next execution times display
- Visual schedule representation
- Common cron patterns library
- Syntax validation and error detection
Convert dates between different formats and timezones.
- Unix timestamp conversion
- ISO 8601, RFC formats
- Multiple timezone support
- Relative time calculations
Transform JSON data into tabular format for easy visualization.
- Nested object flattening
- Array handling
- CSV/Excel export options
- Sortable columns
Convert between JSON and YAML formats with validation.
- Bidirectional conversion
- Syntax highlighting
- Format validation
- Preserve comments (YAML)
Convert numbers between different bases (binary, octal, decimal, hexadecimal).
- Support for bases 2-36
- Batch conversion
- Floating point support
- Two's complement for negative numbers
Format and beautify JSON with syntax highlighting and validation.
- Syntax validation
- Customizable indentation
- Minify/prettify toggle
- Copy formatted output
Format and beautify SQL queries for better readability.
- Multiple SQL dialect support
- Keyword capitalization
- Indentation options
- Syntax highlighting
Format and beautify XML with validation and pretty-print.
- Schema validation
- Namespace handling
- Attribute formatting
- Comment preservation
Generate cryptographic hashes and checksums for text or files.
- MD5, SHA-1, SHA-256, SHA-512
- File hashing support
- HMAC generation
- Hash comparison
Generate placeholder text for designs and mockups.
- Paragraph, sentence, word count options
- Multiple languages support
- HTML tag wrapping
- Custom word lists
Generate secure random passwords with customizable options.
- Length customization
- Character set options (uppercase, lowercase, numbers, symbols)
- Multiple password generation
- Strength indicator
Generate various versions of UUIDs (v1, v4, v5).
- UUID v1 (timestamp-based)
- UUID v4 (random)
- UUID v5 (namespace-based)
- Bulk generation
Simulate how images appear to people with different types of color blindness.
- Protanopia, Deuteranopia, Tritanopia simulation
- Image upload support
- Side-by-side comparison
- Accessibility testing
Convert images between different formats and resize them.
- Format conversion (PNG, JPG, WebP, GIF)
- Resize and crop
- Quality adjustment
- Batch processing
Test and validate JSONPath expressions against JSON data.
- Live expression testing
- Result highlighting
- Common expression library
- Syntax validation
Test and debug regular expressions with real-time matching.
- Pattern testing with flags
- Match highlighting
- Capture group display
- Common regex library
Test XPath expressions and validate XML structure.
- XPath expression testing
- XML validation
- Namespace support
- Result highlighting
Escape and unescape special characters for various contexts.
- HTML, JavaScript, JSON, URL escaping
- Unicode handling
- Batch processing
- Preview mode
Compare two lists and find differences, intersections, and unique items.
- Case-sensitive/insensitive comparison
- Delimiter options
- Venn diagram visualization
- Export results
Preview Markdown text with live rendering.
- GitHub Flavored Markdown support
- Syntax highlighting
- Table of contents generation
- Export to HTML
Analyze text for character count, word count, reading time, and more.
- Character/word/line counting
- Reading time estimation
- Keyword density
- Case conversion utilities
Compare two text blocks and highlight differences.
- Side-by-side comparison
- Inline diff view
- Character/word/line level comparison
- Merge capabilities
- Node.js 16+
- npm or yarn package manager
# Clone the repository
git clone <repository-url>
cd webdevtoys
# Install dependencies
npm install
# Start development server
npm run devOpen your browser and navigate to http://localhost:3000. All tools are accessible from the main navigation.
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Run tests
npm test
# Run tests with UI
npm run test:ui
# Run Lighthouse audit
npm run lighthouse
# Run linting
npm run lintsrc/
├── components/ # React components (31 tools)
│ ├── Encoders & Decoders (8)
│ ├── Converters (5)
│ ├── Formatters (3)
│ ├── Generators (4)
│ ├── Graphic (2)
│ ├── Testers (3)
│ ├── Text (5)
│ └── theme-toggle/
├── lib/ # Core logic
│ ├── services/ # Business logic services
│ ├── formatters/ # Data formatting utilities
│ ├── parsers/ # Specialized parsing logic
│ ├── utils/ # Utility functions
│ ├── types/ # TypeScript types
│ ├── validation/ # Validation rules
│ └── styles/ # Shared styles
├── pages/ # Route-level components
├── contexts/ # React contexts (ThemeContext)
└── services/ # Application services
tests/
├── unit/ # Unit tests (Vitest)
├── integration/ # E2E tests (Playwright)
├── a11y/ # Accessibility tests
├── performance/ # Lighthouse audits
├── constitution/ # Constitution compliance tests
└── security/ # Security validation tests
- Unit Tests: Service layer testing with Vitest
- Integration Tests: End-to-end user workflows with Playwright
- Accessibility Tests: WCAG 2.1 AA compliance with axe-core
- Performance Tests: Sub-2-second operation times
- Progressive Enhancement: No-JS fallback testing
- Security Tests: Input validation and sanitization
# All tests
npm test
# Unit tests only
npm test -- src/lib/services
# Integration tests
npx playwright test
# Accessibility tests
npx playwright test --config=playwright.config.ts
# Performance tests
npm test -- tests/unit/*Performance*This project adheres to the WebDevToys Constitution principles:
- Each tool solves a specific user problem
- Zero configuration required for basic use
- Single-purpose focus with clear value proposition
- Minimal cognitive load
- Sub-2-second operation times for all tools
- <100KB gzipped initial bundle (~73KB target)
- Optimized for 3G network conditions
- Memory efficient with proper cleanup
- 100% critical path coverage
- Tests written before implementation
- Comprehensive test suite across all dimensions
- Constitution compliance validation
- WCAG 2.1 AA compliance
- Keyboard navigation support
- Screen reader compatibility
- Mobile-first responsive design
- Core functionality works without JavaScript
- Graceful degradation for unsupported features
- Enhanced experience with JavaScript enabled
- Server-side fallbacks for text-based tools
- Modern Browsers: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
- Mobile: iOS Safari 14+, Chrome Mobile 90+
- Features: ES2020+, CSS Grid, Flexbox, File API, Blob API, Clipboard API
- JWT Tokens: Processed locally with clear security warnings
- Certificates: Never uploaded to external services
- Images: Processed entirely in the browser
- Privacy: No data transmitted to third-party services
- Sanitization of all user inputs
- Protection against XSS and injection attacks
- Error message filtering to prevent information disclosure
- Memory cleanup for sensitive data
- Uniform component structure across all tools
- Shared CSS custom properties for theming
- Consistent typography and spacing
- Standardized error handling patterns
- Optimized for touch interactions
- Progressive layouts from mobile to desktop
- Consistent experience across device sizes
- Semantic HTML5 markup
- ARIA labels and roles
- Keyboard navigation patterns
- High contrast mode support
- Screen reader optimization
# Optional: Set custom port
PORT=3000
# Optional: Set API endpoints (for fallbacks)
VITE_API_URL=http://localhost:8080The project uses Vite with TypeScript support and includes:
- React Fast Refresh
- ESBuild for fast builds
- Source map generation for debugging
- Bundle analysis capabilities
- CSS preprocessing with PostCSS
- Core Application: ~45KB gzipped
- QR Code Libraries: ~23KB gzipped
- JWT Libraries: ~17KB gzipped
- Certificate Libraries: ~12KB gzipped
- Compression Libraries: ~5KB gzipped
- Total Initial Bundle: ~102KB gzipped
| Tool | Operation | Target | Actual | |------|-----------|--------| | Base64 Encode/Decode | <100ms | ~50ms | | QR Code Generation | <1000ms | ~300ms | | URL Encode/Decode | <200ms | ~80ms | | JWT Decode | <200ms | ~120ms | | HTML Entity Encode/Decode | <200ms | ~70ms | | GZip Compression/Decompression | <300ms | ~150ms | | Certificate Parsing | <2000ms | ~800ms |
- Prerequisites: Ensure Node.js 16+ and npm are installed
- Setup: Fork, clone, and install dependencies
- Branch: Create feature branch from main
- Development: Follow test-first methodology
- Testing: Ensure 100% critical path coverage
- Quality: Pass all checks (lint, type, tests)
All contributions must pass the WebDevToys Constitution compliance tests:
# Run constitution compliance tests
npm test -- tests/constitution/- TypeScript strict mode enabled
- ESLint with React hooks validation
- Prettier code formatting
- Semantic HTML5 markup
- Accessible component patterns
- Comprehensive test coverage
MIT License - see LICENSE file for details.
Built with modern web technologies and following best practices for developer tools:
- React - Component-based UI framework
- TypeScript - Type-safe development
- Vite - Fast build tool and dev server
- Playwright - Reliable end-to-end testing
- Vitest - Fast unit testing framework
- axe-core - Accessibility testing engine
For questions, issues, or contributions:
- Check the Issues page
- Review the Documentation
- Follow the Contributing Guidelines
WebDevToys - Professional developer tools built with care and precision.