DOM library that unifies markup and style into JavaScript syntax


dōmo unifies HTML markup and CSS style into one JavaScript syntax (optionally sugared with CoffeeScript). It's a pure JavaScript alternative to HAML and LESS, with a much smaller footprint (currently less than 1KB minizipped).

To see dōmo in action, check out these slides and make sure you view source when you're done.

<!DOCTYPE html>
<!-- dōmo doesn't require CoffeeScript, but looks a lot better
     with it. I'm including it here for illustrative purposes,
     but make sure you're compiling on the server. -->
<script src=""></script>
<!-- dōmo registers a global function for each HTML5 tag name,
     in upper-case, as well as a `CSS` function for styles. -->
<script src="/domo.js"></script>
<script type="text/coffeescript">
  # CSS mixins are just functions...
  roundedCorners = (radius = 5) ->
    borderRadius       : radius
    WebkitBorderRadius : radius
    MozBorderRadius    : radius
  # ...which we reuse by calling them anywhere.
  # This will create a STYLE element with two
  # styles both extended by the roundedCorners
  # mixin.
  styleSheet =
    STYLE type: 'text/css',
      CSS '.round-white',
        roundedCorners 5
        color: 'white'
      CSS '.rounder-black',
        roundedCorners 10
        color: 'black'
        # we can also nest our CSS rules. the
        # selector for the following will end
        # up as ".rounder-black a". camelCase is
        # automatically converted to hyphens.
        CSS "a",
          textDecoration: "none"
  # now we can stick this stylesheet in
  # the HEAD, which we create just like
  # HTML.
  head =
    # if the first argument is an object,
    # it is handled as an attribute map.
    HEAD {},
      # all subsequent arguments are children.
      META charset: "utf-8"
        name: "viewport"
        content: """
      TITLE "introducing dōmo"
      SCRIPT src: ""
      # any part of our DOM can be a variable.
  # create the document element...
  html =
    HTML lang: "en"
      BODY "Hellow, world"
  # ...and stick it in the document
  document.replaceChild htmldocument.documentElement