CryptoViz architecture

Worker Architecture Documentation

Learn how CryptoViz moves heavy cryptographic operations into Web Workers, keeps the visualizer responsive, and returns structured output for steps, errors, and timing.

Current message stage

Collect visualizer input

0% through the worker message flow

Selected topic

Why CryptoViz uses workers

Web Workers keep expensive cipher operations away from the main UI thread.

Key points

  • Visualizer playback, input fields, and navigation should remain responsive while heavy cryptographic operations run.
  • The worker boundary separates UI state from algorithm execution.
  • Structured worker messages make success, errors, and timing easier to inspect.

Code pattern

const worker = new Worker(new URL('../lib/workers/cipher.worker.ts', import.meta.url), { type: 'module' })

Worker message flow

Step through how a visualizer request moves from the UI to the worker, into the cipher module, and back to the rendered result.

UI

Collect visualizer input

The page gathers cipher id, input, key, direction, and selected options from user controls.

Architecture rule

Keep message payloads structured and deterministic so worker results can be tested, cached, cancelled, and rendered consistently.

Worker manual testing checklist

Generate PR-ready testing notes for features that touch workers or worker-backed cipher modules.

  1. 1Open XXHash32 visualization in the browser.
  2. 2Run the default demo input and confirm output appears.
  3. 3Enable visualization or instrumented mode if available.
  4. 4Change input, key, or options and confirm the worker returns updated output.
  5. 5Trigger invalid input and confirm a friendly error appears.
  6. 6Run a second request quickly and confirm stale output does not replace the latest result.
  7. 7Check that the UI remains responsive while the operation runs.
  8. 8Run focused tests for the worker or cipher module touched by the feature.