DEV Community

Cover image for I built an interactive SHA-256 visualizer to finally understand how it works
Jamal ER-RAKIBI
Jamal ER-RAKIBI

Posted on

I built an interactive SHA-256 visualizer to finally understand how it works

For years I kept seeing SHA-256 everywhere, in bitcoin, TLS, Git, proofs, ... but every explanation either skipped the details or showed the same diagram that hides the actual work.

Most resources explain hashing as:

input → black box → hash

Which is fine for beginners, but it leaves out the interesting part: how the message is padded, how W[0..63] is generated, and how all 64 rounds update the internal state.
So I built a tool to finally see those steps in real time.

Live Demo: https://hashexplained.com/
Source (MIT): https://github.com/bitcoin-dev-project/hashes-visualizer
What it shows:
• message preprocessing & padding
• the 64-word schedule (W[0..63])
• round constants & bitwise functions
• (a..h) updating each round
• final digest construction

Built out of frustration and curiosity, hopefully useful to others too

Top comments (0)