index.js
const hyptiotes = require("hyptiotes");

const configuration = require("./configuration");
const App = require("./app");

hyptiotes.setElementInitializer(configuration.elementInitializer);
hyptiotes.setItemHandlers(configuration.itemHandlers);
hyptiotes.setAttributeHandlers(configuration.attributeHandlers);
hyptiotes.setElementFinalizer(configuration.elementFinalizer);

const domTree = hyptiotes.castWeb(App);

document.getElementById("root").appendChild(domTree);

The Simplest Hyptiotes Configuration
// Initialize element as dom element given the first item in array
hyptiotes.setElementInitializer(tag => document.createElement(tag.slice(1)));

hyptiotes.setItemHandlers([
  // If the current child item is a string: append a text node
  {
    test: item => typeof item === "string",
    handler: ({ item, parent }) => {
      const textNode = document.createTextNode(item);
      parent.appendChild(textNode);
    },
  },

  // If the current child item is a nested hyptiotes array: 
  // recursively cast it with Hyptiotes and append
  {
    test: item => Array.isArray(item) && typeof item[0] === "string" && item[0][0] === ":",
    handler: ({item, parent, hyptiotes}) => {
      const nested = hyptiotes.castWeb(item);
      if (nested) parent.appendChild(nested);
    }
  },
]);
hyptiotes.setAttributeHandlers([
  // For each attribute, simply call setAttribute api
  {
    test: () => true,
    handler: ({key, value, parent}) => {
      parent.setAttribute(key, value);
    }
  }
]);

// Element is already ready
hyptiotes.setElementFinalizer(el => el);

More Complete Static DOM Tree Configuration
{
  "elementInitializer": (tag) => document.createElement(tag.slice(1)),
  "itemHandlers": [
    {
      "test": (item) => item === null || item === undefined,
      "handler": () => {}
    },
    {
      "test": (item) => item instanceof HTMLElement,
      "handler": ({item, parent}) => parent.appendChild(item)
    },
    {
      "test": item => typeof item === "string",
      "handler": ({ item, parent }) => {
		const textNode = document.createTextNode(item);
		parent.appendChild(textNode);
	}
    },
    {
      "test": item => Array.isArray(item) && typeof item[0] === "string" && item[0][0] === ":",
      "handler": ({item, parent, hyptiotes}) => {
    const nested = hyptiotes.castWeb(item);
    if (nested) parent.appendChild(nested);
  }
    },
    {
      "test": item => Array.isArray(item) && (typeof item[0] !== "string" || item[0][0] !== ":"),
      "handler": ({item, parent, hyptiotes}) => {
    item.forEach(i => {
      const child = typeof i === "string" ? document.createTextNode(item) : hyptiotes.castWeb(i);
      parent.appendChild(child);
    });
  }
    },
    {
      "test": (item) => typeof item === "function",
      "handler": ({ item, parent, index, hyptiotes }) => {
		hyptiotes.mapItem(item({ parent, hyptiotes }), parent, index);
	}
    }
  ],
  "attributeHandlers": [
    {
      "test": key => key === "style",
      "handler": ({value, parent}) => {
    parent.setAttribute('style', stringifyStyleObject(value));
  }
    },
    {
      "test": (_, value) => typeof value === "function",
      "handler": ({key, value, parent}) => {
    parent[key] = value;
  }
    },
    {
      "test": () => true,
      "handler": ({key, value, parent}) => {
    parent.setAttribute(key, value);
  }
    }
  ],
  "elementFinalizer": (x) => x
}