JSFiddle - React, Tailwind, and code Playground

by Gustavo Ramoscelli

HTML

<header>
 <script src="http://wavedrom.github.io/skins/default.js"></script>
 <script src="http://wavedrom.github.io/WaveDrom.js"></script>
</header>
<body onload="WaveDrom.ProcessAll()">

<h2>WaveDrom Example</h2>

WaveDrom timing diagrams can be embedded into the web pages, blogs, wiki pages:
<p/>
<script language="JavaScript">
  let asdf = 1;
</script>
<script type="WaveDrom">
(function (bits, ticks) {
  var i, t, gray, state, data = [], arr = [];
  for (i = 0; i < bits; i++) {
    arr.push({name: i + '', wave: ''});
    state = 1;
    for (t = 0; t < ticks; t++) {
      if (asdf) data.push(t + '');
      gray = (((t >> 1) ^ t) >> i) & 1;
      arr[i].wave += (gray === state) ? '.' : gray + '';
      state = gray;
    }
  }
  arr.unshift('gray');
  return {signal: [
    {name: 'bin', wave: '2'.repeat(ticks), data: data}, arr
  ]}	;
})(4, 8)
</script>
<p/>
Yes, right in the middle of your page.
<button id="toggle">
Toggle
</button>
</body>

JavaScript

$( '#toggle' ).click( function() {
  asdf = !asdf;
  WaveDrom.ProcessAll();
})