RadixLab is a premium, high-fidelity, interactive developer suite designed for multi-radix conversions, computer architecture analysis, logic encoding, data structure visualizations, and cryptographic operations.
Built with React, TypeScript, Tailwind CSS v4, and custom physics-guided spring transitions via Framer Motion, RadixLab delivers an ultra-smooth, eye-safe, responsive desktop-first development sandbox.
RadixLab gathers comprehensive computer arithmetic and data utilities inside a single visual canvas:
- Multi-Base Converter: Effortlessly convert numbers across Binary, Octal, Decimal, Hexadecimal, and arbitrary bases with real-time alignment and clipboard capabilities.
- Scientific Calculator: Comprehensive mathematical operations paired with radix-specific conversion modes.
- Batch Converter: Process multi-record inputs simultaneously with drag-and-drop or batch file importing.
- Color Space Converter: Dynamic hex-to-color decoder with detailed RGB, HSL, and CMYK transformations.
- IEEE 754 Analyzer: Decode single (32-bit) and double (64-bit) precision floating-point binaries with full structural breakdowns (Sign, Exponent, Mantissa) and rounding error diagnostics.
- Signed Complement Lab: Visualize and convert Two's Complement, One's Complement, and Sign-Magnitude numbers.
- Bit Patterns & Bitwise Operators: Interactive bitmask playgrounds with real-time shift indicators and logic table diagnostics.
- Binary Tree Visualizer: Interactive tree node animations showing depth-first and breadth-first search path traversals.
- Interactive Number Line: Real-time fractional-zoom visual slider plotting integer bounds and interval coordinates.
- Bytes & Bits Room: Inspect exact visual representations of byte arrays down to their binary structures.
- Cryptographic Hash Suites: Fast, client-side generators for MD5, SHA-1, and SHA-256 with copyable hashes.
- Base64 Studio: Encode and decode complex strings, binary structures, or URL components with validation safeguards.
- Regex Tester: Dynamic, live pattern tester complete with status, match groups, and structured test assertions.
- UUID Generator: Highly configurable version 4 UUID batch generation suite.
- ASCII & Unicode Decoders: Comprehensive index tables pairing text glyphs with integers instantly.
RadixLab is designed around maximum developer productivity:
- Fast Section Cycling: Tap ↑ Up Arrow or ↓ Down Arrow on any non-input area to cascade instantly through the side modules.
- Global Hotkeys: Alt-triggered quick routes (Alt + 1 through Alt + 9) and shortcuts dashboard (Alt + K).
- Haptic Interface: Crisp, click feedback animations and responsive UI triggers.
- Ambient Glow Themes: Supports a futuristic Cosmic Dark obsidian scheme and a clean, high-contrast Nordic Light viewport.
- Runtime Framework: React 19 & Vite 6
- Language: TypeScript 5 (Strict compilation, custom union contracts)
- Styling Engine: Tailwind CSS v4 with custom
@importpipelines and theme variables - Animation System: Motion (Spring-loaded layout transformations, wait-mode routes)
- Icons: Lucide React API
Below is an overview of the directory organization in RadixLab:
radix-lab/
├── assets/ # Public visual configuration artifacts & graphics
├── src/
│ ├── components/ # Modularized view panels & layout wrappers
│ │ ├── AsciiUnicodeView.tsx # Glyph mapping & character index reference
│ │ ├── Base64View.tsx # Complex string & URL encoder/decoder
│ │ ├── BatchConvertView.tsx # Bulk CSV data pipeline & input processor
│ │ ├── BinaryTreeView.tsx # Interactive traversal renderer (DFS/BFS)
│ │ ├── BitPatternsView.tsx # Active bitwise logical mask playground
│ │ ├── BytesBitsView.tsx # Multi-byte structure & array visual inspector
│ │ ├── CalculatorView.tsx # Dynamic basic calculator keypad overlay
│ │ ├── ColorConverterView.tsx # HEX, RGB, HSL & CMYK interactive color decoder
│ │ ├── ConverterView.tsx # Standard radix, floating-point & negative module
│ │ ├── EducationalView.tsx # Complement formulas & float reference sheet
│ │ ├── ErrorBoundary.tsx # Runtime fault isolation layer
│ │ ├── HashGeneratorView.tsx # Cryptographic hashes (MD5, SHA1, SHA256)
│ │ ├── HistoryView.tsx # Interactive, filterable action history ledger
│ │ ├── IEEE754View.tsx # Floating point parser & mantissa calculator
│ │ ├── NumberLineView.tsx # Zoomable real-time fractional pointer line
│ │ ├── RegexTesterView.tsx # Live regular expression patterns analyzer
│ │ ├── ScientificCalculatorView.tsx# Trigonometric & arithmetic sandbox
│ │ ├── SignedComplementView.tsx # Sign-Magnitude, 1s & 2s complement generator
│ │ └── UuidGeneratorView.tsx # Batch UUID v4 structural compiler
│ ├── utils/ # High-performance algorithmic calculators
│ │ ├── converter.ts # Custom arithmetic parsing engines
│ │ ├── haptics.ts # Responsive user feedback triggers
│ │ ├── mathSteps.ts # Multi-step radix conversion walk-through builder
│ │ └── speech.ts # Dictation input utilities
│ ├── App.tsx # Main orchestrator & routing state controller
│ ├── main.tsx # React entry point mounting tree
│ ├── types.ts # Shared layout contracts & static definitions
│ └── index.css # Tailwind CSS input and customized theme layers
├── index.html # Custom HTML entrypoint with metadata
├── package.json # Manifest declaring dependencies & runtime run scripts
└── tsconfig.json # TypeScript type compiler configuration
Make sure you have Node.js (v18+) and npm installed.
-
Clone or download the repository:
git clone <your-repository-url> cd radix-lab
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
Open your browser and navigate to
http://localhost:3000to interact with RadixLab.
Compile the application to a high-performance static SPA:
npm run buildThe static file artifacts will be generated in the dist/ folder, ready for deployment to GitHub Pages, Netlify, Vercel, or any static hosting container.
This project is licensed under the MIT License - see the LICENSE file for details.