example of compilation steps of hiccup (it's in janet but using .clj for highlighting)

hiccup-compilation-example.clj

# step 1: define hiccup
  (def hiccup [:block {} [:text {:size 20} "Hello sogaiu"]])
  #=> (:block {} (:text {:size 20} "Hello sogaiu"))
  
# step 2: compile hiccup into an element (a table)
  (def element (with-dyns [# tags map e.g. :text to relevant rendering function
                           :tags tags
                           # default font
                           :text/font "Poppins"]
                 (ch/compile hiccup)))
  #=>
  ``
  {:children @[
    @{:children ()
      :color 255
      :f <function text>
      :font "Poppins"
      :line-height 1
      :lines @["Hello sogaiu"]
      :props {:size 20}
      :render <function text-render>
      :size 20
      :sizing <function text-sizing>
      :spacing 2
      :tag :text
      :text "Hello sogaiu"}]
  :f <function block>
  :props {}
  :sizing :expand-w
  :tag :block}
``

# step 3: add sizes to the element and it's decendents
  (def element-with-size
    (with-dyns [:max-width 800
                :max-height 600]
      (s/apply-sizing element)))
  #=>
  ``
  @{:children @[
    @{:children ()
      :color 255
      :f <function text>
      :font "Poppins"
      :height 20                       # calculated height of :text
      :line-height 1
      :line-ys @[0 20]
      :lines @["Hello sogaiu"]
      :props {:size 20}
      :render <function text-render>
      :size 20
      :sizing <function text-sizing>
      :spacing 2
      :tag :text
      :text "Hello sogaiu"
      :width 103}]                     # calculated width of :text
  :content-width 800                   # inner width of :block
  :f <function block>
  :height 20                           # :block height wraps children
  :props {}
  :sizing :expand-w
  :tag :block
  :width 800}                          # :block gets max-width
``

# step 4: rendering / positioning
  # now it's ready for rendering!
  # positioning is done based off of
  # data in the element e.g. :content-width and
  # the :width of children are used for wrapping
  (render element-with-size)
  #