Live Preview Box

Start typing shortnames (:smile:, :blush:, :heart:, etc.) or entering native emojis from a compatible device.

Input:

Output:

Required extras

To get this example working correctly we needed to include a few extra pieces, including:

jQuery
Custom JS (see below)

jQuery Snippet:

1

2

3

4

5

6

7

8

9

<script type="text/javascript">
  $(document).ready(function() {
    $("#inputText").on('keyup change input',function(e) {
      var source = $('#inputText').val();
      var preview = joypixels.toImage(source);
      $('#outputText').html(preview);
    });
  });
</script>