JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/lagodiuk/earley-parser-js/master/earley-oop.min.js"></script>
<input type="text" size="40" id="txt"/>
<div id="dv"></div>

CSS

/*
 Transforming nested lists to pretty tree
 
 <div class="tree">
    <ul>
        <li>
            <ul>
            ...
            </ul>
        </li>
        ...
    </ul>
 </div>
 
Source: http://thecodeplayer.com/walkthrough/css3-family-tree
Some other advices about displaying trees: http://stackoverflow.com/questions/1695115/how-do-i-draw-the-lines-of-a-family-tree-using-html-css
*/

* {
    margin: 0;
    padding: 0;
}

.tree ul {
	padding-top: 20px;
    position: relative;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.tree li {
    white-space: nowrap;
	float: left;
    text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
	content: '';
	position: absolute;
    top: 0;
    right: 50%;
	border-top: 1px solid #ccc;
	width: 50%;
    height: 20px;
}
.tree li::after{
	right: auto;
    left: 50%;
	border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without
 any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{
    padding-top: 0;
}

/*Remove left connector from first child and
 right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
	border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
	content: '';
	position: absolute;
    top: 0;
    left: 50%;
	border-left:...

JavaScript

var grammar = new tinynlp.Grammar([
        'R -> N',
        'S -> S add_sub M | M',
        'M -> M mul_div T | T',
        'N -> S lt_gt S | S',
        'T -> num | ( S )',
    ]);

    grammar.terminalSymbols = function(token) {
        if ('<' === token || '>' === token) return ['lt_gt'];
        if ('+' === token || '-' === token) return ['add_sub'];
        if ('*' === token || '/' === token) return ['mul_div'];
        if ('(' === token) return ['('];
        if (')' === token) return [')'];
        return ['num'];
    }

    function displayTree(tree) {
        if (!tree.subtrees || tree.subtrees.length == 0) {
            return '<li><a href="#">' + tree.root + '</a></li>';
        }
        var builder = [];
        builder.push('<li><a href="#">');
        builder.push(tree.root);
        builder.push('</a>')
        builder.push('<ul>')
        for (var i in tree.subtrees) {
            builder.push(displayTree(tree.subtrees[i]))
        }
        builder.push('</ul>')
        builder.push('</li>')
        return builder.join('');
    }

    $('#txt').bind('input', function() {
        var s = $(this).val();

        var tokenStream = s.replace(/\+/g, ' + ').replace(/-/g, ' - ').replace(/\*/g, ' * ').replace(/\//g, ' / ').replace(/\(/g, ' ( ').replace(/\)/g, ' ) ').replace(/\s+/g, ' ').trim().split(' ');
        var chart = tinynlp.parse(tokenStream, grammar, 'R');
        console.log('\n')
        var state = chart.getFinishedRoot('R');
        if (state) {
            var trees = state.traverse();
            for (var i in trees) {
                console.log(JSON.stringify(trees[i]))
                $('#dv').html('<div class="tree" id="displayTree"><ul>' + displayTree(trees[i]) + '</ul></div></br>');
            }
        }
    });