CryptoViz guide

Visualization Development Guide

A practical checklist for building cryptography visualizations that are educational, deterministic, accessible, responsive, and easy to review.

Guide completion

Mark stages complete as your feature becomes PR-ready.

Development stages

Active stage

Start by deciding what the visualizer should teach before writing UI code.

Identify the algorithm or cryptographic concept.
Write the expected learner takeaway in one sentence.
Choose safe demo inputs that do not encourage misuse.
Decide whether the module is encryption, hashing, key exchange, or attack education.

A SHA-256 visualizer should teach padding, block processing, compression rounds, and final digest output.

Use these checks before opening a PR so reviewers can quickly verify the feature without guessing what changed.

required

The module explains the concept in plain language and not only through code output.

required

Given the same input, key, and options, the module produces the same result and trace.

required

Invalid input produces useful messages instead of crashes or blank screens.

required

The interface remains usable on mobile, tablet, and desktop widths.

required

Interactive controls are keyboard-accessible and have readable labels.

required

New utilities or algorithm behavior are covered with focused unit tests.

required

A doc page or markdown file explains behavior, safety notes, and manual testing.

optional

Heavy computations use a worker where applicable.

Enter your feature name and copy the generated checklist into your PR.

Feature name