It wouldn't work with Typescript, but this is what my vanilla CoffeeScript React code looks like:

    div
      className: 'navbar-form'
      style: 
        backgroundColor: "green"
      ,
      div
        className: 'btn-group'
        ,
        button
          type: 'button'
          className: 'btn btn-warning'
          onClick: @handleDecreaseWpmClick
          ,
          span
            className: 'glyphicon glyphicon-chevron-down'
        span
          className: 'btn btn-default disabled'
          ,
          "#{ @props.status.get('wpm') }"
          span
            className: 'hidden-xs'
            ,
            " wpm"
        button
          type: 'button'
          className: 'btn btn-warning'
          onClick: @handleIncreaseWpmClick
          ,
          span
            className: 'glyphicon glyphicon-chevron-up'

(For the curious, "wpm" is short for "words per minute" - this is straight out of my code for http://splashreaderapp.com. More code at http://github.com/rattrayalex/splashreaderapp)

Pretty sure you can lose all of those single line "," and make it a bit nicer.

    div
      className: 'navbar-form'
      style: 
        backgroundColor: "green"
      div
        className: 'btn-group'
        button
          type: 'button'
          className: 'btn btn-warning'
          onClick: @handleDecreaseWpmClick
          span
            className: 'glyphicon glyphicon-chevron-down'
        span
          className: 'btn btn-default disabled'
          "#{ @props.status.get('wpm') }"
          span
            className: 'hidden-xs'
            " wpm"
        button
          type: 'button'
          className: 'btn btn-warning'
          onClick: @handleIncreaseWpmClick
          span
            className: 'glyphicon glyphicon-chevron-up'

Well JSX is just compiled to JS so I guess you could have something that looks like HAML that substitutes the JSX code which in turn is compiled into JS.

Best place to start I guess would be to look into the JSX compiler to see how complicated that would be.

Well if I can get the JSX compiler to give me a hook every time it finds an "html" block, and to let me replace it with my own content, then that would work fine I guess. Then it'd be a matter of getting JSX to recognise haml syntax as html.

Not what you're looking for exactly, but you could settle for using Jade? https://github.com/duncanbeevers/jade-react

Looks nice. Just a heads up though it uses React.DOM to create your tags which has been deprecated (and possibly won't be available anymore come 0.13).

React.DOM is still in 0.13.

Thanks, good to know. That gives us a nice path to upgrade our CoffeeScript components.

It's not quite the same as HAML, but you might try JSnoX: https://github.com/af/JSnoX

I am assuming you could use coffeescript as well?