React Protocol Decoder

Copy Page

A logic analyser earns its price the moment it shows you the edges and what they mean on one time axis. Decoded fields sit above the raw SCL/SDA traces, aligned to the exact samples they came from — hover a field and its boundaries drop through the waveform.

Installation

Props

kind is start, address, data, ack, nack, stop, or error — enough vocabulary for I²C, SPI, UART, and CAN alike. The component renders whatever you decode; it is a display, not a decoder engine, so the protocol logic stays where it belongs (your capture pipeline or a worker).

Alignment is the whole product

An annotation that is a few samples off the bits it describes is worse than no annotation — it will send someone hunting a bug that isn't there. So the demo synthesises the waveform and the field boundaries in the same pass, bit by bit: a genuine I²C transaction with START, address 0x48 + W, ACK, two data bytes, a NACK on the last, then STOP.

That construction is verifiable, and worth verifying. Reading the address byte back out of the generated waveform — sampling SDA in the middle of each SCL-high window across the address field's own boundaries — returns 0x90, i.e. 0x48 shifted left with the write bit. The waveform also contains exactly one valid START (SDA falling while SCL is high) and one valid STOP (SDA rising while SCL is high). The picture is electrically correct, not just plausible-looking.

Digital traces render as proper step paths — hold the level, jump vertically on change — rather than interpolated lines, because a sloped edge on a logic trace is a lie about what the signal did.