JSFiddle - React, Tailwind, and code Playground

by Nicholas Berlette

HTML

<img id="img" src="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNSAyNSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM0OTRiNGM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5Db2Rpbmc8L3RpdGxlPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTkuMjEsMjIuMThsLS45My0uMzcsNy41LTE5LC45My4zN1ptOS4xNC0yLjgzLS43MS0uNzEsNi4xNS02LjE1TDE3LjY1LDYuMzVsLjcxLS43MSw2LjUsNi41YS41LjUsMCwwLDEsMCwuNzFabS0xMS43MSwwLTYuNS02LjVhLjUuNSwwLDAsMSwwLS43MWw2LjUtNi41LjcxLjcxTDEuMjEsMTIuNWw2LjE1LDYuMTVaIi8+PC9zdmc+" width="48" />
<hr>
<textarea id="text" rows="10" cols="100%"></textarea>

JavaScript

$i = document.getElementById('img');
$t = document.getElementById('text');
let data = atob($i.src.split('base64,')[1]);
$t.value = data;
$t.onkeydown = function(e) {
  data = btoa($t.value);
  $i.src = 'data:image/svg+xml;base64,' + data;
}