React Waveform Viewer

A digital timing-diagram viewer with a WaveDrom-inspired wave notation. Describe each signal as a string of per-cycle characters — clocks, logic levels, buses with data labels, high-impedance, and unknowns — and get a crisp SVG diagram with a cycle ruler, hover cursor, and a live value-at-cursor column, like a wave window in an EDA tool. Ideal for IP documentation, protocol tutorials, and verification reports.

axi4_lite_write — tb_top.dut.s_axi10 ns / cycle

aclkclk

awvalid0

awready0

awaddr[31:0]x

wvalid0

wdata[31:0]x

wready0

bvalid0

bresp[1:0]x

Hover the diagram to inspect signal values at any cycle.

Installation

npx shadcn@latest add waveform.json

Usage

Wave notation

One character per clock cycle:

Char	Meaning
p	Positive clock pulse (rise at cycle start)
n	Negative clock pulse
1	Logic high
0	Logic low
z	High impedance (mid-level)
x	Unknown / don't care (hatched)
=	Bus valid — consumes the next entry of data[] as label
.	Extend the previous state one more cycle

Design notes

Value-at-cursor column — the panel between signal names and waves shows each signal's value at the hovered cycle (or the last cycle when idle), like the cursor readout in a wave window.
Standard drawing conventions — buses render as hexagonal valid-windows with centered mono labels, unknowns as 45° hatching, transitions with a consistent 3px slew.
Print-safe — pure SVG with hairline cycle grid; no animation, no gradients.

Props

Waveform

Prop	Type	Default	Description
signals	WaveSignal[]	—	Signals to render, top to bottom
title	string	—	Header label, e.g. scope path or file name
timescale	string	—	Right-aligned header note, e.g. "10 ns / cycle"
cycleWidth	number	40	Pixel width of one cycle

WaveSignal

Prop	Type	Default	Description
name	string	—	Signal name shown in the left column
wave	string	—	Per-cycle wave characters (see notation)
data	string[]	—	Labels consumed by = cycles, in order

React Waveform Viewer Copy Page