JSX for the real DOM

React is bundled with a Javascript transpiler called JSX. It gives the ability to write <html> tags within Javascript. The advertised way to use JSX is React.DOM to create React light DOM elements, but it is not the only way. We can create another JSX backend, called JSXDOM, to create real DOM elements.


Here is an example (JSFiddle) of how the code looks like with JSX and JSXDOM:

/** @jsx JSXDOM */
var defaultValue = "Fill me ...";
    <input type="text" value={defaultValue} />
    <button onclick="alert('clicked!');">Click Me!</button>
      {['un', 'deux', 'trois'].map(function(number) {
        return <li>{number}</li>;


There are many libs that attempt to do this in pure Javascript (dom-o, htmlr, ThinAir ...) but none of them look like XML. With JSX, you can copy and paste HTML in your Javascript code and it works (if you close your tags).

The great benefit outside of looking like XML is interpolation. Anything you put inside of {} is a regular Javascript expression. This way you don't need to learn yet another templating language.

var defaultValue = "Fill me ...";
<input type="text" value={defaultValue} />

It is useful for attributes but even more for children. You can create any array using Javascript functions such as map, filter, reduce, reverse ... and pass it down to JSXDOM.

  {['un', 'deux', 'trois'].map(function(number) {
    return <li>{number}</li>;


JSX is a very exciting technology that, while being developed for React, can be used standalone and provide benefits on its own.

If you liked this article, you might be interested in my Twitter feed as well.
  • Jeremy

    more more more more info!

  • Troy Gardner

    Doesn't this bypass one of the primary reason's to use React, meaning it's internal dom? to avoid unnecessary updates of the DOM?

  • johndurbinn

    Bro, jsx desugars to javascript expressions which eventually get built into the virtual DOM at runtime

  • Vu

    Is it possible to use custom tags in your JSXDOM? For example

  • Juan Carlos Rodriguez

    Hello excellent job !!!

    a question:

    because it does not work with 0.12 React?


Related Posts

  • October 12, 2011 Intercept and alter <script> include (2)
    For a project, I want to transparently be able to intercept all the included javascript files, edit the AST and eval it. This way I can manipulate all the code of an application just by inserting a custom script. Hook the <script> tag insertion. Download the Javascript file […]
  • September 17, 2011 WoW Interface Anchor Positioning (5)
    I've always found CSS positioning with both float and position: absolute/relative hard to work with. I want to introduce to you an alternative way borrowed from the World of Warcraft Interface: Anchors. Anchor The concept is extremely simple. You can tell where you want the element […]
  • August 23, 2011 Javascript – Hook Technique (5)
    Let's go back 5 years ago during the World of Warcraft beta. I was working on Cosmos UI, a projects that aimed to improve the World of Warcraft interface. As interface modification was not officially supported by Blizzard, we went ahead and directly modify the game files written in […]
  • February 23, 2012 Dassault Systemes Javascript Evangelism Talk (0)
    I recently had the chance to do a 2-hour Javascript evangelism talk at Dassault Systèmes. Unfortunately the presentation has not been recorded. I reused my the presentation I did at EPITA at the beginning and added a second part with a lot of demos. I've written down notes about the […]
  • August 19, 2011 Javascript – Stupid Idea: Hoisting at the end (0)
    JSLint imposes us to do manual hoisting of variables. What if we did it but at the end of the function? :P How you write function print_array (array) { var length = array.length; for (var i = 0; i < length; ++i) { var elem = array[i]; console.log(elem); […]