AES Round Visualizer

Observe the matrix transformations of the Advanced Encryption Standard in real-time.

About the AES Round Visualizer

The AES Round Visualizer is a free, open-source, client-side educational tool designed to make the inner workings of the Advanced Encryption Standard (AES) accessible and intuitive. It focuses on demonstrating **one complete encryption round** of AES-128, showing every transformation step-by-step so learners can see exactly how confusion and diffusion are achieved in practice.

AES is the most widely used symmetric block cipher today, protecting everything from HTTPS connections to encrypted files and secure messaging. Yet its internal mechanics—SubBytes, ShiftRows, MixColumns, and AddRoundKey—are often taught only through abstract mathematics or static diagrams. This tool bridges that gap by letting you watch the four-by-four state matrix evolve in real time as each operation is applied.

What the tool shows

After you enter a 128-bit plaintext block and a 128-bit round key (both as 32 hexadecimal characters), the visualizer performs:

  • Initial AddRoundKey — XORs the plaintext with the round key to begin key mixing.
  • SubBytes — Applies the nonlinear S-box substitution to every byte, creating confusion.
  • ShiftRows — Cyclically shifts each row left by a different offset, spreading influence horizontally.
  • MixColumns — Mixes each column using finite-field arithmetic, spreading changes vertically.
  • Final AddRoundKey — Applies the round key again, completing the round.

Yellow highlighting shows exactly which bytes changed between steps, helping you instantly see diffusion in action. The matrix is displayed clearly in hexadecimal, with monospace font for readability.

Educational goals

The primary purpose is learning. Whether you are a student encountering AES for the first time, a teacher preparing classroom examples, or a developer wanting to deepen your understanding of symmetric cryptography, this visualizer helps you:

  • Observe how a single bit change propagates through the round (avalanche effect)
  • Compare structured vs. random inputs to see confusion at work
  • Understand why each transformation is placed where it is in the round
  • Build intuition for why AES resists linear and differential cryptanalysis

All computation happens **entirely in your browser** — no data is sent to any server, no tracking occurs, and no persistent storage is used. The tool is deliberately simplified (same key used for both AddRoundKey steps, no key expansion shown) so you can focus purely on the round mathematics described in NIST FIPS 197.

This is not a production cryptographic library. It is an educational aid to help demystify AES and inspire curiosity about modern cryptography. Enjoy exploring, experimenting, and learning.

How to Use the AES Round Visualizer

1
Enter the plaintext block

Type or paste exactly 32 hexadecimal characters (16 bytes) into the "Plaintext" field. This represents the 128-bit input block. Valid characters are 0–9 and a–f (or A–F). Example: 00112233445566778899aabbccddeeff. The tool will validate the length and format automatically.

2
Provide a round key

Enter another 32 hexadecimal characters into the "Round Key" field. This is the 128-bit key material used for both AddRoundKey steps in this single-round demonstration. Example: 000102030405060708090a0b0c0d0e0f. Again, the tool checks for correct length and valid hex.

3
Initialize and step through

Click "Initialize" to see the state after the initial AddRoundKey (the starting point shown). Then use the "Next Step" and "Previous Step" buttons to move forward or backward through the five stages: SubBytes, ShiftRows, MixColumns, and final AddRoundKey. Yellow highlights show changed bytes at each transition.

4
Experiment and reset

Try different inputs—structured patterns, single-bit changes, all zeros, or repeating bytes—to observe how diffusion and confusion behave. Click "Reset" anytime to start over. There is no limit on trials; everything runs locally in your browser.

5
Interpret the results

Watch how a single changed byte after SubBytes spreads across the matrix during ShiftRows and MixColumns. Use the step labels and highlights to connect theory to visual evidence. For deeper understanding, compare results with the blog articles linked in the navigation.

Frequently Asked Questions

No. The AES Round Visualizer is strictly an **educational demonstration tool**. It uses a simplified single-round model with the same key applied twice and does not implement full AES encryption, decryption, or secure key expansion. Never use it to encrypt or protect real sensitive data. All operations run locally in your browser with no data transmission, but it is not audited or certified for cryptographic use.

The visualizer demonstrates a single round of **AES-128** (128-bit block and key size). It shows the standard transformations defined in NIST FIPS 197: initial AddRoundKey, SubBytes, ShiftRows, MixColumns, and final AddRoundKey. It does not show key scheduling, multiple rounds, or AES-192/AES-256 differences.

No. Everything happens **client-side** in your browser using JavaScript. Your plaintext, round key, and all intermediate states never leave your device. There are no analytics, tracking cookies, or server requests. This makes the tool completely private by design.

The tool displays the state matrix in **row-major order** (rows shown top to bottom) with bytes in hexadecimal. Some textbooks or tools use column-major order or different byte layouts. The transformations follow the exact FIPS 197 specification, but the visual presentation is optimized for clarity and learning.

Yes. Once loaded, the site works offline (all JS is static). It is fully responsive and usable on mobile devices, though the matrix is best viewed on larger screens for detail. No installation is required—just open it in a modern browser.

Focusing on one round allows deep exploration of each transformation without overwhelming complexity. Understanding a single round well makes it much easier to grasp multiple rounds and full AES later. The tool is intentionally kept simple for teaching purposes.