Hack to get something approximating paint rectangles with React/om. Has very rough edges!

utils.clj

(defmacro html [body]
  `(if-not (:render-colors? initial-query-map)
     (html/html ~body)
     (let [body# ~body]
       (try
         (let [[tag# & rest#] body#
               attrs# (if (map? (first rest#))
                        (first rest#)
                        {})
               rest# (if (map? (first rest#))
                       (rest rest#)
                       rest#)]
           (html/html (vec (concat [tag# (assoc-in attrs# [:style :border] (str "5px solid rgb("
                                                                                (rand-int 255)
                                                                                ","
                                                                                (rand-int 255)
                                                                                ","
                                                                                (rand-int 255)
                                                                                ")"))]
                                   rest#))))
         (catch :default e#
           (html/html body#))))))

Has very rough edges!

Only works if the hiccup forms are the first thing that the html macro sees. For example, this doesn't work if you have something like (html (let [x 1] [:div x])). That's what the catch is for.

You probably shouldn't use this in production, because it will increase the size of your compiled javascript file. Ignoring my own advice, you can try it out on CircleCI by editing the search input here: https://circleci.com/docs/getting-started?render-colors=true

Example of it in action, showing how much extra rendering to the virtual dom we were doing: http://g.recordit.co/bTVTRWEwtZ.gif