JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://rawgithub.com/h2non/oml/master/oml.min.js"></script>
<textarea style="width: 420px; height: 360px">
url = 'https://github.com/h2non/oml#syntax-reference'

doctype
html:
  head:
    &title: This is oml!
    script:>
      if (foo) {
        bar(2 ^ 2)
      }
    end
  end
  body:
    # use a reference that points to 'title'
    h1.head: *title 
    # use the shortcuts for class and id attributes definition
    .container@main (title: 'Main container'):
      p.text:
        | A template engine built on top of the Oli language
      a (href: *url): Oml reference
      textarea:-
        Lorem ipsum ad his scripta blandit partiendo, 
        eum fastidii accumsan euripidis in, eum liber 
        hendrerit an. Qui ut wisi vocibus suscipiantur
      end
    end
  end
end
</textarea>
<br /><button onclick="render()">Render</button>
<pre></pre>

JavaScript

this.render = function () {
    var code = document.getElementsByTagName('textarea')[0].value
    var html = oml.render(code, { pretty: true })
    document.getElementsByTagName('pre')[0].textContent = html
}