Step-Through Visualizer of AES

The 'Why'

I took a class on encryption during college, and we had assignments to encrypt data by hand. I wished something like this existed when I would encounter problems where my output did not match the answer key. So I 'ate my own dog food' and built this.

The 'How'

HTML and vanilla Javascript.

The Demo/Code

Click here to use the AES step through tool. To see the code powering it, simply right click on the page and view the page source.

Assumptions and Known Shortcomings

I assume that the end user knows about hexadecimal notation, versus binary or decimal. I don't do any validation on the input, the end user could put in 0xGG for any of the hex fields and they won't get any kind of warning.

Possible Expansion

Allow input and output to be in binary, or decimal, or octal notation. Add support for 192- and 256-bit keys. Add a page that explains and steps through the Key Expansion process.