Hint relation between data visualizations

Purpose

To teach users visually about Simple Serialize.

Proposal

If the user hovers over sections of the serialized bytes, each minimal block of data is highlighted and matched to the corresponding deserialized representation. Also, a popover can give info about the data type.

Issues

I believe ssz is run as a black box, so it may not be trivial to get the info required for this visualization. How could this mapping be extracted without coding a secondary deserialization algorithm?

It would be nice to get some sort of "AST" of the serialized bytes to render them as a sequence of inline elements. For example:

[
  {
    type: "offset",
    bytes: "94000000",
    path: "aggregationBits",
  },
  {
    type: "fixed",
    bytes: "0200000000000000",
    path: "data.slot",
  },
  {
    type: "fixed",
    bytes: "0400000000000000",
    path: "data.index",
  },
]