System Architecture Documentation
An overview of CryptoViz's thread isolation, Web Worker pipeline, and WebCrypto API integration.
Interactive Architecture & Data Flow
Click through execution steps to visualize thread isolation and WebCrypto hardware acceleration.
Manages UI state, chart visualizations, user inputs, and worker hook lifecycle.
Offloads non-blocking JS cipher execution, classical ciphers, and memory management.
Hardware-accelerated AES, SHA-256, RSA/ECC operations provided natively by OS/browser.
1. UI Event Trigger
User initiates an encrypt/decrypt or benchmark action. The React UI collects inputs and dispatches a task via `useCipherWorker` hook.
1. Web Worker Thread Isolation
Cryptographic computations (such as multi-iteration key derivation or large file encryption) can block JavaScript's main event loop. CryptoViz utilizes dedicated Web Workers (`useCipherWorker`) to process algorithms entirely off the main thread, keeping 60 FPS UI rendering completely responsive.
2. WebCrypto API & Fallbacks
Modern browsers expose native hardware acceleration through window.crypto.subtle. Where available, CryptoViz delegates symmetric key generation and hashing to WebCrypto. For educational classical ciphers or environments without WebCrypto, standard JavaScript fallback implementations are seamlessly used.
3. Cipher Registry Design Pattern
All ciphers in CryptoViz are registered in a centralized registry (CIPHER_REGISTRY). This decouples UI component rendering from underlying algorithm mechanics, making it straightforward to integrate new ciphers, write automated tests, and benchmark performance across categories.