JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/bitovi/syn/master/dist/syn.js"></script>
<input type="text" id="textInput" />
<input type="text" id="textInput2" />

CSS

input:first-of-type {
    width: 400px;
}

JavaScript

document.getElementById('textInput2').onkeypress = function (e) {
    console.log(e.which, e.shiftKey)
}


// using normal text
var text = 'Normal text, without SHIFT, works good...';
var letters = text.split('');
var letter = 0;

var typewriter = setInterval(function () {
    Syn.key(letters[letter], 'textInput');
    letter++;
    if (letter == letters.length) clearInterval(typewriter);
}, 100);


// trying to use SHIFT
setTimeout( function() {Syn.type('[shift]![shift-up]', 'textInput2');}, 1) // does not work, I would expect a "!" and the event.shiftKey to be true and event.key to be 33