JSFiddle - React, Tailwind, and code Playground

HTML

<textarea autofocus>\n\r\t\f</textarea>
<pre>\u000a\u000d\u0009\u000c</pre>

CSS

textarea { width: 100%; height: 30em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

JavaScript

(function() {

    // Ever needed to escape '\n' as '\\n'? This function does that for any character, using its Unicode code point.
    // https://github.com/mathiasbynens/mothereffingcssescapes/blob/46799d70e9d18d02151db8b470880ee3d0873832/eff.js#L63-64

    function unicodeEscape(str) {
        return str.split('').map(function(character) {
            return '\\u' + ('0000' + character.charCodeAt().toString(16)).slice(-4);
        }).join('');
    }

    var pre = document.getElementsByTagName('pre')[0],
        input = document.getElementsByTagName('textarea')[0];
    input.oninput = function() {
        try {
            pre.innerHTML = unicodeEscape(eval('"' + input.value + '"'));
        } catch (e) {}
    }

}());