JSFiddle - React, Tailwind, and code Playground

author(s): Tao Xin

HTML

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.6.1.nomodule.min.js"></script>

CSS

.label {
  width: 80px;
  font-weight: bold;
}

.value { width: 80px; }

.label, .value {
  font: monospace;
  display: inline-block;
}

JavaScript

const {div, input, span} = van.tags

const Label = text => span({class: "label"}, text)
const Value = text => span({class: "value"}, text)

const Inspector = () => {
  const keyEvent = van.state(new KeyboardEvent("keydown"))

  const Result = prop => span(Label(prop + ": "), Value(() => keyEvent.val[prop]))

  return div(
    div(input({placeholder: "Focus here and press keys…", style: "width: 260px",
      onkeydown: e => (e.preventDefault(), keyEvent.val = e)})),
    div(Result("key"), Result("code"), Result("which"), Result("keyCode")),
    div(Result("ctrlKey"), Result("metaKey"), Result("altKey"), Result("shiftKey")),
  )
}

van.add(document.body, Inspector())