firebase-dom.js

import {createElement} from 'react';
import ReactDOM from 'react-dom';
import firebase from 'firebase';
import objectAssign from 'object-assign';

const config = {
  apiKey: "<YOUR_FIREBASE_API_KEY>",
  authDomain: "<YOUR_PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<YOUR_PROJECT_ID>.firebaseio.com"
};

firebase.initializeApp(config);

firebase.database().ref().on('value', snap => {
  const val = snap.val();
  console.log(val)
  ReactDOM.render(createElement('div', {}, types[toType(val)](val)), document.getElementById('app'));
});

const types = {
  'object': val => createElement(val.type, objectAssign({},val.params), types[toType(val.content)](val.content)),
  'array': val => val.map((el,i)=>createElement(el.type, objectAssign({},el.params,{key:i}), types[toType(el.content)](el.content))),
  'number': val => val,
  'string': val => val,
  'boolean': invalidType,
  'function': invalidType,
  'null': val => null
}


const invalidType = val => {console.error('Invalid content type exists in data structure', val);}

// toType function by Angus Croll https://javascriptweblog.wordpress.com/2011/08/08/fixing-the-javascript-typeof-operator/
const toType = obj => ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();

snapshot.json

[ 
  {
    "type" : "h1",
    "content" : "Realtime DOM"
  }, 
  {
    "type" : "h2",
    "content" : "Feed your entire DOM from Firebase",
    "params" : {
      "color" : "grey"
    }
  }, 
  {
    "type": "section",
    "content": [ 
      {
        "type" : "p",
        "content" : "Imagine the benefits of a fully realtime web with React and Firebase!",
        "params": {
          "style": {
            "textAlign": "center"
          }
        }
      },
      {
        "type" : "ul",
        "content" : [
          {
            "type" : "li",
            "content" : "Instant updates and changes"
          },
          {
            "type" : "li",
            "content" : "Native Realtime features like chat and news feeds"
          },
          {
            "type" : "li",
            "content" : "Save the whole DOM structure on error for easier debuggin"
          }
        ]
      }
    ]
  }
]