example/index.html

<html>
<head>
  <title>React HTMLTree</title>
  <style>

  html {
    box-sizing: border-box;
  }

  *, *:before, *:after {
    box-sizing: inherit;
    border: 0;
    margin: 0;
    padding: 0;
  }

  html, body {
    width:  100%;
    height: 100%;
    background-color: #292D31;
  }

  .wrapper {
    padding-top: 50px;
    max-width: 960px;
    margin: 0 auto;
  }

  .title {
    text-align: center;
    color: #EEE;
  }

  .selector {
    display: block;
    font-size: 14px;
    padding: 5px;
    margin-bottom: 20px;
    cursor: pointer;
  }

  .display {
    overflow: auto;
    padding: 20px;
    background-color: #FFF;
  }

  </style>
</head>
<body>

  <div class="wrapper">

    <h1 class="title">React HTMLTree</h1>

    <select class="selector" name="theme" id="themeselect">
      <option value="chrome-devtools">Chrome DevTools</option>
      <option value="firefox-devtools.light">Firefox DevTools - Light</option>
      <option value="firefox-devtools.dark">Firefox DevTools - Dark</option>
    </select>

    <div class="display" id="root">
      <!-- container for the HTMLTree -->
    </div>

    <!-- TODO: add custom style editor -->

  </div>

  <script src="../node_modules/react/dist/react.js"></script>
  <script src="../node_modules/react-dom/dist/react-dom.js"></script>
  <script src="../node_modules/react-dom/dist/react-dom-server.js"></script>
  <script src="../dist/react-htmltree.js"></script>

  <script>
    var isChrome = window.navigator.userAgent.toLowerCase().indexOf('chrome') > -1
    var themeselect = document.getElementById('themeselect')

    themeselect.addEventListener('change', renderTree)
    themeselect.value = isChrome ? 'chrome-devtools' : 'firefox-devtools.light'
    renderTree()

    function renderTree () {
      ReactDOM.render(
        React.createElement(ReactHTMLTree, {
          source: document.documentElement,
          theme: themeselect.value,
          onSelect: function (element, component) {
            console.log('ELEMENT:', element)
          },
          onExpand: function (element, component) {
            var node = component.props.node.toJS()
            console.log('EXPANDED:', !node.state.expanded)
          },
          // customRender: function (decorate, node) {
          //   return decorate(function (component) {
          //     if (node.depth > 3) {
          //       return React.DOM.div({
          //         children: component,
          //         style: {
          //           opacity: 0.9
          //         }
          //       })
          //     }
          //   })
          // }
        }),
        document.getElementById('root')
      )
    }

  </script>

</body>
</html>