AES Step-by-Step Visualizer
Encrypt a real block with AES-128 and watch every transformation round by round. Implementation validated against the official FIPS-197 vector and your browser's Web Crypto API.
Encrypts a 128-bit block with AES-128 step by step: every round shows the real matrix state after SubBytes, ShiftRows, MixColumns and AddRoundKey. Keys expand through the official key schedule.
Built by
Miguel Ángel Colorado Marin (MACM)
Built by
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
I develop web apps, digital tools and full projects — from design to deployment.
AES protects half the planet's HTTPS traffic, yet almost nobody has seen its guts: it's taught as a black box that "encrypts". This tool opens that box. Enter a key and a 16-byte block and watch the state — a 4×4 byte matrix — transform across the algorithm's 10 rounds: SubBytes swaps each byte for its S-box entry, ShiftRows rotates rows to spread columns apart, MixColumns blends each column with GF(2⁸) arithmetic, and AddRoundKey injects the round key derived by the key schedule. This is not an approximate simulation: it's a complete FIPS-197 implementation whose output is automatically validated against two independent sources — the standard's official vector (Appendix C.1) and your browser's own Web Crypto API.
Features
- ✓All 10 rounds with the real state at every phase
- ✓Key schedule: all 11 derived keys visible
- ✓4×4 matrices in the standard's exact layout
- ✓Verified against FIPS-197 Appendix C.1
- ✓Double-checked against your browser's Web Crypto API
How to visualize AES encryption?
- 1
Pick key and block
The official FIPS-197 vector loads by default; change both values if you want.
- 2
Encrypt the block
The 11 round keys and the initial post-XOR state are generated.
- 3
Walk through the rounds
Expand each round to see the state after SubBytes, ShiftRows, MixColumns and AddRoundKey.
- 4
Check the verification
The result is live-compared against Web Crypto: if it matches, the implementation is correct.
Frequently asked questions
Can I use this to encrypt my actual data?
It's an educational tool: it encrypts a single 16-byte block with no operation mode or padding. For real data use this suite's AES-256 Text Encryptor, which implements GCM via Web Crypto.
Why does the last round skip MixColumns?
FIPS-197 itself defines it that way: MixColumns right before the final AddRoundKey adds no security because its effect would be invertible by an attacker without the key; dropping it simplifies decryption without weakening the cipher.
What does "column-major" state layout mean?
FIPS-197 fills the matrix column by column: the block's first 4 bytes form the first column. That's why the first row shows bytes 0, 4, 8 and 12 rather than 0, 1, 2 and 3 as you'd assume reading the hex left to right.
Related tools
Embed AES Step-by-Step Visualizer on your site
Add AES Step-by-Step Visualizer to any web page with a simple iframe. Free, with attribution to miguelacm.es.
<iframe
src="https://miguelacm.es/embed/aes-visualizer"
width="100%"
height="700"
frameborder="0"
title="AES Step-by-Step Visualizer — miguelacm.es"
></iframe>