diff --git a/README.md b/README.md
index fb0aa45..3816fc0 100755
--- a/README.md
+++ b/README.md
@@ -50,10 +50,10 @@ update model = case _ of
 
 -- | `view` is called whenever the model is updated
 view :: Model -> Html Message
-view model = HE.main "main" [
-      HE.button [HA.onClick Decrement] "-",
+view model = HE.main [HA.id "main"] [
+      HE.button [HA.onClick Decrement] [HE.text "-"],
       HE.text $ show model,
-      HE.button [HA.onClick Increment] "+"
+      HE.button [HA.onClick Increment] [HE.text "+"]
 ]
 
 -- | Events that come from outside the `view`
diff --git a/benchmarks/js-framework-benchmark/keyed/index.js b/benchmarks/js-framework-benchmark/keyed/index.js
index ee92482..a23b919 100644
--- a/benchmarks/js-framework-benchmark/keyed/index.js
+++ b/benchmarks/js-framework-benchmark/keyed/index.js
@@ -1 +1 @@
-require('./dce-output/Main').main();
\ No newline at end of file
+require('./output-es/Main').main();
\ No newline at end of file
diff --git a/benchmarks/js-framework-benchmark/keyed/package.json b/benchmarks/js-framework-benchmark/keyed/package.json
index 2947607..2807cb7 100644
--- a/benchmarks/js-framework-benchmark/keyed/package.json
+++ b/benchmarks/js-framework-benchmark/keyed/package.json
@@ -1,17 +1,17 @@
 {
     "name": "js-framework-benchmark-keyed-flame",
     "sideEffects": false,
-    "version": "1.0.0",
+    "version": "1.6.0",
     "description": "Purescript Flame JS Benchmark",
     "main": "index.js",
     "js-framework-benchmark": {
-        "frameworkVersion": "1.0.0"
+        "frameworkVersion": "1.6.0"
     },
     "scripts": {
         "postinstall": "spago install",
         "clean": "rm -rf dist output .spago node_modules",
         "build": "spago build",
-        "build-prod": "spago build --purs-args '--codegen corefn,js' && zephyr -f Main.main && webpack --config=webpack.flame.config.js"
+        "build-prod": "spago build && webpack --config=webpack.flame.config.js"
     },
     "keywords": [
         "purescript",
@@ -25,9 +25,10 @@
         "url": "https://github.com/krausest/js-framework-benchmark.git"
     },
     "devDependencies": {
-        "purescript": "0.14.4",
-        "spago": "0.20.3",
-        "webpack": "^4.44.1",
+        "purescript": "0.15.15",
+        "purs-backend-es": "^1.4.3",
+        "spago": "0.21.0",
+        "webpack": "^4.47.0",
         "webpack-cli": "^3.3.12"
     }
 }
diff --git a/benchmarks/js-framework-benchmark/keyed/packages.dhall b/benchmarks/js-framework-benchmark/keyed/packages.dhall
index f4011f3..07adeea 100644
--- a/benchmarks/js-framework-benchmark/keyed/packages.dhall
+++ b/benchmarks/js-framework-benchmark/keyed/packages.dhall
@@ -1,6 +1,6 @@
 let upstream =
-      https://github.com/purescript/package-sets/releases/download/psc-0.15.0-20220527/packages.dhall
-        sha256:15dd8041480502850e4043ea2977ed22d6ab3fc24d565211acde6f8c5152a799
+      https://github.com/purescript/package-sets/releases/download/psc-0.15.15-20250904/packages.dhall
+        sha256:65df863430bac51dc71eb6c31d60f837bccf3837ddae929e1bc53830d299ab37
 
 let overrides = {=}
 
diff --git a/benchmarks/js-framework-benchmark/keyed/spago.dhall b/benchmarks/js-framework-benchmark/keyed/spago.dhall
index 5c5d285..4185bc5 100644
--- a/benchmarks/js-framework-benchmark/keyed/spago.dhall
+++ b/benchmarks/js-framework-benchmark/keyed/spago.dhall
@@ -1,11 +1,15 @@
 { name = "js-framework-benchmark-flame"
-, dependencies = [
-    "flame",
-    "aff",
-    "arrays",
-    "effect",
-    "maybe",
-    "prelude" ]
+, dependencies =
+  [ "aff"
+  , "arrays"
+  , "effect"
+  , "flame"
+  , "maybe"
+  , "prelude"
+  , "tuples"
+  , "web-dom"
+  ]
 , packages = ./packages.dhall
 , sources = [ "src/**/*.purs" ]
+, backend = "npx purs-backend-es build"
 }
diff --git a/benchmarks/js-framework-benchmark/keyed/src/Main.purs b/benchmarks/js-framework-benchmark/keyed/src/Main.purs
index 3d677a2..272d267 100644
--- a/benchmarks/js-framework-benchmark/keyed/src/Main.purs
+++ b/benchmarks/js-framework-benchmark/keyed/src/Main.purs
@@ -18,161 +18,164 @@ import Flame.Html.Element as HE
 import Flame.Types (NodeData)
 import Web.DOM.ParentNode (QuerySelector(..))
 
-data Message =
-    Create Int |
-    DisplayCreated (Array Row) |
-    AppendOneThousand |
-    DisplayAppended (Array Row) |
-    UpdateEveryTenth |
-    Clear |
-    Swap |
-    Remove Int |
-    Select Int
-
-type Model = {
-    rows :: Array Row,
-    lastID :: Int
-}
-
-type Row = {
-    id :: Int,
-    label :: String,
-    selected :: Boolean
-}
-
-type Button = {
-    id :: String,
-    label :: String,
-    message :: Message
-}
-
-foreign import createRandomNRows_ :: EffectFn2 Int Int (Array Row)
-
-createRandomNRows :: Int -> Int -> Aff (Array Row)
+data Message
+      = Create Int
+      | DisplayCreated (Array Row)
+      | AppendOneThousand
+      | DisplayAppended (Array Row)
+      | UpdateEveryTenth
+      | Clear
+      | Swap
+      | Remove Int
+      | Select Int
+
+type Model =
+      { rows ∷ Array Row
+      , lastID ∷ Int
+      }
+
+type Row =
+      { id ∷ Int
+      , label ∷ String
+      , selected ∷ Boolean
+      }
+
+type Button =
+      { id ∷ String
+      , label ∷ String
+      , message ∷ Message
+      }
+
+foreign import createRandomNRows_ ∷ EffectFn2 Int Int (Array Row)
+
+createRandomNRows ∷ Int → Int → Aff (Array Row)
 createRandomNRows n lastID = liftEffect (EU.runEffectFn2 createRandomNRows_ n lastID)
 
-main :: Effect Unit
-main = F.mount_ (QuerySelector "body") {
-    model: model,
-    subscribe: [],
-    view,
-    update
-}
-
-model :: Model
-model = {
-    rows: [],
-    lastID: 0
-}
-
-view :: Model -> Html Message
-view model = HE.div [HA.class' "container"] [
-    jumbotron,
-    HE.table [HA.class' "table table-hover table-striped test-data"] [
-        HE.tbody_ (map renderLazyRow model.rows)
-    ],
-    footer
-]
-
-jumbotron :: Html Message
-jumbotron = HE.div [ HA.class' "jumbotron" ] [
-    HE.div [ HA.class' "row" ] [
-        HE.div [ HA.class' "col-md-6" ] [
-            HE.h1_ [ HE.text "Flame 1.0.0 (keyed)" ]
-        ],
-        HE.div [ HA.class' "col-md-6" ] [
-            map renderActionButton buttons
-        ]
-    ]
-]
-
-renderActionButton :: Button -> Html Message
-renderActionButton button = HE.div [ HA.class' "col-sm-6 smallpad" ] [
-    HE.button [
-        HA.class' "btn btn-primary btn-block",
-        HA.id button.id,
-        HA.createAttribute "ref" "text",
-        HA.onClick button.message
-    ] [ HE.text button.label ]
-]
-
-buttons :: Array Button
-buttons = [
-    { id: "run", label: "Create 1,000 rows", message: Create 1000 },
-    { id: "runlots", label: "Create 10,000 rows", message: Create 10000 },
-    { id: "add", label: "Append 1,000 rows", message: AppendOneThousand },
-    { id: "update", label: "Update every 10th row", message: UpdateEveryTenth },
-    { id: "clear", label: "Clear", message: Clear },
-    { id: "swaprows", label: "Swap Rows", message: Swap }
-]
-
-renderLazyRow :: Row -> Html Message
+main ∷ Effect Unit
+main = F.mount_ (QuerySelector "body")
+      { model: model
+      , subscribe: []
+      , view
+      , update
+      }
+
+model ∷ Model
+model =
+      { rows: []
+      , lastID: 0
+      }
+
+view ∷ Model → Html Message
+view model = HE.div [ HA.class' "container" ]
+      [ jumbotron
+      , HE.table [ HA.class' "table table-hover table-striped test-data" ]
+              [ HE.tbody_ (map renderLazyRow model.rows)
+              ]
+      , footer
+      ]
+
+jumbotron ∷ Html Message
+jumbotron = HE.div [ HA.class' "jumbotron" ]
+      [ HE.div [ HA.class' "row" ]
+              [ HE.div [ HA.class' "col-md-6" ]
+                      [ HE.h1_ [ HE.text "Flame 1.0.0 (keyed)" ]
+                      ]
+              , HE.div [ HA.class' "col-md-6" ] (map renderActionButton buttons)
+
+              ]
+      ]
+
+renderActionButton ∷ Button → Html Message
+renderActionButton button = HE.div [ HA.class' "col-sm-6 smallpad" ]
+      [ HE.button
+              [ HA.class' "btn btn-primary btn-block"
+              , HA.id button.id
+              , HA.createAttribute "ref" "text"
+              , HA.onClick button.message
+              ]
+              [ HE.text button.label ]
+      ]
+
+buttons ∷ Array Button
+buttons =
+      [ { id: "run", label: "Create 1,000 rows", message: Create 1000 }
+      , { id: "runlots", label: "Create 10,000 rows", message: Create 10000 }
+      , { id: "add", label: "Append 1,000 rows", message: AppendOneThousand }
+      , { id: "update", label: "Update every 10th row", message: UpdateEveryTenth }
+      , { id: "clear", label: "Clear", message: Clear }
+      , { id: "swaprows", label: "Swap Rows", message: Swap }
+      ]
+
+renderLazyRow ∷ Row → Html Message
 renderLazyRow row = HE.lazy (Just (show row.id)) renderRow row
 
-renderRow :: Row -> Html Message
-renderRow row = HE.tr [ HA.class' { "danger": row.selected }, HA.key (show row.id)] [
-    HE.td colMd1 [ HE.text (show row.id) ],
-    HE.td colMd4 [ HE.a [ HA.onClick (Select row.id) ] [ HE.text row.label ] ],
-    HE.td colMd1 [ HE.a [ HA.onClick (Remove row.id) ] removeIcon ],
-    spacer
-]
+renderRow ∷ Row → Html Message
+renderRow row = HE.tr [ HA.class' { "danger": row.selected }, HA.key (show row.id) ]
+      [ HE.td colMd1 [ HE.text (show row.id) ]
+      , HE.td colMd4 [ HE.a [ HA.onClick (Select row.id) ] [ HE.text row.label ] ]
+      , HE.td colMd1 [ HE.a [ HA.onClick (Remove row.id) ] removeIcon ]
+      , spacer
+      ]
 
-removeIcon :: Array (Html Message)
-removeIcon = [
-    HE.span' [ HA.class' "glyphicon glyphicon-remove", HA.createAttribute "aria-hidden" "true"]
-]
+removeIcon ∷ Array (Html Message)
+removeIcon =
+      [ HE.span' [ HA.class' "glyphicon glyphicon-remove", HA.createAttribute "aria-hidden" "true" ]
+      ]
 
-colMd1 :: Array (NodeData Message)
+colMd1 ∷ Array (NodeData Message)
 colMd1 = [ HA.class' "col-md-1" ]
 
-colMd4 :: Array (NodeData Message)
+colMd4 ∷ Array (NodeData Message)
 colMd4 = [ HA.class' "col-md-4" ]
 
-spacer :: Html Message
+spacer ∷ Html Message
 spacer = HE.td' [ HA.class' "col-md-6" ]
 
-footer :: Html Message
+footer ∷ Html Message
 footer = HE.span' [ HA.class' "preloadicon glyphicon glyphicon-remove", HA.createAttribute "aria-hidden" "true" ]
 
-update :: Update Model Message
+update ∷ Update Model Message
 update model =
-    case _ of
-        Create amount -> model /\ [map (\rows -> Just (DisplayCreated rows)) (createRandomNRows amount model.lastID)]
-        DisplayCreated rows -> F.noMessages (model { lastID = model.lastID + DA.length rows, rows = rows })
+      case _ of
+            Create amount → model /\ [ map (\rows → Just (DisplayCreated rows)) (createRandomNRows amount model.lastID) ]
+            DisplayCreated rows → F.noMessages (model { lastID = model.lastID + DA.length rows, rows = rows })
 
-        AppendOneThousand ->
-            let amount = 1000
-            in model /\ [map (\rows -> Just (DisplayAppended rows)) (createRandomNRows amount model.lastID)]
-        DisplayAppended newRows -> F.noMessages (model { lastID = model.lastID + DA.length newRows, rows = model.rows <> newRows })
+            AppendOneThousand →
+                  let
+                        amount = 1000
+                  in
+                        model /\ [ map (\rows → Just (DisplayAppended rows)) (createRandomNRows amount model.lastID) ]
+            DisplayAppended newRows → F.noMessages (model { lastID = model.lastID + DA.length newRows, rows = model.rows <> newRows })
 
-        UpdateEveryTenth -> F.noMessages model { rows = DA.mapWithIndex updateLabel model.rows  }
+            UpdateEveryTenth → F.noMessages model { rows = DA.mapWithIndex updateLabel model.rows }
 
-        Clear -> F.noMessages (model { rows = [] })
+            Clear → F.noMessages (model { rows = [] })
 
-        Swap ->
-            F.noMessages
-                (case swapRows model.rows 1 998 of
-                    Nothing -> model
-                    Just swappedRows -> model { rows = swappedRows })
+            Swap →
+                  F.noMessages
+                        ( case swapRows model.rows 1 998 of
+                                Nothing → model
+                                Just swappedRows → model { rows = swappedRows }
+                        )
 
-        Remove id -> F.noMessages (model { rows = DA.filter (\r -> r.id /= id) model.rows })
+            Remove id → F.noMessages (model { rows = DA.filter (\r → r.id /= id) model.rows })
 
-        Select id -> F.noMessages (model { rows = map (select id) model.rows })
+            Select id → F.noMessages (model { rows = map (select id) model.rows })
 
 updateLabel index row =
-    if index `mod` 10 == 0 then
-        row { label = row.label <> " !!!" }
-     else
-        row
+      if index `mod` 10 == 0 then
+            row { label = row.label <> " !!!" }
+      else
+            row
 
 swapRows arr index otherIndex = do
-    rowA <- arr !! index
-    rowB <- arr !! otherIndex
-    arrA <- DA.updateAt index rowB arr
-    arrB <- DA.updateAt otherIndex rowA arrA
-    pure arrB
+      rowA ← arr !! index
+      rowB ← arr !! otherIndex
+      arrA ← DA.updateAt index rowB arr
+      arrB ← DA.updateAt otherIndex rowA arrA
+      pure arrB
 
 select id row
-    | row.id == id = row { selected = true }
-    | row.selected = row { selected = false }
-    | otherwise = row
+      | row.id == id = row { selected = true }
+      | row.selected = row { selected = false }
+      | otherwise = row
diff --git a/benchmarks/js-framework-benchmark/non-keyed/index.js b/benchmarks/js-framework-benchmark/non-keyed/index.js
index ee92482..a23b919 100644
--- a/benchmarks/js-framework-benchmark/non-keyed/index.js
+++ b/benchmarks/js-framework-benchmark/non-keyed/index.js
@@ -1 +1 @@
-require('./dce-output/Main').main();
\ No newline at end of file
+require('./output-es/Main').main();
\ No newline at end of file
diff --git a/benchmarks/js-framework-benchmark/non-keyed/package.json b/benchmarks/js-framework-benchmark/non-keyed/package.json
index 48a0ea6..e29c0d4 100644
--- a/benchmarks/js-framework-benchmark/non-keyed/package.json
+++ b/benchmarks/js-framework-benchmark/non-keyed/package.json
@@ -1,17 +1,17 @@
 {
     "name": "js-framework-benchmark-non-keyed-flame",
     "sideEffects": false,
-    "version": "1.0.0",
+    "version": "1.6.0",
     "description": "Purescript Flame JS Benchmark",
     "main": "index.js",
     "js-framework-benchmark": {
-        "frameworkVersion": "1.0.0"
+        "frameworkVersion": "1.6.0"
     },
     "scripts": {
         "postinstall": "spago install",
         "clean": "rm -rf dist output .spago node_modules",
         "build": "spago build",
-        "build-prod": "spago build --purs-args '--codegen corefn,js' && zephyr -f Main.main && webpack --config=webpack.flame.config.js"
+        "build-prod": "spago build && webpack --config=webpack.flame.config.js"
     },
     "keywords": [
         "purescript",
@@ -25,9 +25,10 @@
         "url": "https://github.com/krausest/js-framework-benchmark.git"
     },
     "devDependencies": {
-        "purescript": "0.14.4",
-        "spago": "0.20.3",
-        "webpack": "^4.44.1",
+        "purescript": "0.15.15",
+        "purs-backend-es": "^1.4.3",
+        "spago": "0.21",
+        "webpack": "^4.47.0",
         "webpack-cli": "^3.3.12"
     }
 }
diff --git a/benchmarks/js-framework-benchmark/non-keyed/packages.dhall b/benchmarks/js-framework-benchmark/non-keyed/packages.dhall
index f4011f3..07adeea 100644
--- a/benchmarks/js-framework-benchmark/non-keyed/packages.dhall
+++ b/benchmarks/js-framework-benchmark/non-keyed/packages.dhall
@@ -1,6 +1,6 @@
 let upstream =
-      https://github.com/purescript/package-sets/releases/download/psc-0.15.0-20220527/packages.dhall
-        sha256:15dd8041480502850e4043ea2977ed22d6ab3fc24d565211acde6f8c5152a799
+      https://github.com/purescript/package-sets/releases/download/psc-0.15.15-20250904/packages.dhall
+        sha256:65df863430bac51dc71eb6c31d60f837bccf3837ddae929e1bc53830d299ab37
 
 let overrides = {=}
 
diff --git a/benchmarks/js-framework-benchmark/non-keyed/spago.dhall b/benchmarks/js-framework-benchmark/non-keyed/spago.dhall
index a8f5193..4185bc5 100644
--- a/benchmarks/js-framework-benchmark/non-keyed/spago.dhall
+++ b/benchmarks/js-framework-benchmark/non-keyed/spago.dhall
@@ -1,11 +1,15 @@
 { name = "js-framework-benchmark-flame"
-, dependencies = [ "flame",
-    "aff",
-    "arrays",
-    "effect",
-    "maybe",
-    "web-dom",
-    "prelude" ]
+, dependencies =
+  [ "aff"
+  , "arrays"
+  , "effect"
+  , "flame"
+  , "maybe"
+  , "prelude"
+  , "tuples"
+  , "web-dom"
+  ]
 , packages = ./packages.dhall
 , sources = [ "src/**/*.purs" ]
+, backend = "npx purs-backend-es build"
 }
diff --git a/benchmarks/js-framework-benchmark/non-keyed/src/Main.purs b/benchmarks/js-framework-benchmark/non-keyed/src/Main.purs
index 7d39ec7..2a61ff3 100644
--- a/benchmarks/js-framework-benchmark/non-keyed/src/Main.purs
+++ b/benchmarks/js-framework-benchmark/non-keyed/src/Main.purs
@@ -3,174 +3,178 @@ module Main where
 import Data.Array ((!!))
 import Data.Array as DA
 import Data.Maybe (Maybe(..))
+import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Effect.Aff (Aff)
 import Effect.Class (liftEffect)
 import Effect.Uncurried (EffectFn2)
 import Effect.Uncurried as EU
+import Flame (Update)
 import Flame as F
-import Flame.Application.EffectList as F
 import Flame.Html.Attribute as HA
 import Flame.Html.Element as HE
-import Flame.Types ((/\), Html, NodeData)
+import Flame.Types (Html, NodeData)
 import Prelude (Unit, bind, map, mod, pure, show, (+), (/=), (<>), (==), otherwise)
 import Web.DOM.ParentNode (QuerySelector(..))
 
-data Message =
-    Create Int |
-    DisplayCreated (Array Row) |
-    AppendOneThousand |
-    DisplayAppended (Array Row) |
-    UpdateEveryTenth |
-    Clear |
-    Swap |
-    Remove Int |
-    Select Int
-
-type Model = {
-    rows :: Array Row,
-    lastID :: Int
-}
-
-type Row = {
-    id :: Int,
-    label :: String,
-    selected :: Boolean
-}
-
-type Button = {
-    id :: String,
-    label :: String,
-    message :: Message
-}
-
-foreign import createRandomNRows_ :: EffectFn2 Int Int (Array Row)
-
-createRandomNRows :: Int -> Int -> Aff (Array Row)
+data Message
+      = Create Int
+      | DisplayCreated (Array Row)
+      | AppendOneThousand
+      | DisplayAppended (Array Row)
+      | UpdateEveryTenth
+      | Clear
+      | Swap
+      | Remove Int
+      | Select Int
+
+type Model =
+      { rows ∷ Array Row
+      , lastID ∷ Int
+      }
+
+type Row =
+      { id ∷ Int
+      , label ∷ String
+      , selected ∷ Boolean
+      }
+
+type Button =
+      { id ∷ String
+      , label ∷ String
+      , message ∷ Message
+      }
+
+foreign import createRandomNRows_ ∷ EffectFn2 Int Int (Array Row)
+
+createRandomNRows ∷ Int → Int → Aff (Array Row)
 createRandomNRows n lastID = liftEffect (EU.runEffectFn2 createRandomNRows_ n lastID)
 
-main :: Effect Unit
-main = F.mount_ (QuerySelector "main") {
-    model: model,
-    view,
-    subscribe: [],
-    update
-}
-
-model :: Model
-model = {
-    rows: [],
-    lastID: 0
-}
-
-view :: Model -> Html Message
-view model = HE.div [HA.class' "container"] [
-    jumbotron,
-    HE.table [HA.class' "table table-hover table-striped test-data"] [
-        HE.tbody_ (map renderLazyRow model.rows)
-    ],
-    footer
-]
-
-jumbotron :: Html Message
-jumbotron = HE.div [ HA.class' "jumbotron" ] [
-    HE.div [ HA.class' "row" ] [
-        HE.div [ HA.class' "col-md-6" ] [
-            HE.h1_ [ HE.text "Flame 1.0.0 (non-keyed)" ]
-        ],
-        HE.div [ HA.class' "col-md-6" ] [
-            map renderActionButton buttons
-        ]
-    ]
-]
-
-buttons :: Array Button
-buttons = [
-    { id: "run", label: "Create 1,000 rows", message: Create 1000 },
-    { id: "runlots", label: "Create 10,000 rows", message: Create 10000 },
-    { id: "add", label: "Append 1,000 rows", message: AppendOneThousand },
-    { id: "update", label: "Update every 10th row", message: UpdateEveryTenth },
-    { id: "clear", label: "Clear", message: Clear },
-    { id: "swaprows", label: "Swap Rows", message: Swap }
-]
-
-renderActionButton :: Button -> Html Message
-renderActionButton button = HE.div [ HA.class' "col-sm-6 smallpad" ] [
-    HE.button [
-        HA.class' "btn btn-primary btn-block",
-        HA.id button.id,
-        HA.createAttribute "ref" "text",
-        HA.onClick button.message
-    ] [ HE.text button.label ]
-]
-
-renderLazyRow :: Row -> Html Message
+main ∷ Effect Unit
+main = F.mount_ (QuerySelector "main")
+      { model: model
+      , view
+      , subscribe: []
+      , update
+      }
+
+model ∷ Model
+model =
+      { rows: []
+      , lastID: 0
+      }
+
+view ∷ Model → Html Message
+view model = HE.div [ HA.class' "container" ]
+      [ jumbotron
+      , HE.table [ HA.class' "table table-hover table-striped test-data" ]
+              [ HE.tbody_ (map renderLazyRow model.rows)
+              ]
+      , footer
+      ]
+
+jumbotron ∷ Html Message
+jumbotron = HE.div [ HA.class' "jumbotron" ]
+      [ HE.div [ HA.class' "row" ]
+              [ HE.div [ HA.class' "col-md-6" ]
+                      [ HE.h1_ [ HE.text "Flame 1.0.0 (non-keyed)" ]
+                      ]
+              , HE.div [ HA.class' "col-md-6" ] (map renderActionButton buttons)
+
+              ]
+      ]
+
+buttons ∷ Array Button
+buttons =
+      [ { id: "run", label: "Create 1,000 rows", message: Create 1000 }
+      , { id: "runlots", label: "Create 10,000 rows", message: Create 10000 }
+      , { id: "add", label: "Append 1,000 rows", message: AppendOneThousand }
+      , { id: "update", label: "Update every 10th row", message: UpdateEveryTenth }
+      , { id: "clear", label: "Clear", message: Clear }
+      , { id: "swaprows", label: "Swap Rows", message: Swap }
+      ]
+
+renderActionButton ∷ Button → Html Message
+renderActionButton button = HE.div [ HA.class' "col-sm-6 smallpad" ]
+      [ HE.button
+              [ HA.class' "btn btn-primary btn-block"
+              , HA.id button.id
+              , HA.createAttribute "ref" "text"
+              , HA.onClick button.message
+              ]
+              [ HE.text button.label ]
+      ]
+
+renderLazyRow ∷ Row → Html Message
 renderLazyRow row = HE.lazy Nothing renderRow row
 
-renderRow :: Row -> Html Message
-renderRow row = HE.tr [ HA.class' { "danger": row.selected }] [
-    HE.td colMd1 [ HE.text (show row.id) ],
-    HE.td colMd4 [ HE.a [ HA.onClick (Select row.id) ] [ HE.text row.label ] ],
-    HE.td colMd1 [ HE.a [ HA.onClick (Remove row.id) ] removeIcon ],
-    spacer
-]
+renderRow ∷ Row → Html Message
+renderRow row = HE.tr [ HA.class' { "danger": row.selected } ]
+      [ HE.td colMd1 [ HE.text (show row.id) ]
+      , HE.td colMd4 [ HE.a [ HA.onClick (Select row.id) ] [ HE.text row.label ] ]
+      , HE.td colMd1 [ HE.a [ HA.onClick (Remove row.id) ] removeIcon ]
+      , spacer
+      ]
 
-removeIcon :: Array (Html Message)
-removeIcon = [
-    HE.span' [ HA.class' "glyphicon glyphicon-remove", HA.createAttribute "aria-hidden" "true"]
-]
+removeIcon ∷ Array (Html Message)
+removeIcon =
+      [ HE.span' [ HA.class' "glyphicon glyphicon-remove", HA.createAttribute "aria-hidden" "true" ]
+      ]
 
-colMd1 :: Array (NodeData Message)
+colMd1 ∷ Array (NodeData Message)
 colMd1 = [ HA.class' "col-md-1" ]
 
-colMd4 :: Array (NodeData Message)
+colMd4 ∷ Array (NodeData Message)
 colMd4 = [ HA.class' "col-md-4" ]
 
-spacer :: Html Message
+spacer ∷ Html Message
 spacer = HE.td' [ HA.class' "col-md-6" ]
 
-footer :: Html Message
+footer ∷ Html Message
 footer = HE.span' [ HA.class' "preloadicon glyphicon glyphicon-remove", HA.createAttribute "aria-hidden" "true" ]
 
-update :: Update Model Message
+update ∷ Update Model Message
 update model =
-    case _ of
-        Create amount -> model /\ [map (\rows -> Just (DisplayCreated rows)) (createRandomNRows amount model.lastID)]
-        DisplayCreated rows -> F.noMessages (model { lastID = model.lastID + DA.length rows, rows = rows })
+      case _ of
+            Create amount → model /\ [ map (\rows → Just (DisplayCreated rows)) (createRandomNRows amount model.lastID) ]
+            DisplayCreated rows → F.noMessages (model { lastID = model.lastID + DA.length rows, rows = rows })
 
-        AppendOneThousand ->
-            let amount = 1000
-            in model /\ [map (\rows -> Just (DisplayAppended rows)) (createRandomNRows amount model.lastID)]
-        DisplayAppended newRows -> F.noMessages (model { lastID = model.lastID + DA.length newRows, rows = model.rows <> newRows})
+            AppendOneThousand →
+                  let
+                        amount = 1000
+                  in
+                        model /\ [ map (\rows → Just (DisplayAppended rows)) (createRandomNRows amount model.lastID) ]
+            DisplayAppended newRows → F.noMessages (model { lastID = model.lastID + DA.length newRows, rows = model.rows <> newRows })
 
-        UpdateEveryTenth -> F.noMessages model { rows = DA.mapWithIndex updateLabel model.rows  }
+            UpdateEveryTenth → F.noMessages model { rows = DA.mapWithIndex updateLabel model.rows }
 
-        Clear -> F.noMessages (model { rows = [] })
+            Clear → F.noMessages (model { rows = [] })
 
-        Swap ->
-            F.noMessages
-                (case swapRows model.rows 1 998 of
-                    Nothing -> model
-                    Just swappedRows -> model { rows = swappedRows })
+            Swap →
+                  F.noMessages
+                        ( case swapRows model.rows 1 998 of
+                                Nothing → model
+                                Just swappedRows → model { rows = swappedRows }
+                        )
 
-        Remove id -> F.noMessages (model { rows = DA.filter (\r -> r.id /= id) model.rows })
+            Remove id → F.noMessages (model { rows = DA.filter (\r → r.id /= id) model.rows })
 
-        Select id -> F.noMessages (model { rows = map (select id) model.rows })
+            Select id → F.noMessages (model { rows = map (select id) model.rows })
 
 updateLabel index row =
-    if index `mod` 10 == 0 then
-        row { label = row.label <> " !!!" }
-     else
-        row
+      if index `mod` 10 == 0 then
+            row { label = row.label <> " !!!" }
+      else
+            row
 
 swapRows arr index otherIndex = do
-    rowA <- arr !! index
-    rowB <- arr !! otherIndex
-    arrA <- DA.updateAt index rowB arr
-    arrB <- DA.updateAt otherIndex rowA arrA
-    pure arrB
+      rowA ← arr !! index
+      rowB ← arr !! otherIndex
+      arrA ← DA.updateAt index rowB arr
+      arrB ← DA.updateAt otherIndex rowA arrA
+      pure arrB
 
 select id row
-    | row.id == id = row { selected = true }
-    | row.selected = row { selected = false }
-    | otherwise = row
+      | row.id == id = row { selected = true }
+      | row.selected = row { selected = false }
+      | otherwise = row
diff --git a/docs/assets/img/benchmark-keyed-1.png b/docs/assets/img/benchmark-keyed-1.png
index 74832e6..4fb3c3a 100644
Binary files a/docs/assets/img/benchmark-keyed-1.png and b/docs/assets/img/benchmark-keyed-1.png differ
diff --git a/docs/assets/img/benchmark-keyed-2.png b/docs/assets/img/benchmark-keyed-2.png
index b46e56a..dbadcb7 100644
Binary files a/docs/assets/img/benchmark-keyed-2.png and b/docs/assets/img/benchmark-keyed-2.png differ
diff --git a/docs/assets/img/benchmark-non-keyed-1.png b/docs/assets/img/benchmark-non-keyed-1.png
index 4632b36..4afa9b0 100644
Binary files a/docs/assets/img/benchmark-non-keyed-1.png and b/docs/assets/img/benchmark-non-keyed-1.png differ
diff --git a/docs/assets/img/benchmark-non-keyed-2.png b/docs/assets/img/benchmark-non-keyed-2.png
index 0b68254..e8e833d 100644
Binary files a/docs/assets/img/benchmark-non-keyed-2.png and b/docs/assets/img/benchmark-non-keyed-2.png differ
diff --git a/docs/benchmarks.md b/docs/benchmarks.md
index 8ad346b..1822716 100644
--- a/docs/benchmarks.md
+++ b/docs/benchmarks.md
@@ -6,7 +6,7 @@ permalink: /benchmarks
 
 ## Benchmarks
 
-Flame performs comparatively to similar JavaScript or PureScript libraries in usual metrics like bundle size, initialization speed, memory usage, etc. For what it is worth, here is how it stacks against a few popular frameworks (on an old Linux Core i5 with 16GB of ram):
+Flame performs comparatively to JavaScript libraries / frameworks in usual metrics like bundle size, initialization speed, memory usage, etc. For what it is worth, here is how it stacks against a few popular frameworks (Linux Core i9 with 64GB of ram):
 
 ![benchmark-keyed-1](assets/img/benchmark-keyed-1.png)
 ![benchmark-keyed-2](assets/img/benchmark-keyed-2.png)
diff --git a/docs/concepts.md b/docs/concepts.md
index e2d1473..3bd473b 100644
--- a/docs/concepts.md
+++ b/docs/concepts.md
@@ -45,10 +45,10 @@ In the counter example, the view is defined as
 
 ```haskell
 view :: Model -> Html Message
-view model = HE.main "main" [
-      HE.button [HA.onClick Decrement] "-",
+view model = HE.main [HA.id "main"] [
+      HE.button [HA.onClick Decrement] [HE.text "-"],
       HE.text $ show model,
-      HE.button [HA.onClick Increment] "+"
+      HE.button [HA.onClick Increment] [HE.text "+"]
 ]
 ```
 
diff --git a/docs/events.md b/docs/events.md
index 874cc8d..0bf6337 100644
--- a/docs/events.md
+++ b/docs/events.md
@@ -46,9 +46,9 @@ update model = case _ of
                   pure <<< Just $ Update n
 
 view :: Model -> Html Message
-view model = HE.main "main" [
+view model = HE.main [HA.id "main"] [
       HE.text $ show model,
-      HE.button [HA.onClick Roll] "Roll"
+      HE.button [HA.onClick Roll] [HE.text "Roll"]
 ]
 ```
 
@@ -91,10 +91,10 @@ update model = case _ of
             ]
 
 view :: Model -> Html Message
-view model = HE.main "main" [
-      HE.button [HA.disabled model.isLoading, HA.onClick Perform] "Perform requests",
+view model = HE.main [HA.id "main"] [
+      HE.button [HA.disabled model.isLoading, HA.onClick Perform] [HE.text "Perform requests"],
       if model.isLoading then
-            HE.div [HA.class' "overlay"] "Loading..."
+            HE.div [HA.class' "overlay"] [HE.text "Loading..."]
        else
             ...
 ]
diff --git a/docs/index.md b/docs/index.md
index 14d4a72..72cfe4f 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -57,10 +57,10 @@ update model = case _ of
 
 -- | `view` is called whenever the model is updated
 view :: Model -> Html Message
-view model = HE.main "main" [
-      HE.button [HA.onClick Decrement] "-",
+view model = HE.main [HA.id "main"] [
+      HE.button [HA.onClick Decrement] [HE.text "-"],
       HE.text $ show model,
-      HE.button [HA.onClick Increment] "+"
+      HE.button [HA.onClick Increment] [HE.text "+"]
 ]
 
 -- | Events that come from outside the `view`
diff --git a/docs/views.md b/docs/views.md
index 2976753..e0fd24b 100644
--- a/docs/views.md
+++ b/docs/views.md
@@ -92,16 +92,6 @@ HE.div [HA.id "my-div", HA.disabled False, HA.title "div title"] [
 -}
 ```
 
-But for some common cases, the markup DSL also defines convenience type classes so we can write
-
-* `HE.element "my-element" _` instead of `HE.element [HA.id "my-element"] _` to declare an element with only id as attribute
-
-* `HE.element _ "text content"` instead of `HE.element _ [HE.text "text content"]` to declare elements with only text as children
-
-* `HE.element (HA.attribute _) _` instead of `HE.element [HA.attribute _] _` to declare elements with a single attribute
-
-* `HE.element _ $ HE.element _ _` instead of `HE.element _ [HE.Element _ _]` to declare elements with a single child element
-
 Flame also offers a few special elements for cases where finer control is necessary
 
 * Managed elements
@@ -114,7 +104,7 @@ type NodeRenderer arg = {
       updateNode :: Node -> arg -> arg -> Effect Node
 }
 
-managed :: forall arg nd message. ToNode nd message NodeData => NodeRenderer arg -> nd -> arg -> Html message
+managed :: forall arg message. NodeRenderer arg -> Array (NodeData message) -> arg -> Html message
 ```
 
 On rendering, Flame calls `createNode` only once and from then on `updateNode`. These functions can check on their local state `arg` to decide whether/how to change a DOM node. For easy of use, the elements attributes and events are still automatically patched -- otherwise, `HE.managed_` should be used
@@ -138,7 +128,7 @@ This is useful to avoid recomputing potentially expensive views such as large li
 Fragments are wrappers
 
 ```haskell
-fragment :: forall children message. ToNode children message Html => children -> Html message
+fragment :: forall message. Array (Html message) -> Html message
 ```
 
 meaning that only their children elements will be rendered to the DOM. Fragments are useful in cases where having an extra parent element is unnecessary, or wherever [`DocumentFragment`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) could be used.
@@ -219,7 +209,9 @@ type Model = {
 data Message = Do
 
 view :: Model -> Html Message
-view model = HE.div [HA.class' { usefulClass: model.enabled }] $ HE.input [HA.type' "button", HA.value "Do thing number " <> show $ model.done, HA.onClick Do]
+view model = HE.div [HA.class' { usefulClass: model.enabled }] [
+      HE.input [HA.type' "button", HA.value "Do thing number " <> show $ model.done, HA.onClick Do]
+]
 ```
 
 or to selective alter the markup
@@ -237,7 +229,7 @@ view = case _ of
             HE.input [HA.type' "text", HA.onInput Update],
             HE.input [HA.type' "button", HA.value "Greet!", HA.onClick Greet]
       ]
-      Just name -> "Greetings, " <> name <> "!"
+      Just name -> HE.text $ "Greetings, " <> name <> "!"
 ```
 
 as well create "partial views" without the need for any special syntax
@@ -261,13 +253,13 @@ view model = HE.content' [
 
 ```haskell
 view :: Model -> Html Message
-view model = HE.main "main" [
-      HE.button [HA.onClick Add] "Add",
+view model = HE.main [HA.id "main"] [
+      HE.button [HA.onClick Add] [HE.text "Add"],
       HE.div_ $ DA.mapWithIndex viewCounter model
 ]
       where viewCounter index model' = HE.div [HA.style { display: "flex" }] [
                   CounterMessage index <$> ECM.view model',
-                  HE.button [HA.onClick $ Remove index] "Remove"
+                  HE.button [HA.onClick $ Remove index] [HE.text "Remove"]
             ]
 ```
 
diff --git a/examples/Affjax/Affjax.purs b/examples/Affjax/Affjax.purs
index d8fe83f..08c1da2 100755
--- a/examples/Affjax/Affjax.purs
+++ b/examples/Affjax/Affjax.purs
@@ -45,23 +45,23 @@ update model =
             Fetched result → F.noMessages $ model { result = result }
 
 view ∷ Model → Html Message
-view { url, result } = HE.main "main"
+view { url, result } = HE.main [ HA.id "main" ]
       [ HE.input [ HA.onInput UpdateUrl, HA.value url, HA.type' "text" ]
-      , HE.button [ HA.onClick Fetch, HA.disabled $ result == Fetching ] "Fetch"
+      , HE.button [ HA.onClick Fetch, HA.disabled $ result == Fetching ] [ HE.text "Fetch" ]
       , case result of
               NotFetched →
-                    HE.div_ "Not Fetched..."
+                    HE.div_ [ HE.text "Not Fetched..." ]
               Fetching →
-                    HE.div_ "Fetching..."
+                    HE.div_ [ HE.text "Fetching..." ]
               Ok ok →
-                    HE.pre_ <<< HE.code_ $ "Ok: " <> ok
+                    HE.pre_ [ HE.code_ [ HE.text $ "Ok: " <> ok ] ]
               Error error →
-                    HE.div_ $ "Error: " <> error
+                    HE.div_ [ HE.text $ "Error: " <> error ]
       ]
 
 main ∷ Effect Unit
 main = F.mount_ (QuerySelector "body")
-      { model:  init
+      { model: init
       , subscribe: []
       , update
       , view
diff --git a/examples/Counter/Counter.purs b/examples/Counter/Counter.purs
index a330a45..9209cf6 100755
--- a/examples/Counter/Counter.purs
+++ b/examples/Counter/Counter.purs
@@ -21,17 +21,17 @@ init ∷ Model
 init = 0
 
 -- | `update` is called to handle events
-update ∷ Update Model  Message
+update ∷ Update Model Message
 update model = F.noMessages <<< case _ of
       Increment → model + 1
       Decrement → model - 1
 
 -- | `view` updates the app markup whenever the model is updated
 view ∷ Model → Html Message
-view model = HE.main "main"
-      [ HE.button [ HA.onClick Decrement ] "-"
+view model = HE.main [ HA.id "main" ]
+      [ HE.button [ HA.onClick Decrement ] [ HE.text "-" ]
       , HE.text $ show model
-      , HE.button [ HA.onClick Increment ] "+"
+      , HE.button [ HA.onClick Increment ] [ HE.text "+" ]
       ]
 
 -- | Mount the application on the given selector
diff --git a/examples/Counters/Counters.purs b/examples/Counters/Counters.purs
index 8bc3858..9d22dd0 100755
--- a/examples/Counters/Counters.purs
+++ b/examples/Counters/Counters.purs
@@ -32,14 +32,14 @@ update model = F.noMessages <<< case _ of
                   Just model' → DM.fromMaybe model $ DA.updateAt index (DT.fst $ ECM.update model' message) model
 
 view ∷ Model → Html Message
-view model = HE.main "main"
-      [ HE.button [ HA.onClick Add ] "Add"
+view model = HE.main [ HA.id "main" ]
+      [ HE.button [ HA.onClick Add ] [ HE.text "Add" ]
       , HE.div_ $ DA.mapWithIndex viewCounter model
       ]
       where
       viewCounter index model' = HE.div [ HA.style { display: "flex" } ]
             [ CounterMessage index <$> ECM.view model'
-            , HE.button [ HA.onClick $ Remove index ] "Remove"
+            , HE.button [ HA.onClick $ Remove index ] [ HE.text "Remove" ]
             ]
 
 main ∷ Effect Unit
diff --git a/examples/Dice/Dice.purs b/examples/Dice/Dice.purs
index defae9d..b00b7f4 100755
--- a/examples/Dice/Dice.purs
+++ b/examples/Dice/Dice.purs
@@ -30,9 +30,9 @@ update model = case _ of
       Update int → Just int /\ []
 
 view ∷ Model → Html Message
-view model = HE.main "main"
+view model = HE.main [ HA.id "main" ]
       [ HE.text (show model)
-      , HE.button [ HA.onClick Roll ] "Roll"
+      , HE.button [ HA.onClick Roll ] [ HE.text "Roll" ]
       ]
 
 main ∷ Effect Unit
diff --git a/examples/ServerSideRendering/Server/ServerSideRendering.purs b/examples/ServerSideRendering/Server/ServerSideRendering.purs
index f53ccc0..97ceea7 100755
--- a/examples/ServerSideRendering/Server/ServerSideRendering.purs
+++ b/examples/ServerSideRendering/Server/ServerSideRendering.purs
@@ -43,10 +43,10 @@ serveHTML = do
 markup ∷ Model → Html Message
 markup model = HE.html_
       [ HE.head_
-              [ HE.title "Server Side Rendering Dice Example"
-              , HE.meta $ HA.charset "utf-8"
+              [ HE.title [ HE.text "Server Side Rendering Dice Example" ]
+              , HE.meta [ HA.charset "utf-8" ]
               ]
-      , HE.body_ $ EESS.view model
+      , HE.body_ [ EESS.view model ]
       , HE.script' [ HA.type' "text/javascript", HA.src scriptName ]
       ]
 
diff --git a/examples/ServerSideRendering/Shared/ServerSideRendering.purs b/examples/ServerSideRendering/Shared/ServerSideRendering.purs
index 3b1b369..2c91d59 100644
--- a/examples/ServerSideRendering/Shared/ServerSideRendering.purs
+++ b/examples/ServerSideRendering/Shared/ServerSideRendering.purs
@@ -18,7 +18,7 @@ derive instance modelGeneric ∷ Generic Model _
 data Message = Roll | Update Int
 
 view ∷ Model → Html Message
-view (Model model) = HE.main "main"
+view (Model model) = HE.main [ HA.id "main" ]
       [ HE.text (show model)
-      , HE.button [ HA.onClick Roll ] "Roll"
+      , HE.button [ HA.onClick Roll ] [ HE.text "Roll" ]
       ]
\ No newline at end of file
diff --git a/examples/SpecialElements/Special.purs b/examples/SpecialElements/Special.purs
index 8dfa87b..317d42a 100755
--- a/examples/SpecialElements/Special.purs
+++ b/examples/SpecialElements/Special.purs
@@ -41,20 +41,20 @@ update model@{ history } = case _ of
                   } /\ []
 
 view ∷ Model → Html Message
-view model@{ current, history } = HE.fragment
+view model = HE.fragment
       [ -- only children elements will be rendered
-        HE.text $ show current
-      , HE.button [ HA.onClick Roll ] "Roll"
+        HE.text $ show model.current
+      , HE.button [ HA.onClick Roll ] [ HE.text "Roll" ]
       , HE.br
-      , HE.span_ "History"
-      , HE.div_ $ map lazyEntry history
+      , HE.span_ [ HE.text "History" ]
+      , HE.div_ $ map lazyEntry model.history
       ]
 
 lazyEntry ∷ Int → Html Message
 lazyEntry roll = HE.lazy Nothing toEntry roll -- lazy node will only be recomputed in case the roll changes
       where
       rolled = show roll
-      toEntry = const (HE.div (HA.key rolled) rolled) -- keyed rendering for rolls
+      toEntry = const (HE.div [ HA.key rolled ] [ HE.text rolled ]) -- keyed rendering for rolls
 
 main ∷ Effect Unit
 main = F.mount_ (QuerySelector "body")
diff --git a/examples/Todo/Todo.purs b/examples/Todo/Todo.purs
index 73d14c6..d39adc5 100644
--- a/examples/Todo/Todo.purs
+++ b/examples/Todo/Todo.purs
@@ -74,8 +74,8 @@ update model message =
             pure Nothing
 
 view ∷ Model → Html Message
-view model = HE.main "main"
-      [ HE.h1_ "todos"
+view model = HE.main [ HA.id "main" ]
+      [ HE.h1_ [ HE.text "todos" ]
       , HE.input [ HA.type' "text", HA.placeholder "What needs to be done?", HA.value model.input, HA.onKeyup Add ]
       , HE.div_ $ DA.mapWithIndex todoItem model.todos
       , HE.text "Double click to edit a todo"
@@ -85,8 +85,8 @@ view model = HE.main "main"
             [ if index == model.editing then
                     HE.input [ HA.onKeyup Update, HA.value todo ]
               else
-                    HE.span [ HA.onDblclick (Edit index) ] todo
-            , HE.button [ HA.onClick $ Remove index ] "remove"
+                    HE.span [ HA.onDblclick (Edit index) ] [ HE.text todo ]
+            , HE.button [ HA.onClick $ Remove index ] [ HE.text "remove" ]
             ]
 
 main ∷ Effect Unit
diff --git a/src/Flame/Application/Application.purs b/src/Flame/Application/Application.purs
index 570a5af..3d83a2d 100755
--- a/src/Flame/Application/Application.purs
+++ b/src/Flame/Application/Application.purs
@@ -86,10 +86,10 @@ resumeMountWith (QuerySelector selector) appId resumed = do
             Just parent → do
                   run parent true (map showId appId)
                         { model
-                        , view : resumed.view
-                        , update : resumed.update
-                        , subscribe :  resumed.subscribe
-                  }
+                        , view: resumed.view
+                        , update: resumed.update
+                        , subscribe: resumed.subscribe
+                        }
                   pure model
             Nothing → EE.throw $ "Error resuming application mount: no element matching selector " <> selector <> " found!"
 
diff --git a/src/Flame/Application/Internal/PreMount.purs b/src/Flame/Application/Internal/PreMount.purs
index 816b175..f1fb291 100644
--- a/src/Flame/Application/Internal/PreMount.purs
+++ b/src/Flame/Application/Internal/PreMount.purs
@@ -60,4 +60,5 @@ preMount (QuerySelector selector) application = do
                   [ HA.style { display: "none" }
                   , HA.id $ idSerializedState sanitizedSelector
                   , HA.createAttribute (attributeSerializedState sanitizedSelector) sanitizedSelector
-                  ] $ FS.serialize application.model
\ No newline at end of file
+                  ]
+                  [ HE.text $ FS.serialize application.model ]
\ No newline at end of file
diff --git a/src/Flame/Html/Attribute/Event.purs b/src/Flame/Html/Attribute/Event.purs
index 6285966..4bc2d1c 100755
--- a/src/Flame/Html/Attribute/Event.purs
+++ b/src/Flame/Html/Attribute/Event.purs
@@ -1,5 +1,5 @@
 -- | Definition of HTML events that can be fired from views
-module Flame.Html.Event (EventName, ToEvent, ToRawEvent, ToMaybeEvent, ToSpecialEvent, createEvent, createEventMessage, createRawEvent, onBlur, onBlur', onCheck, onClick, onClick', onChange, onChange', onContextmenu, onContextmenu', onDblclick, onDblclick', onDrag, onDrag', onDragend, onDragend', onDragenter, onDragenter', onDragleave, onDragleave', onDragover, onDragover', onDragstart, onDragstart', onDrop, onDrop', onError, onError', onFocus, onFocus', onFocusin, onFocusin', onFocusout, onFocusout', onInput, onInput', onKeydown, onKeydown', onKeypress, onKeypress', onKeyup, onKeyup', onMousedown, onMousedown', onMouseenter, onMouseenter', onMouseleave, onMouseleave', onMousemove, onMousemove', onMouseout, onMouseout', onLoad, onLoad',  onUnload, onUnload', onMouseover, onMouseover', onMouseup, onMouseup', onReset, onReset', onScroll, onScroll', onSelect, onSelect', onSubmit, onSubmit', onWheel, onWheel') where
+module Flame.Html.Event (EventName, ToEvent, ToRawEvent, ToMaybeEvent, ToSpecialEvent, createEvent, createEventMessage, createRawEvent, onBlur, onBlur', onCheck, onClick, onClick', onChange, onChange', onContextmenu, onContextmenu', onDblclick, onDblclick', onDrag, onDrag', onDragend, onDragend', onDragenter, onDragenter', onDragleave, onDragleave', onDragover, onDragover', onDragstart, onDragstart', onDrop, onDrop', onError, onError', onFocus, onFocus', onFocusin, onFocusin', onFocusout, onFocusout', onInput, onInput', onKeydown, onKeydown', onKeypress, onKeypress', onKeyup, onKeyup', onMousedown, onMousedown', onMouseenter, onMouseenter', onMouseleave, onMouseleave', onMousemove, onMousemove', onMouseout, onMouseout', onLoad, onLoad', onUnload, onUnload', onMouseover, onMouseover', onMouseup, onMouseup', onReset, onReset', onScroll, onScroll', onSelect, onSelect', onSubmit, onSubmit', onWheel, onWheel') where
 
 import Prelude
 
diff --git a/src/Flame/Html/Element.js b/src/Flame/Html/Element.js
index 9d6c41c..b3a32f9 100644
--- a/src/Flame/Html/Element.js
+++ b/src/Flame/Html/Element.js
@@ -73,7 +73,6 @@ export function createEmptyElement(tag) {
     };
 }
 
-
 export function text(value) {
     return {
         nodeType: textNode,
diff --git a/src/Flame/Html/Element.purs b/src/Flame/Html/Element.purs
index 5370ce7..900f97e 100755
--- a/src/Flame/Html/Element.purs
+++ b/src/Flame/Html/Element.purs
@@ -8,39 +8,10 @@ import Data.Maybe (Maybe)
 import Data.Maybe as DM
 import Effect (Effect)
 import Flame.Html.Attribute.Internal as FHAI
-import Flame.Types (Html, NodeData, Tag, Key)
 import Flame.Internal.Fragment as FIF
+import Flame.Types (Html, Key, NodeData, Tag)
 import Web.DOM (Node)
 
--- | `ToNode` simplifies element creation by automating common tag operations
--- | * `tag "my-tag" []` becomes short for `tag [id "my-tag"] []`
--- | * `tag [] "content"` becomes short for `tag [] [text "content"]`
--- | * elements with a single attribute or children need not as well to use lists: `tag (enabled True) (tag attrs children)`
-class ToNode ∷ ∀ k. Type → k → (k → Type) → Constraint
-class ToNode a b c | a → b where
-      toNode ∷ a → Array (c b)
-
-instance ToNode String b Html where
-      toNode = DA.singleton <<< text
-
-instance (ToNode a b c) ⇒ ToNode (Array a) b c where
-      toNode = DA.concatMap toNode
-
-instance ToNode (Html a) a Html where
-      toNode = DA.singleton
-
-instance ToNode String b NodeData where
-      toNode = DA.singleton <<< FHAI.id
-
-instance ToNode (NodeData a) a NodeData where
-      toNode = DA.singleton
-
-type ToHtml a b h = ToNode a h NodeData ⇒ ToNode b h Html ⇒ a → b → Html h
-
-type ToHtml_ b h = ToNode b h Html ⇒ b → Html h
-
-type ToHtml' a h = ToNode a h NodeData ⇒ a → Html h
-
 -- | `NodeRenderer` contains
 -- | * `createNode` – function to create a DOM node from the given data
 -- | * `updateNode` – function to update a DOM node from previous and current data
@@ -70,22 +41,22 @@ foreign import text ∷ ∀ message. String → Html message
 foreign import createEmptyElement ∷ ∀ message. Tag → Html message
 
 -- | Creates an element node with attributes and children nodes
-createElement ∷ ∀ a b h. Tag → ToHtml a b h
-createElement tag nodeData children = createElementNode tag (toNode nodeData) $ toNode children
+createElement ∷ ∀ message. Tag → Array (NodeData message) → Array (Html message) → Html message
+createElement tag nodeData children = createElementNode tag nodeData children
 
 -- | Creates an element node with no attributes but children nodes
-createElement_ ∷ ∀ b h. Tag → ToHtml_ b h
-createElement_ tag children = createDatalessElementNode tag $ toNode children
+createElement_ ∷ ∀ message. Tag → Array (Html message) → Html message
+createElement_ tag children = createDatalessElementNode tag children
 
 -- | Creates an element node with attributes but no children nodes
-createElement' ∷ ∀ a h. Tag → ToHtml' a h
-createElement' tag nodeData = createSingleElementNode tag $ toNode nodeData
+createElement' ∷ ∀ message. Tag → Array (NodeData message) → Html message
+createElement' tag nodeData = createSingleElementNode tag nodeData
 
 -- | Creates a fragment node
 -- |
 -- | Fragments act as wrappers: only children nodes are rendered
-fragment ∷ ∀ b h. ToHtml_ b h
-fragment children = FIF.createFragmentNode $ toNode children
+fragment ∷ ∀ message. Array (Html message) → Html message
+fragment children = FIF.createFragmentNode children
 
 -- | Creates a lazy node
 -- |
@@ -94,1715 +65,1715 @@ lazy ∷ ∀ arg message. Maybe Key → (arg → Html message) → arg → Html
 lazy maybeKey render arg = createLazyNode (DM.maybe [] DA.singleton maybeKey) render arg
 
 -- | Creates a node which the corresponding DOM node is created and updated from the given `arg`
-managed ∷ ∀ arg nd message. ToNode nd message NodeData ⇒ NodeRenderer arg → nd → arg → Html message
-managed render nodeData arg = createManagedNode render (toNode nodeData) arg
+managed ∷ ∀ arg message. NodeRenderer arg → Array (NodeData message) → arg → Html message
+managed render nodeData arg = createManagedNode render nodeData arg
 
 -- | Creates a node (with no attributes) which the corresponding DOM node is created and updated from the given `arg`
 managed_ ∷ ∀ arg message. NodeRenderer arg → arg → Html message
 managed_ render arg = createDatalessManagedNode render arg
 
-svg ∷ ∀ a b h. ToHtml a b h
-svg nodeData children = createSvgNode (toNode nodeData) $ toNode children
+svg ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
+svg nodeData children = createSvgNode nodeData children
 
-svg_ ∷ ∀ b h. ToHtml_ b h
-svg_ children = createDatalessSvgNode $ toNode children
+svg_ ∷ ∀ message. Array (Html message) → Html message
+svg_ children = createDatalessSvgNode children
 
-svg' ∷ ∀ a h. ToHtml' a h
-svg' nodeData = createSingleSvgNode $ toNode nodeData
+svg' ∷ ∀ message. Array (NodeData message) → Html message
+svg' nodeData = createSingleSvgNode nodeData
 
-hr ∷ ∀ h. Html h
+hr ∷ ∀ message. Html message
 hr = createEmptyElement "hr"
 
-hr_ ∷ ∀ b h. ToHtml_ b h
+hr_ ∷ ∀ message. Array (Html message) → Html message
 hr_ = createElement_ "hr"
 
-hr' ∷ ∀ a h. ToHtml' a h
+hr' ∷ ∀ message. Array (NodeData message) → Html message
 hr' = createElement' "hr"
 
-br ∷ ∀ h. Html h
+br ∷ ∀ message. Html message
 br = createEmptyElement "br"
 
-br' ∷ ∀ a h. ToHtml' a h
+br' ∷ ∀ message. Array (NodeData message) → Html message
 br' = createElement' "br"
 
-input ∷ ∀ a h. ToHtml' a h
+input ∷ ∀ message. Array (NodeData message) → Html message
 input = createElement' "input"
 
-input_ ∷ ∀ a h. ToHtml_ a h
+input_ ∷ ∀ message. Array (Html message) → Html message
 input_ = createElement_ "input"
 
 --script generated
 
-a ∷ ∀ a b h. ToHtml a b h
+a ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 a = createElement "a"
 
-a_ ∷ ∀ b h. ToHtml_ b h
+a_ ∷ ∀ message. Array (Html message) → Html message
 a_ = createElement_ "a"
 
-a' ∷ ∀ a h. ToHtml' a h
+a' ∷ ∀ message. Array (NodeData message) → Html message
 a' = createElement' "a"
 
-address ∷ ∀ a b h. ToHtml a b h
+address ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 address = createElement "address"
 
-address_ ∷ ∀ b h. ToHtml_ b h
+address_ ∷ ∀ message. Array (Html message) → Html message
 address_ = createElement_ "address"
 
-address' ∷ ∀ a h. ToHtml' a h
+address' ∷ ∀ message. Array (NodeData message) → Html message
 address' = createElement' "address"
 
-area ∷ ∀ a b h. ToHtml a b h
+area ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 area = createElement "area"
 
-area_ ∷ ∀ b h. ToHtml_ b h
+area_ ∷ ∀ message. Array (Html message) → Html message
 area_ = createElement_ "area"
 
-area' ∷ ∀ a h. ToHtml' a h
+area' ∷ ∀ message. Array (NodeData message) → Html message
 area' = createElement' "area"
 
-article ∷ ∀ a b h. ToHtml a b h
+article ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 article = createElement "article"
 
-article_ ∷ ∀ b h. ToHtml_ b h
+article_ ∷ ∀ message. Array (Html message) → Html message
 article_ = createElement_ "article"
 
-article' ∷ ∀ a h. ToHtml' a h
+article' ∷ ∀ message. Array (NodeData message) → Html message
 article' = createElement' "article"
 
-aside ∷ ∀ a b h. ToHtml a b h
+aside ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 aside = createElement "aside"
 
-aside_ ∷ ∀ b h. ToHtml_ b h
+aside_ ∷ ∀ message. Array (Html message) → Html message
 aside_ = createElement_ "aside"
 
-aside' ∷ ∀ a h. ToHtml' a h
+aside' ∷ ∀ message. Array (NodeData message) → Html message
 aside' = createElement' "aside"
 
-audio ∷ ∀ a b h. ToHtml a b h
+audio ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 audio = createElement "audio"
 
-audio_ ∷ ∀ b h. ToHtml_ b h
+audio_ ∷ ∀ message. Array (Html message) → Html message
 audio_ = createElement_ "audio"
 
-audio' ∷ ∀ a h. ToHtml' a h
+audio' ∷ ∀ message. Array (NodeData message) → Html message
 audio' = createElement' "audio"
 
-b ∷ ∀ a b h. ToHtml a b h
+b ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 b = createElement "b"
 
-b_ ∷ ∀ b h. ToHtml_ b h
+b_ ∷ ∀ message. Array (Html message) → Html message
 b_ = createElement_ "b"
 
-b' ∷ ∀ a h. ToHtml' a h
+b' ∷ ∀ message. Array (NodeData message) → Html message
 b' = createElement' "b"
 
-base ∷ ∀ a b h. ToHtml a b h
+base ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 base = createElement "base"
 
-base_ ∷ ∀ b h. ToHtml_ b h
+base_ ∷ ∀ message. Array (Html message) → Html message
 base_ = createElement_ "base"
 
-base' ∷ ∀ a h. ToHtml' a h
+base' ∷ ∀ message. Array (NodeData message) → Html message
 base' = createElement' "base"
 
-bdi ∷ ∀ a b h. ToHtml a b h
+bdi ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 bdi = createElement "bdi"
 
-bdi_ ∷ ∀ b h. ToHtml_ b h
+bdi_ ∷ ∀ message. Array (Html message) → Html message
 bdi_ = createElement_ "bdi"
 
-bdi' ∷ ∀ a h. ToHtml' a h
+bdi' ∷ ∀ message. Array (NodeData message) → Html message
 bdi' = createElement' "bdi"
 
-bdo ∷ ∀ a b h. ToHtml a b h
+bdo ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 bdo = createElement "bdo"
 
-bdo_ ∷ ∀ b h. ToHtml_ b h
+bdo_ ∷ ∀ message. Array (Html message) → Html message
 bdo_ = createElement_ "bdo"
 
-bdo' ∷ ∀ a h. ToHtml' a h
+bdo' ∷ ∀ message. Array (NodeData message) → Html message
 bdo' = createElement' "bdo"
 
-blockquote ∷ ∀ a b h. ToHtml a b h
+blockquote ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 blockquote = createElement "blockquote"
 
-blockquote_ ∷ ∀ b h. ToHtml_ b h
+blockquote_ ∷ ∀ message. Array (Html message) → Html message
 blockquote_ = createElement_ "blockquote"
 
-blockquote' ∷ ∀ a h. ToHtml' a h
+blockquote' ∷ ∀ message. Array (NodeData message) → Html message
 blockquote' = createElement' "blockquote"
 
-body ∷ ∀ a b h. ToHtml a b h
+body ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 body = createElement "body"
 
-body_ ∷ ∀ b h. ToHtml_ b h
+body_ ∷ ∀ message. Array (Html message) → Html message
 body_ = createElement_ "body"
 
-body' ∷ ∀ a h. ToHtml' a h
+body' ∷ ∀ message. Array (NodeData message) → Html message
 body' = createElement' "body"
 
-button ∷ ∀ a b h. ToHtml a b h
+button ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 button = createElement "button"
 
-button_ ∷ ∀ b h. ToHtml_ b h
+button_ ∷ ∀ message. Array (Html message) → Html message
 button_ = createElement_ "button"
 
-button' ∷ ∀ a h. ToHtml' a h
+button' ∷ ∀ message. Array (NodeData message) → Html message
 button' = createElement' "button"
 
-canvas ∷ ∀ a b h. ToHtml a b h
+canvas ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 canvas = createElement "canvas"
 
-canvas_ ∷ ∀ b h. ToHtml_ b h
+canvas_ ∷ ∀ message. Array (Html message) → Html message
 canvas_ = createElement_ "canvas"
 
-canvas' ∷ ∀ a h. ToHtml' a h
+canvas' ∷ ∀ message. Array (NodeData message) → Html message
 canvas' = createElement' "canvas"
 
-caption ∷ ∀ a b h. ToHtml a b h
+caption ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 caption = createElement "caption"
 
-caption_ ∷ ∀ b h. ToHtml_ b h
+caption_ ∷ ∀ message. Array (Html message) → Html message
 caption_ = createElement_ "caption"
 
-caption' ∷ ∀ a h. ToHtml' a h
+caption' ∷ ∀ message. Array (NodeData message) → Html message
 caption' = createElement' "caption"
 
-cite ∷ ∀ a b h. ToHtml a b h
+cite ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 cite = createElement "cite"
 
-cite_ ∷ ∀ b h. ToHtml_ b h
+cite_ ∷ ∀ message. Array (Html message) → Html message
 cite_ = createElement_ "cite"
 
-cite' ∷ ∀ a h. ToHtml' a h
+cite' ∷ ∀ message. Array (NodeData message) → Html message
 cite' = createElement' "cite"
 
-code ∷ ∀ a b h. ToHtml a b h
+code ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 code = createElement "code"
 
-code_ ∷ ∀ b h. ToHtml_ b h
+code_ ∷ ∀ message. Array (Html message) → Html message
 code_ = createElement_ "code"
 
-code' ∷ ∀ a h. ToHtml' a h
+code' ∷ ∀ message. Array (NodeData message) → Html message
 code' = createElement' "code"
 
-col ∷ ∀ a b h. ToHtml a b h
+col ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 col = createElement "col"
 
-col_ ∷ ∀ b h. ToHtml_ b h
+col_ ∷ ∀ message. Array (Html message) → Html message
 col_ = createElement_ "col"
 
-col' ∷ ∀ a h. ToHtml' a h
+col' ∷ ∀ message. Array (NodeData message) → Html message
 col' = createElement' "col"
 
-colgroup ∷ ∀ a b h. ToHtml a b h
+colgroup ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 colgroup = createElement "colgroup"
 
-colgroup_ ∷ ∀ b h. ToHtml_ b h
+colgroup_ ∷ ∀ message. Array (Html message) → Html message
 colgroup_ = createElement_ "colgroup"
 
-colgroup' ∷ ∀ a h. ToHtml' a h
+colgroup' ∷ ∀ message. Array (NodeData message) → Html message
 colgroup' = createElement' "colgroup"
 
-data_ ∷ ∀ b h. ToHtml_ b h
+data_ ∷ ∀ message. Array (Html message) → Html message
 data_ = createElement_ "data"
 
-data' ∷ ∀ a h. ToHtml' a h
+data' ∷ ∀ message. Array (NodeData message) → Html message
 data' = createElement' "data"
 
-datalist ∷ ∀ a b h. ToHtml a b h
+datalist ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 datalist = createElement "datalist"
 
-datalist_ ∷ ∀ b h. ToHtml_ b h
+datalist_ ∷ ∀ message. Array (Html message) → Html message
 datalist_ = createElement_ "datalist"
 
-datalist' ∷ ∀ a h. ToHtml' a h
+datalist' ∷ ∀ message. Array (NodeData message) → Html message
 datalist' = createElement' "datalist"
 
-dd ∷ ∀ a b h. ToHtml a b h
+dd ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 dd = createElement "dd"
 
-dd_ ∷ ∀ b h. ToHtml_ b h
+dd_ ∷ ∀ message. Array (Html message) → Html message
 dd_ = createElement_ "dd"
 
-dd' ∷ ∀ a h. ToHtml' a h
+dd' ∷ ∀ message. Array (NodeData message) → Html message
 dd' = createElement' "dd"
 
-del ∷ ∀ a b h. ToHtml a b h
+del ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 del = createElement "del"
 
-del_ ∷ ∀ b h. ToHtml_ b h
+del_ ∷ ∀ message. Array (Html message) → Html message
 del_ = createElement_ "del"
 
-del' ∷ ∀ a h. ToHtml' a h
+del' ∷ ∀ message. Array (NodeData message) → Html message
 del' = createElement' "del"
 
-details ∷ ∀ a b h. ToHtml a b h
+details ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 details = createElement "details"
 
-details_ ∷ ∀ b h. ToHtml_ b h
+details_ ∷ ∀ message. Array (Html message) → Html message
 details_ = createElement_ "details"
 
-details' ∷ ∀ a h. ToHtml' a h
+details' ∷ ∀ message. Array (NodeData message) → Html message
 details' = createElement' "details"
 
-dfn ∷ ∀ a b h. ToHtml a b h
+dfn ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 dfn = createElement "dfn"
 
-dfn_ ∷ ∀ b h. ToHtml_ b h
+dfn_ ∷ ∀ message. Array (Html message) → Html message
 dfn_ = createElement_ "dfn"
 
-dfn' ∷ ∀ a h. ToHtml' a h
+dfn' ∷ ∀ message. Array (NodeData message) → Html message
 dfn' = createElement' "dfn"
 
-dialog ∷ ∀ a b h. ToHtml a b h
+dialog ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 dialog = createElement "dialog"
 
-dialog_ ∷ ∀ b h. ToHtml_ b h
+dialog_ ∷ ∀ message. Array (Html message) → Html message
 dialog_ = createElement_ "dialog"
 
-dialog' ∷ ∀ a h. ToHtml' a h
+dialog' ∷ ∀ message. Array (NodeData message) → Html message
 dialog' = createElement' "dialog"
 
-div ∷ ∀ a b h. ToHtml a b h
+div ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 div = createElement "div"
 
-div_ ∷ ∀ b h. ToHtml_ b h
+div_ ∷ ∀ message. Array (Html message) → Html message
 div_ = createElement_ "div"
 
-div' ∷ ∀ a h. ToHtml' a h
+div' ∷ ∀ message. Array (NodeData message) → Html message
 div' = createElement' "div"
 
-dl ∷ ∀ a b h. ToHtml a b h
+dl ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 dl = createElement "dl"
 
-dl_ ∷ ∀ b h. ToHtml_ b h
+dl_ ∷ ∀ message. Array (Html message) → Html message
 dl_ = createElement_ "dl"
 
-dl' ∷ ∀ a h. ToHtml' a h
+dl' ∷ ∀ message. Array (NodeData message) → Html message
 dl' = createElement' "dl"
 
-dt ∷ ∀ a b h. ToHtml a b h
+dt ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 dt = createElement "dt"
 
-dt_ ∷ ∀ b h. ToHtml_ b h
+dt_ ∷ ∀ message. Array (Html message) → Html message
 dt_ = createElement_ "dt"
 
-dt' ∷ ∀ a h. ToHtml' a h
+dt' ∷ ∀ message. Array (NodeData message) → Html message
 dt' = createElement' "dt"
 
-em ∷ ∀ a b h. ToHtml a b h
+em ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 em = createElement "em"
 
-em_ ∷ ∀ b h. ToHtml_ b h
+em_ ∷ ∀ message. Array (Html message) → Html message
 em_ = createElement_ "em"
 
-em' ∷ ∀ a h. ToHtml' a h
+em' ∷ ∀ message. Array (NodeData message) → Html message
 em' = createElement' "em"
 
-embed ∷ ∀ a b h. ToHtml a b h
+embed ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 embed = createElement "embed"
 
-embed_ ∷ ∀ b h. ToHtml_ b h
+embed_ ∷ ∀ message. Array (Html message) → Html message
 embed_ = createElement_ "embed"
 
-embed' ∷ ∀ a h. ToHtml' a h
+embed' ∷ ∀ message. Array (NodeData message) → Html message
 embed' = createElement' "embed"
 
-fieldset ∷ ∀ a b h. ToHtml a b h
+fieldset ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 fieldset = createElement "fieldset"
 
-fieldset_ ∷ ∀ b h. ToHtml_ b h
+fieldset_ ∷ ∀ message. Array (Html message) → Html message
 fieldset_ = createElement_ "fieldset"
 
-fieldset' ∷ ∀ a h. ToHtml' a h
+fieldset' ∷ ∀ message. Array (NodeData message) → Html message
 fieldset' = createElement' "fieldset"
 
-figure ∷ ∀ a b h. ToHtml a b h
+figure ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 figure = createElement "figure"
 
-figure_ ∷ ∀ b h. ToHtml_ b h
+figure_ ∷ ∀ message. Array (Html message) → Html message
 figure_ = createElement_ "figure"
 
-figure' ∷ ∀ a h. ToHtml' a h
+figure' ∷ ∀ message. Array (NodeData message) → Html message
 figure' = createElement' "figure"
 
-footer ∷ ∀ a b h. ToHtml a b h
+footer ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 footer = createElement "footer"
 
-footer_ ∷ ∀ b h. ToHtml_ b h
+footer_ ∷ ∀ message. Array (Html message) → Html message
 footer_ = createElement_ "footer"
 
-footer' ∷ ∀ a h. ToHtml' a h
+footer' ∷ ∀ message. Array (NodeData message) → Html message
 footer' = createElement' "footer"
 
-form ∷ ∀ a b h. ToHtml a b h
+form ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 form = createElement "form"
 
-form_ ∷ ∀ b h. ToHtml_ b h
+form_ ∷ ∀ message. Array (Html message) → Html message
 form_ = createElement_ "form"
 
-form' ∷ ∀ a h. ToHtml' a h
+form' ∷ ∀ message. Array (NodeData message) → Html message
 form' = createElement' "form"
 
-h1 ∷ ∀ a b h. ToHtml a b h
+h1 ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 h1 = createElement "h1"
 
-h1_ ∷ ∀ b h. ToHtml_ b h
+h1_ ∷ ∀ message. Array (Html message) → Html message
 h1_ = createElement_ "h1"
 
-h1' ∷ ∀ a h. ToHtml' a h
+h1' ∷ ∀ message. Array (NodeData message) → Html message
 h1' = createElement' "h1"
 
-h2 ∷ ∀ a b h. ToHtml a b h
+h2 ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 h2 = createElement "h2"
 
-h2_ ∷ ∀ b h. ToHtml_ b h
+h2_ ∷ ∀ message. Array (Html message) → Html message
 h2_ = createElement_ "h2"
 
-h2' ∷ ∀ a h. ToHtml' a h
+h2' ∷ ∀ message. Array (NodeData message) → Html message
 h2' = createElement' "h2"
 
-h3 ∷ ∀ a b h. ToHtml a b h
+h3 ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 h3 = createElement "h3"
 
-h3_ ∷ ∀ b h. ToHtml_ b h
+h3_ ∷ ∀ message. Array (Html message) → Html message
 h3_ = createElement_ "h3"
 
-h3' ∷ ∀ a h. ToHtml' a h
+h3' ∷ ∀ message. Array (NodeData message) → Html message
 h3' = createElement' "h3"
 
-h4 ∷ ∀ a b h. ToHtml a b h
+h4 ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 h4 = createElement "h4"
 
-h4_ ∷ ∀ b h. ToHtml_ b h
+h4_ ∷ ∀ message. Array (Html message) → Html message
 h4_ = createElement_ "h4"
 
-h4' ∷ ∀ a h. ToHtml' a h
+h4' ∷ ∀ message. Array (NodeData message) → Html message
 h4' = createElement' "h4"
 
-h5 ∷ ∀ a b h. ToHtml a b h
+h5 ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 h5 = createElement "h5"
 
-h5_ ∷ ∀ b h. ToHtml_ b h
+h5_ ∷ ∀ message. Array (Html message) → Html message
 h5_ = createElement_ "h5"
 
-h5' ∷ ∀ a h. ToHtml' a h
+h5' ∷ ∀ message. Array (NodeData message) → Html message
 h5' = createElement' "h5"
 
-h6 ∷ ∀ a b h. ToHtml a b h
+h6 ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 h6 = createElement "h6"
 
-h6_ ∷ ∀ b h. ToHtml_ b h
+h6_ ∷ ∀ message. Array (Html message) → Html message
 h6_ = createElement_ "h6"
 
-h6' ∷ ∀ a h. ToHtml' a h
+h6' ∷ ∀ message. Array (NodeData message) → Html message
 h6' = createElement' "h6"
 
-head ∷ ∀ a b h. ToHtml a b h
+head ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 head = createElement "head"
 
-head_ ∷ ∀ b h. ToHtml_ b h
+head_ ∷ ∀ message. Array (Html message) → Html message
 head_ = createElement_ "head"
 
-head' ∷ ∀ a h. ToHtml' a h
+head' ∷ ∀ message. Array (NodeData message) → Html message
 head' = createElement' "head"
 
-header ∷ ∀ a b h. ToHtml a b h
+header ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 header = createElement "header"
 
-header_ ∷ ∀ b h. ToHtml_ b h
+header_ ∷ ∀ message. Array (Html message) → Html message
 header_ = createElement_ "header"
 
-header' ∷ ∀ a h. ToHtml' a h
+header' ∷ ∀ message. Array (NodeData message) → Html message
 header' = createElement' "header"
 
-hgroup ∷ ∀ a b h. ToHtml a b h
+hgroup ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 hgroup = createElement "hgroup"
 
-hgroup_ ∷ ∀ b h. ToHtml_ b h
+hgroup_ ∷ ∀ message. Array (Html message) → Html message
 hgroup_ = createElement_ "hgroup"
 
-hgroup' ∷ ∀ a h. ToHtml' a h
+hgroup' ∷ ∀ message. Array (NodeData message) → Html message
 hgroup' = createElement' "hgroup"
 
-html ∷ ∀ a b h. ToHtml a b h
+html ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 html = createElement "html"
 
-html_ ∷ ∀ b h. ToHtml_ b h
+html_ ∷ ∀ message. Array (Html message) → Html message
 html_ = createElement_ "html"
 
-html' ∷ ∀ a h. ToHtml' a h
+html' ∷ ∀ message. Array (NodeData message) → Html message
 html' = createElement' "html"
 
-i ∷ ∀ a b h. ToHtml a b h
+i ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 i = createElement "i"
 
-i_ ∷ ∀ b h. ToHtml_ b h
+i_ ∷ ∀ message. Array (Html message) → Html message
 i_ = createElement_ "i"
 
-i' ∷ ∀ a h. ToHtml' a h
+i' ∷ ∀ message. Array (NodeData message) → Html message
 i' = createElement' "i"
 
-iframe ∷ ∀ a b h. ToHtml a b h
+iframe ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 iframe = createElement "iframe"
 
-iframe_ ∷ ∀ b h. ToHtml_ b h
+iframe_ ∷ ∀ message. Array (Html message) → Html message
 iframe_ = createElement_ "iframe"
 
-iframe' ∷ ∀ a h. ToHtml' a h
+iframe' ∷ ∀ message. Array (NodeData message) → Html message
 iframe' = createElement' "iframe"
 
-ins ∷ ∀ a b h. ToHtml a b h
+ins ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 ins = createElement "ins"
 
-ins_ ∷ ∀ b h. ToHtml_ b h
+ins_ ∷ ∀ message. Array (Html message) → Html message
 ins_ = createElement_ "ins"
 
-ins' ∷ ∀ a h. ToHtml' a h
+ins' ∷ ∀ message. Array (NodeData message) → Html message
 ins' = createElement' "ins"
 
-kbd ∷ ∀ a b h. ToHtml a b h
+kbd ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 kbd = createElement "kbd"
 
-kbd_ ∷ ∀ b h. ToHtml_ b h
+kbd_ ∷ ∀ message. Array (Html message) → Html message
 kbd_ = createElement_ "kbd"
 
-kbd' ∷ ∀ a h. ToHtml' a h
+kbd' ∷ ∀ message. Array (NodeData message) → Html message
 kbd' = createElement' "kbd"
 
-keygen ∷ ∀ a b h. ToHtml a b h
+keygen ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 keygen = createElement "keygen"
 
-keygen_ ∷ ∀ b h. ToHtml_ b h
+keygen_ ∷ ∀ message. Array (Html message) → Html message
 keygen_ = createElement_ "keygen"
 
-keygen' ∷ ∀ a h. ToHtml' a h
+keygen' ∷ ∀ message. Array (NodeData message) → Html message
 keygen' = createElement' "keygen"
 
-label ∷ ∀ a b h. ToHtml a b h
+label ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 label = createElement "label"
 
-label_ ∷ ∀ b h. ToHtml_ b h
+label_ ∷ ∀ message. Array (Html message) → Html message
 label_ = createElement_ "label"
 
-label' ∷ ∀ a h. ToHtml' a h
+label' ∷ ∀ message. Array (NodeData message) → Html message
 label' = createElement' "label"
 
-legend ∷ ∀ a b h. ToHtml a b h
+legend ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 legend = createElement "legend"
 
-legend_ ∷ ∀ b h. ToHtml_ b h
+legend_ ∷ ∀ message. Array (Html message) → Html message
 legend_ = createElement_ "legend"
 
-legend' ∷ ∀ a h. ToHtml' a h
+legend' ∷ ∀ message. Array (NodeData message) → Html message
 legend' = createElement' "legend"
 
-li ∷ ∀ a b h. ToHtml a b h
+li ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 li = createElement "li"
 
-li_ ∷ ∀ b h. ToHtml_ b h
+li_ ∷ ∀ message. Array (Html message) → Html message
 li_ = createElement_ "li"
 
-li' ∷ ∀ a h. ToHtml' a h
+li' ∷ ∀ message. Array (NodeData message) → Html message
 li' = createElement' "li"
 
-link ∷ ∀ a h. ToHtml' a h
+link ∷ ∀ message. Array (NodeData message) → Html message
 link = createElement' "link"
 
-main ∷ ∀ a b h. ToHtml a b h
+main ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 main = createElement "main"
 
-main_ ∷ ∀ b h. ToHtml_ b h
+main_ ∷ ∀ message. Array (Html message) → Html message
 main_ = createElement_ "main"
 
-main' ∷ ∀ a h. ToHtml' a h
+main' ∷ ∀ message. Array (NodeData message) → Html message
 main' = createElement' "main"
 
-map ∷ ∀ a b h. ToHtml a b h
+map ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 map = createElement "map"
 
-map_ ∷ ∀ b h. ToHtml_ b h
+map_ ∷ ∀ message. Array (Html message) → Html message
 map_ = createElement_ "map"
 
-map' ∷ ∀ a h. ToHtml' a h
+map' ∷ ∀ message. Array (NodeData message) → Html message
 map' = createElement' "map"
 
-mark ∷ ∀ a b h. ToHtml a b h
+mark ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 mark = createElement "mark"
 
-mark_ ∷ ∀ b h. ToHtml_ b h
+mark_ ∷ ∀ message. Array (Html message) → Html message
 mark_ = createElement_ "mark"
 
-mark' ∷ ∀ a h. ToHtml' a h
+mark' ∷ ∀ message. Array (NodeData message) → Html message
 mark' = createElement' "mark"
 
-menu ∷ ∀ a b h. ToHtml a b h
+menu ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 menu = createElement "menu"
 
-menu_ ∷ ∀ b h. ToHtml_ b h
+menu_ ∷ ∀ message. Array (Html message) → Html message
 menu_ = createElement_ "menu"
 
-menu' ∷ ∀ a h. ToHtml' a h
+menu' ∷ ∀ message. Array (NodeData message) → Html message
 menu' = createElement' "menu"
 
-menuitem ∷ ∀ a b h. ToHtml a b h
+menuitem ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 menuitem = createElement "menuitem"
 
-menuitem_ ∷ ∀ b h. ToHtml_ b h
+menuitem_ ∷ ∀ message. Array (Html message) → Html message
 menuitem_ = createElement_ "menuitem"
 
-menuitem' ∷ ∀ a h. ToHtml' a h
+menuitem' ∷ ∀ message. Array (NodeData message) → Html message
 menuitem' = createElement' "menuitem"
 
-meta ∷ ∀ a h. ToHtml' a h
+meta ∷ ∀ message. Array (NodeData message) → Html message
 meta = createElement' "meta"
 
-meter ∷ ∀ a b h. ToHtml a b h
+meter ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 meter = createElement "meter"
 
-meter_ ∷ ∀ b h. ToHtml_ b h
+meter_ ∷ ∀ message. Array (Html message) → Html message
 meter_ = createElement_ "meter"
 
-meter' ∷ ∀ a h. ToHtml' a h
+meter' ∷ ∀ message. Array (NodeData message) → Html message
 meter' = createElement' "meter"
 
-nav ∷ ∀ a b h. ToHtml a b h
+nav ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 nav = createElement "nav"
 
-nav_ ∷ ∀ b h. ToHtml_ b h
+nav_ ∷ ∀ message. Array (Html message) → Html message
 nav_ = createElement_ "nav"
 
-nav' ∷ ∀ a h. ToHtml' a h
+nav' ∷ ∀ message. Array (NodeData message) → Html message
 nav' = createElement' "nav"
 
-noscript ∷ ∀ a b h. ToHtml a b h
+noscript ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 noscript = createElement "noscript"
 
-noscript_ ∷ ∀ b h. ToHtml_ b h
+noscript_ ∷ ∀ message. Array (Html message) → Html message
 noscript_ = createElement_ "noscript"
 
-noscript' ∷ ∀ a h. ToHtml' a h
+noscript' ∷ ∀ message. Array (NodeData message) → Html message
 noscript' = createElement' "noscript"
 
-object ∷ ∀ a b h. ToHtml a b h
+object ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 object = createElement "object"
 
-object_ ∷ ∀ b h. ToHtml_ b h
+object_ ∷ ∀ message. Array (Html message) → Html message
 object_ = createElement_ "object"
 
-object' ∷ ∀ a h. ToHtml' a h
+object' ∷ ∀ message. Array (NodeData message) → Html message
 object' = createElement' "object"
 
-ol ∷ ∀ a b h. ToHtml a b h
+ol ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 ol = createElement "ol"
 
-ol_ ∷ ∀ b h. ToHtml_ b h
+ol_ ∷ ∀ message. Array (Html message) → Html message
 ol_ = createElement_ "ol"
 
-ol' ∷ ∀ a h. ToHtml' a h
+ol' ∷ ∀ message. Array (NodeData message) → Html message
 ol' = createElement' "ol"
 
-img ∷ ∀ a h. ToHtml' a h
+img ∷ ∀ message. Array (NodeData message) → Html message
 img = createElement' "img"
 
-optgroup ∷ ∀ a b h. ToHtml a b h
+optgroup ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 optgroup = createElement "optgroup"
 
-optgroup_ ∷ ∀ b h. ToHtml_ b h
+optgroup_ ∷ ∀ message. Array (Html message) → Html message
 optgroup_ = createElement_ "optgroup"
 
-optgroup' ∷ ∀ a h. ToHtml' a h
+optgroup' ∷ ∀ message. Array (NodeData message) → Html message
 optgroup' = createElement' "optgroup"
 
-option ∷ ∀ a b h. ToHtml a b h
+option ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 option = createElement "option"
 
-option_ ∷ ∀ b h. ToHtml_ b h
+option_ ∷ ∀ message. Array (Html message) → Html message
 option_ = createElement_ "option"
 
-option' ∷ ∀ a h. ToHtml' a h
+option' ∷ ∀ message. Array (NodeData message) → Html message
 option' = createElement' "option"
 
-output ∷ ∀ a b h. ToHtml a b h
+output ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 output = createElement "output"
 
-output_ ∷ ∀ b h. ToHtml_ b h
+output_ ∷ ∀ message. Array (Html message) → Html message
 output_ = createElement_ "output"
 
-output' ∷ ∀ a h. ToHtml' a h
+output' ∷ ∀ message. Array (NodeData message) → Html message
 output' = createElement' "output"
 
-p ∷ ∀ a b h. ToHtml a b h
+p ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 p = createElement "p"
 
-p_ ∷ ∀ b h. ToHtml_ b h
+p_ ∷ ∀ message. Array (Html message) → Html message
 p_ = createElement_ "p"
 
-p' ∷ ∀ a h. ToHtml' a h
+p' ∷ ∀ message. Array (NodeData message) → Html message
 p' = createElement' "p"
 
-param ∷ ∀ a b h. ToHtml a b h
+param ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 param = createElement "param"
 
-param_ ∷ ∀ b h. ToHtml_ b h
+param_ ∷ ∀ message. Array (Html message) → Html message
 param_ = createElement_ "param"
 
-param' ∷ ∀ a h. ToHtml' a h
+param' ∷ ∀ message. Array (NodeData message) → Html message
 param' = createElement' "param"
 
-pre ∷ ∀ a b h. ToHtml a b h
+pre ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 pre = createElement "pre"
 
-pre_ ∷ ∀ b h. ToHtml_ b h
+pre_ ∷ ∀ message. Array (Html message) → Html message
 pre_ = createElement_ "pre"
 
-pre' ∷ ∀ a h. ToHtml' a h
+pre' ∷ ∀ message. Array (NodeData message) → Html message
 pre' = createElement' "pre"
 
-progress ∷ ∀ a b h. ToHtml a b h
+progress ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 progress = createElement "progress"
 
-progress_ ∷ ∀ b h. ToHtml_ b h
+progress_ ∷ ∀ message. Array (Html message) → Html message
 progress_ = createElement_ "progress"
 
-progress' ∷ ∀ a h. ToHtml' a h
+progress' ∷ ∀ message. Array (NodeData message) → Html message
 progress' = createElement' "progress"
 
-q ∷ ∀ a b h. ToHtml a b h
+q ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 q = createElement "q"
 
-q_ ∷ ∀ b h. ToHtml_ b h
+q_ ∷ ∀ message. Array (Html message) → Html message
 q_ = createElement_ "q"
 
-q' ∷ ∀ a h. ToHtml' a h
+q' ∷ ∀ message. Array (NodeData message) → Html message
 q' = createElement' "q"
 
-rb ∷ ∀ a b h. ToHtml a b h
+rb ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 rb = createElement "rb"
 
-rb_ ∷ ∀ b h. ToHtml_ b h
+rb_ ∷ ∀ message. Array (Html message) → Html message
 rb_ = createElement_ "rb"
 
-rb' ∷ ∀ a h. ToHtml' a h
+rb' ∷ ∀ message. Array (NodeData message) → Html message
 rb' = createElement' "rb"
 
-rp ∷ ∀ a b h. ToHtml a b h
+rp ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 rp = createElement "rp"
 
-rp_ ∷ ∀ b h. ToHtml_ b h
+rp_ ∷ ∀ message. Array (Html message) → Html message
 rp_ = createElement_ "rp"
 
-rp' ∷ ∀ a h. ToHtml' a h
+rp' ∷ ∀ message. Array (NodeData message) → Html message
 rp' = createElement' "rp"
 
-rt ∷ ∀ a b h. ToHtml a b h
+rt ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 rt = createElement "rt"
 
-rt_ ∷ ∀ b h. ToHtml_ b h
+rt_ ∷ ∀ message. Array (Html message) → Html message
 rt_ = createElement_ "rt"
 
-rt' ∷ ∀ a h. ToHtml' a h
+rt' ∷ ∀ message. Array (NodeData message) → Html message
 rt' = createElement' "rt"
 
-rtc ∷ ∀ a b h. ToHtml a b h
+rtc ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 rtc = createElement "rtc"
 
-rtc_ ∷ ∀ b h. ToHtml_ b h
+rtc_ ∷ ∀ message. Array (Html message) → Html message
 rtc_ = createElement_ "rtc"
 
-rtc' ∷ ∀ a h. ToHtml' a h
+rtc' ∷ ∀ message. Array (NodeData message) → Html message
 rtc' = createElement' "rtc"
 
-ruby ∷ ∀ a b h. ToHtml a b h
+ruby ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 ruby = createElement "ruby"
 
-ruby_ ∷ ∀ b h. ToHtml_ b h
+ruby_ ∷ ∀ message. Array (Html message) → Html message
 ruby_ = createElement_ "ruby"
 
-ruby' ∷ ∀ a h. ToHtml' a h
+ruby' ∷ ∀ message. Array (NodeData message) → Html message
 ruby' = createElement' "ruby"
 
-s ∷ ∀ a b h. ToHtml a b h
+s ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 s = createElement "s"
 
-s_ ∷ ∀ b h. ToHtml_ b h
+s_ ∷ ∀ message. Array (Html message) → Html message
 s_ = createElement_ "s"
 
-s' ∷ ∀ a h. ToHtml' a h
+s' ∷ ∀ message. Array (NodeData message) → Html message
 s' = createElement' "s"
 
-section ∷ ∀ a b h. ToHtml a b h
+section ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 section = createElement "section"
 
-section_ ∷ ∀ b h. ToHtml_ b h
+section_ ∷ ∀ message. Array (Html message) → Html message
 section_ = createElement_ "section"
 
-section' ∷ ∀ a h. ToHtml' a h
+section' ∷ ∀ message. Array (NodeData message) → Html message
 section' = createElement' "section"
 
-select ∷ ∀ a b h. ToHtml a b h
+select ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 select = createElement "select"
 
-select_ ∷ ∀ b h. ToHtml_ b h
+select_ ∷ ∀ message. Array (Html message) → Html message
 select_ = createElement_ "select"
 
-select' ∷ ∀ a h. ToHtml' a h
+select' ∷ ∀ message. Array (NodeData message) → Html message
 select' = createElement' "select"
 
-small ∷ ∀ a b h. ToHtml a b h
+small ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 small = createElement "small"
 
-small_ ∷ ∀ b h. ToHtml_ b h
+small_ ∷ ∀ message. Array (Html message) → Html message
 small_ = createElement_ "small"
 
-small' ∷ ∀ a h. ToHtml' a h
+small' ∷ ∀ message. Array (NodeData message) → Html message
 small' = createElement' "small"
 
-source ∷ ∀ a b h. ToHtml a b h
+source ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 source = createElement "source"
 
-source_ ∷ ∀ b h. ToHtml_ b h
+source_ ∷ ∀ message. Array (Html message) → Html message
 source_ = createElement_ "source"
 
-source' ∷ ∀ a h. ToHtml' a h
+source' ∷ ∀ message. Array (NodeData message) → Html message
 source' = createElement' "source"
 
-span ∷ ∀ a b h. ToHtml a b h
+span ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 span = createElement "span"
 
-span_ ∷ ∀ b h. ToHtml_ b h
+span_ ∷ ∀ message. Array (Html message) → Html message
 span_ = createElement_ "span"
 
-span' ∷ ∀ a h. ToHtml' a h
+span' ∷ ∀ message. Array (NodeData message) → Html message
 span' = createElement' "span"
 
-strong ∷ ∀ a b h. ToHtml a b h
+strong ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 strong = createElement "strong"
 
-strong_ ∷ ∀ b h. ToHtml_ b h
+strong_ ∷ ∀ message. Array (Html message) → Html message
 strong_ = createElement_ "strong"
 
-strong' ∷ ∀ a h. ToHtml' a h
+strong' ∷ ∀ message. Array (NodeData message) → Html message
 strong' = createElement' "strong"
 
-style ∷ ∀ a b h. ToHtml a b h
+style ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 style = createElement "style"
 
-style_ ∷ ∀ b h. ToHtml_ b h
+style_ ∷ ∀ message. Array (Html message) → Html message
 style_ = createElement_ "style"
 
-style' ∷ ∀ a h. ToHtml' a h
+style' ∷ ∀ message. Array (NodeData message) → Html message
 style' = createElement' "style"
 
-sub ∷ ∀ a b h. ToHtml a b h
+sub ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 sub = createElement "sub"
 
-sub_ ∷ ∀ b h. ToHtml_ b h
+sub_ ∷ ∀ message. Array (Html message) → Html message
 sub_ = createElement_ "sub"
 
-sub' ∷ ∀ a h. ToHtml' a h
+sub' ∷ ∀ message. Array (NodeData message) → Html message
 sub' = createElement' "sub"
 
-summary ∷ ∀ a b h. ToHtml a b h
+summary ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 summary = createElement "summary"
 
-summary_ ∷ ∀ b h. ToHtml_ b h
+summary_ ∷ ∀ message. Array (Html message) → Html message
 summary_ = createElement_ "summary"
 
-summary' ∷ ∀ a h. ToHtml' a h
+summary' ∷ ∀ message. Array (NodeData message) → Html message
 summary' = createElement' "summary"
 
-sup ∷ ∀ a b h. ToHtml a b h
+sup ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 sup = createElement "sup"
 
-sup_ ∷ ∀ b h. ToHtml_ b h
+sup_ ∷ ∀ message. Array (Html message) → Html message
 sup_ = createElement_ "sup"
 
-sup' ∷ ∀ a h. ToHtml' a h
+sup' ∷ ∀ message. Array (NodeData message) → Html message
 sup' = createElement' "sup"
 
-table ∷ ∀ a b h. ToHtml a b h
+table ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 table = createElement "table"
 
-table_ ∷ ∀ b h. ToHtml_ b h
+table_ ∷ ∀ message. Array (Html message) → Html message
 table_ = createElement_ "table"
 
-table' ∷ ∀ a h. ToHtml' a h
+table' ∷ ∀ message. Array (NodeData message) → Html message
 table' = createElement' "table"
 
-tbody ∷ ∀ a b h. ToHtml a b h
+tbody ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 tbody = createElement "tbody"
 
-tbody_ ∷ ∀ b h. ToHtml_ b h
+tbody_ ∷ ∀ message. Array (Html message) → Html message
 tbody_ = createElement_ "tbody"
 
-tbody' ∷ ∀ a h. ToHtml' a h
+tbody' ∷ ∀ message. Array (NodeData message) → Html message
 tbody' = createElement' "tbody"
 
-td ∷ ∀ a b h. ToHtml a b h
+td ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 td = createElement "td"
 
-td_ ∷ ∀ b h. ToHtml_ b h
+td_ ∷ ∀ message. Array (Html message) → Html message
 td_ = createElement_ "td"
 
-td' ∷ ∀ a h. ToHtml' a h
+td' ∷ ∀ message. Array (NodeData message) → Html message
 td' = createElement' "td"
 
-template ∷ ∀ a b h. ToHtml a b h
+template ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 template = createElement "template"
 
-template_ ∷ ∀ b h. ToHtml_ b h
+template_ ∷ ∀ message. Array (Html message) → Html message
 template_ = createElement_ "template"
 
-template' ∷ ∀ a h. ToHtml' a h
+template' ∷ ∀ message. Array (NodeData message) → Html message
 template' = createElement' "template"
 
-textarea ∷ ∀ a b h. ToHtml a b h
+textarea ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 textarea = createElement "textarea"
 
-textarea_ ∷ ∀ b h. ToHtml_ b h
+textarea_ ∷ ∀ message. Array (Html message) → Html message
 textarea_ = createElement_ "textarea"
 
-textarea' ∷ ∀ a h. ToHtml' a h
+textarea' ∷ ∀ message. Array (NodeData message) → Html message
 textarea' = createElement' "textarea"
 
-tfoot ∷ ∀ a b h. ToHtml a b h
+tfoot ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 tfoot = createElement "tfoot"
 
-tfoot_ ∷ ∀ b h. ToHtml_ b h
+tfoot_ ∷ ∀ message. Array (Html message) → Html message
 tfoot_ = createElement_ "tfoot"
 
-tfoot' ∷ ∀ a h. ToHtml' a h
+tfoot' ∷ ∀ message. Array (NodeData message) → Html message
 tfoot' = createElement' "tfoot"
 
-th ∷ ∀ a b h. ToHtml a b h
+th ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 th = createElement "th"
 
-th_ ∷ ∀ b h. ToHtml_ b h
+th_ ∷ ∀ message. Array (Html message) → Html message
 th_ = createElement_ "th"
 
-th' ∷ ∀ a h. ToHtml' a h
+th' ∷ ∀ message. Array (NodeData message) → Html message
 th' = createElement' "th"
 
-thead ∷ ∀ a b h. ToHtml a b h
+thead ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 thead = createElement "thead"
 
-thead_ ∷ ∀ b h. ToHtml_ b h
+thead_ ∷ ∀ message. Array (Html message) → Html message
 thead_ = createElement_ "thead"
 
-thead' ∷ ∀ a h. ToHtml' a h
+thead' ∷ ∀ message. Array (NodeData message) → Html message
 thead' = createElement' "thead"
 
-time ∷ ∀ a b h. ToHtml a b h
+time ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 time = createElement "time"
 
-time_ ∷ ∀ b h. ToHtml_ b h
+time_ ∷ ∀ message. Array (Html message) → Html message
 time_ = createElement_ "time"
 
-time' ∷ ∀ a h. ToHtml' a h
+time' ∷ ∀ message. Array (NodeData message) → Html message
 time' = createElement' "time"
 
-title ∷ ∀ b h. ToHtml_ b h
+title ∷ ∀ message. Array (Html message) → Html message
 title = createElement_ "title"
 
-tr ∷ ∀ a b h. ToHtml a b h
+tr ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 tr = createElement "tr"
 
-tr_ ∷ ∀ b h. ToHtml_ b h
+tr_ ∷ ∀ message. Array (Html message) → Html message
 tr_ = createElement_ "tr"
 
-tr' ∷ ∀ a h. ToHtml' a h
+tr' ∷ ∀ message. Array (NodeData message) → Html message
 tr' = createElement' "tr"
 
-track ∷ ∀ a b h. ToHtml a b h
+track ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 track = createElement "track"
 
-track_ ∷ ∀ b h. ToHtml_ b h
+track_ ∷ ∀ message. Array (Html message) → Html message
 track_ = createElement_ "track"
 
-track' ∷ ∀ a h. ToHtml' a h
+track' ∷ ∀ message. Array (NodeData message) → Html message
 track' = createElement' "track"
 
-u ∷ ∀ a b h. ToHtml a b h
+u ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 u = createElement "u"
 
-u_ ∷ ∀ b h. ToHtml_ b h
+u_ ∷ ∀ message. Array (Html message) → Html message
 u_ = createElement_ "u"
 
-u' ∷ ∀ a h. ToHtml' a h
+u' ∷ ∀ message. Array (NodeData message) → Html message
 u' = createElement' "u"
 
-ul ∷ ∀ a b h. ToHtml a b h
+ul ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 ul = createElement "ul"
 
-ul_ ∷ ∀ b h. ToHtml_ b h
+ul_ ∷ ∀ message. Array (Html message) → Html message
 ul_ = createElement_ "ul"
 
-ul' ∷ ∀ a h. ToHtml' a h
+ul' ∷ ∀ message. Array (NodeData message) → Html message
 ul' = createElement' "ul"
 
-var ∷ ∀ a b h. ToHtml a b h
+var ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 var = createElement "var"
 
-var_ ∷ ∀ b h. ToHtml_ b h
+var_ ∷ ∀ message. Array (Html message) → Html message
 var_ = createElement_ "var"
 
-var' ∷ ∀ a h. ToHtml' a h
+var' ∷ ∀ message. Array (NodeData message) → Html message
 var' = createElement' "var"
 
-video ∷ ∀ a b h. ToHtml a b h
+video ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 video = createElement "video"
 
-video_ ∷ ∀ b h. ToHtml_ b h
+video_ ∷ ∀ message. Array (Html message) → Html message
 video_ = createElement_ "video"
 
-video' ∷ ∀ a h. ToHtml' a h
+video' ∷ ∀ message. Array (NodeData message) → Html message
 video' = createElement' "video"
 
-wbr ∷ ∀ a b h. ToHtml a b h
+wbr ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 wbr = createElement "wbr"
 
-wbr_ ∷ ∀ b h. ToHtml_ b h
+wbr_ ∷ ∀ message. Array (Html message) → Html message
 wbr_ = createElement_ "wbr"
 
-wbr' ∷ ∀ a h. ToHtml' a h
+wbr' ∷ ∀ message. Array (NodeData message) → Html message
 wbr' = createElement' "wbr"
 
-animate ∷ ∀ a b h. ToHtml a b h
+animate ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 animate = createElement "animate"
 
-animate_ ∷ ∀ b h. ToHtml_ b h
+animate_ ∷ ∀ message. Array (Html message) → Html message
 animate_ = createElement_ "animate"
 
-animate' ∷ ∀ a h. ToHtml' a h
+animate' ∷ ∀ message. Array (NodeData message) → Html message
 animate' = createElement' "animate"
 
-animateColor ∷ ∀ a b h. ToHtml a b h
+animateColor ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 animateColor = createElement "animateColor"
 
-animateColor_ ∷ ∀ b h. ToHtml_ b h
+animateColor_ ∷ ∀ message. Array (Html message) → Html message
 animateColor_ = createElement_ "animateColor"
 
-animateColor' ∷ ∀ a h. ToHtml' a h
+animateColor' ∷ ∀ message. Array (NodeData message) → Html message
 animateColor' = createElement' "animateColor"
 
-animateMotion ∷ ∀ a b h. ToHtml a b h
+animateMotion ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 animateMotion = createElement "animateMotion"
 
-animateMotion_ ∷ ∀ b h. ToHtml_ b h
+animateMotion_ ∷ ∀ message. Array (Html message) → Html message
 animateMotion_ = createElement_ "animateMotion"
 
-animateMotion' ∷ ∀ a h. ToHtml' a h
+animateMotion' ∷ ∀ message. Array (NodeData message) → Html message
 animateMotion' = createElement' "animateMotion"
 
-animateTransform ∷ ∀ a b h. ToHtml a b h
+animateTransform ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 animateTransform = createElement "animateTransform"
 
-animateTransform_ ∷ ∀ b h. ToHtml_ b h
+animateTransform_ ∷ ∀ message. Array (Html message) → Html message
 animateTransform_ = createElement_ "animateTransform"
 
-animateTransform' ∷ ∀ a h. ToHtml' a h
+animateTransform' ∷ ∀ message. Array (NodeData message) → Html message
 animateTransform' = createElement' "animateTransform"
 
-circle ∷ ∀ a b h. ToHtml a b h
+circle ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 circle = createElement "circle"
 
-circle_ ∷ ∀ b h. ToHtml_ b h
+circle_ ∷ ∀ message. Array (Html message) → Html message
 circle_ = createElement_ "circle"
 
-circle' ∷ ∀ a h. ToHtml' a h
+circle' ∷ ∀ message. Array (NodeData message) → Html message
 circle' = createElement' "circle"
 
-clipPath ∷ ∀ a b h. ToHtml a b h
+clipPath ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 clipPath = createElement "clipPath"
 
-clipPath_ ∷ ∀ b h. ToHtml_ b h
+clipPath_ ∷ ∀ message. Array (Html message) → Html message
 clipPath_ = createElement_ "clipPath"
 
-clipPath' ∷ ∀ a h. ToHtml' a h
+clipPath' ∷ ∀ message. Array (NodeData message) → Html message
 clipPath' = createElement' "clipPath"
 
-colorProfile ∷ ∀ a b h. ToHtml a b h
+colorProfile ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 colorProfile = createElement "color-profile"
 
-colorProfile_ ∷ ∀ b h. ToHtml_ b h
+colorProfile_ ∷ ∀ message. Array (Html message) → Html message
 colorProfile_ = createElement_ "color-profile"
 
-colorProfile' ∷ ∀ a h. ToHtml' a h
+colorProfile' ∷ ∀ message. Array (NodeData message) → Html message
 colorProfile' = createElement' "color-profile"
 
-cursor ∷ ∀ a b h. ToHtml a b h
+cursor ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 cursor = createElement "cursor"
 
-cursor_ ∷ ∀ b h. ToHtml_ b h
+cursor_ ∷ ∀ message. Array (Html message) → Html message
 cursor_ = createElement_ "cursor"
 
-cursor' ∷ ∀ a h. ToHtml' a h
+cursor' ∷ ∀ message. Array (NodeData message) → Html message
 cursor' = createElement' "cursor"
 
-defs ∷ ∀ a b h. ToHtml a b h
+defs ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 defs = createElement "defs"
 
-defs_ ∷ ∀ b h. ToHtml_ b h
+defs_ ∷ ∀ message. Array (Html message) → Html message
 defs_ = createElement_ "defs"
 
-defs' ∷ ∀ a h. ToHtml' a h
+defs' ∷ ∀ message. Array (NodeData message) → Html message
 defs' = createElement' "defs"
 
-desc ∷ ∀ a b h. ToHtml a b h
+desc ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 desc = createElement "desc"
 
-desc_ ∷ ∀ b h. ToHtml_ b h
+desc_ ∷ ∀ message. Array (Html message) → Html message
 desc_ = createElement_ "desc"
 
-desc' ∷ ∀ a h. ToHtml' a h
+desc' ∷ ∀ message. Array (NodeData message) → Html message
 desc' = createElement' "desc"
 
-discard ∷ ∀ a b h. ToHtml a b h
+discard ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 discard = createElement "discard"
 
-discard_ ∷ ∀ b h. ToHtml_ b h
+discard_ ∷ ∀ message. Array (Html message) → Html message
 discard_ = createElement_ "discard"
 
-discard' ∷ ∀ a h. ToHtml' a h
+discard' ∷ ∀ message. Array (NodeData message) → Html message
 discard' = createElement' "discard"
 
-ellipse ∷ ∀ a b h. ToHtml a b h
+ellipse ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 ellipse = createElement "ellipse"
 
-ellipse_ ∷ ∀ b h. ToHtml_ b h
+ellipse_ ∷ ∀ message. Array (Html message) → Html message
 ellipse_ = createElement_ "ellipse"
 
-ellipse' ∷ ∀ a h. ToHtml' a h
+ellipse' ∷ ∀ message. Array (NodeData message) → Html message
 ellipse' = createElement' "ellipse"
 
-feBlend ∷ ∀ a b h. ToHtml a b h
+feBlend ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feBlend = createElement "feBlend"
 
-feBlend_ ∷ ∀ b h. ToHtml_ b h
+feBlend_ ∷ ∀ message. Array (Html message) → Html message
 feBlend_ = createElement_ "feBlend"
 
-feBlend' ∷ ∀ a h. ToHtml' a h
+feBlend' ∷ ∀ message. Array (NodeData message) → Html message
 feBlend' = createElement' "feBlend"
 
-feColorMatrix ∷ ∀ a b h. ToHtml a b h
+feColorMatrix ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feColorMatrix = createElement "feColorMatrix"
 
-feColorMatrix_ ∷ ∀ b h. ToHtml_ b h
+feColorMatrix_ ∷ ∀ message. Array (Html message) → Html message
 feColorMatrix_ = createElement_ "feColorMatrix"
 
-feColorMatrix' ∷ ∀ a h. ToHtml' a h
+feColorMatrix' ∷ ∀ message. Array (NodeData message) → Html message
 feColorMatrix' = createElement' "feColorMatrix"
 
-feComponentTransfer ∷ ∀ a b h. ToHtml a b h
+feComponentTransfer ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feComponentTransfer = createElement "feComponentTransfer"
 
-feComponentTransfer_ ∷ ∀ b h. ToHtml_ b h
+feComponentTransfer_ ∷ ∀ message. Array (Html message) → Html message
 feComponentTransfer_ = createElement_ "feComponentTransfer"
 
-feComponentTransfer' ∷ ∀ a h. ToHtml' a h
+feComponentTransfer' ∷ ∀ message. Array (NodeData message) → Html message
 feComponentTransfer' = createElement' "feComponentTransfer"
 
-feComposite ∷ ∀ a b h. ToHtml a b h
+feComposite ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feComposite = createElement "feComposite"
 
-feComposite_ ∷ ∀ b h. ToHtml_ b h
+feComposite_ ∷ ∀ message. Array (Html message) → Html message
 feComposite_ = createElement_ "feComposite"
 
-feComposite' ∷ ∀ a h. ToHtml' a h
+feComposite' ∷ ∀ message. Array (NodeData message) → Html message
 feComposite' = createElement' "feComposite"
 
-feConvolveMatrix ∷ ∀ a b h. ToHtml a b h
+feConvolveMatrix ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feConvolveMatrix = createElement "feConvolveMatrix"
 
-feConvolveMatrix_ ∷ ∀ b h. ToHtml_ b h
+feConvolveMatrix_ ∷ ∀ message. Array (Html message) → Html message
 feConvolveMatrix_ = createElement_ "feConvolveMatrix"
 
-feConvolveMatrix' ∷ ∀ a h. ToHtml' a h
+feConvolveMatrix' ∷ ∀ message. Array (NodeData message) → Html message
 feConvolveMatrix' = createElement' "feConvolveMatrix"
 
-feDiffuseLighting ∷ ∀ a b h. ToHtml a b h
+feDiffuseLighting ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feDiffuseLighting = createElement "feDiffuseLighting"
 
-feDiffuseLighting_ ∷ ∀ b h. ToHtml_ b h
+feDiffuseLighting_ ∷ ∀ message. Array (Html message) → Html message
 feDiffuseLighting_ = createElement_ "feDiffuseLighting"
 
-feDiffuseLighting' ∷ ∀ a h. ToHtml' a h
+feDiffuseLighting' ∷ ∀ message. Array (NodeData message) → Html message
 feDiffuseLighting' = createElement' "feDiffuseLighting"
 
-feDisplacementMap ∷ ∀ a b h. ToHtml a b h
+feDisplacementMap ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feDisplacementMap = createElement "feDisplacementMap"
 
-feDisplacementMap_ ∷ ∀ b h. ToHtml_ b h
+feDisplacementMap_ ∷ ∀ message. Array (Html message) → Html message
 feDisplacementMap_ = createElement_ "feDisplacementMap"
 
-feDisplacementMap' ∷ ∀ a h. ToHtml' a h
+feDisplacementMap' ∷ ∀ message. Array (NodeData message) → Html message
 feDisplacementMap' = createElement' "feDisplacementMap"
 
-feDistantLight ∷ ∀ a b h. ToHtml a b h
+feDistantLight ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feDistantLight = createElement "feDistantLight"
 
-feDistantLight_ ∷ ∀ b h. ToHtml_ b h
+feDistantLight_ ∷ ∀ message. Array (Html message) → Html message
 feDistantLight_ = createElement_ "feDistantLight"
 
-feDistantLight' ∷ ∀ a h. ToHtml' a h
+feDistantLight' ∷ ∀ message. Array (NodeData message) → Html message
 feDistantLight' = createElement' "feDistantLight"
 
-feDropShadow ∷ ∀ a b h. ToHtml a b h
+feDropShadow ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feDropShadow = createElement "feDropShadow"
 
-feDropShadow_ ∷ ∀ b h. ToHtml_ b h
+feDropShadow_ ∷ ∀ message. Array (Html message) → Html message
 feDropShadow_ = createElement_ "feDropShadow"
 
-feDropShadow' ∷ ∀ a h. ToHtml' a h
+feDropShadow' ∷ ∀ message. Array (NodeData message) → Html message
 feDropShadow' = createElement' "feDropShadow"
 
-feFlood ∷ ∀ a b h. ToHtml a b h
+feFlood ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feFlood = createElement "feFlood"
 
-feFlood_ ∷ ∀ b h. ToHtml_ b h
+feFlood_ ∷ ∀ message. Array (Html message) → Html message
 feFlood_ = createElement_ "feFlood"
 
-feFlood' ∷ ∀ a h. ToHtml' a h
+feFlood' ∷ ∀ message. Array (NodeData message) → Html message
 feFlood' = createElement' "feFlood"
 
-feFuncA ∷ ∀ a b h. ToHtml a b h
+feFuncA ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feFuncA = createElement "feFuncA"
 
-feFuncA_ ∷ ∀ b h. ToHtml_ b h
+feFuncA_ ∷ ∀ message. Array (Html message) → Html message
 feFuncA_ = createElement_ "feFuncA"
 
-feFuncA' ∷ ∀ a h. ToHtml' a h
+feFuncA' ∷ ∀ message. Array (NodeData message) → Html message
 feFuncA' = createElement' "feFuncA"
 
-feFuncB ∷ ∀ a b h. ToHtml a b h
+feFuncB ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feFuncB = createElement "feFuncB"
 
-feFuncB_ ∷ ∀ b h. ToHtml_ b h
+feFuncB_ ∷ ∀ message. Array (Html message) → Html message
 feFuncB_ = createElement_ "feFuncB"
 
-feFuncB' ∷ ∀ a h. ToHtml' a h
+feFuncB' ∷ ∀ message. Array (NodeData message) → Html message
 feFuncB' = createElement' "feFuncB"
 
-feFuncG ∷ ∀ a b h. ToHtml a b h
+feFuncG ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feFuncG = createElement "feFuncG"
 
-feFuncG_ ∷ ∀ b h. ToHtml_ b h
+feFuncG_ ∷ ∀ message. Array (Html message) → Html message
 feFuncG_ = createElement_ "feFuncG"
 
-feFuncG' ∷ ∀ a h. ToHtml' a h
+feFuncG' ∷ ∀ message. Array (NodeData message) → Html message
 feFuncG' = createElement' "feFuncG"
 
-feFuncR ∷ ∀ a b h. ToHtml a b h
+feFuncR ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feFuncR = createElement "feFuncR"
 
-feFuncR_ ∷ ∀ b h. ToHtml_ b h
+feFuncR_ ∷ ∀ message. Array (Html message) → Html message
 feFuncR_ = createElement_ "feFuncR"
 
-feFuncR' ∷ ∀ a h. ToHtml' a h
+feFuncR' ∷ ∀ message. Array (NodeData message) → Html message
 feFuncR' = createElement' "feFuncR"
 
-feGaussianBlur ∷ ∀ a b h. ToHtml a b h
+feGaussianBlur ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feGaussianBlur = createElement "feGaussianBlur"
 
-feGaussianBlur_ ∷ ∀ b h. ToHtml_ b h
+feGaussianBlur_ ∷ ∀ message. Array (Html message) → Html message
 feGaussianBlur_ = createElement_ "feGaussianBlur"
 
-feGaussianBlur' ∷ ∀ a h. ToHtml' a h
+feGaussianBlur' ∷ ∀ message. Array (NodeData message) → Html message
 feGaussianBlur' = createElement' "feGaussianBlur"
 
-feImage ∷ ∀ a b h. ToHtml a b h
+feImage ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feImage = createElement "feImage"
 
-feImage_ ∷ ∀ b h. ToHtml_ b h
+feImage_ ∷ ∀ message. Array (Html message) → Html message
 feImage_ = createElement_ "feImage"
 
-feImage' ∷ ∀ a h. ToHtml' a h
+feImage' ∷ ∀ message. Array (NodeData message) → Html message
 feImage' = createElement' "feImage"
 
-feMerge ∷ ∀ a b h. ToHtml a b h
+feMerge ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feMerge = createElement "feMerge"
 
-feMerge_ ∷ ∀ b h. ToHtml_ b h
+feMerge_ ∷ ∀ message. Array (Html message) → Html message
 feMerge_ = createElement_ "feMerge"
 
-feMerge' ∷ ∀ a h. ToHtml' a h
+feMerge' ∷ ∀ message. Array (NodeData message) → Html message
 feMerge' = createElement' "feMerge"
 
-feMergeNode ∷ ∀ a b h. ToHtml a b h
+feMergeNode ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feMergeNode = createElement "feMergeNode"
 
-feMergeNode_ ∷ ∀ b h. ToHtml_ b h
+feMergeNode_ ∷ ∀ message. Array (Html message) → Html message
 feMergeNode_ = createElement_ "feMergeNode"
 
-feMergeNode' ∷ ∀ a h. ToHtml' a h
+feMergeNode' ∷ ∀ message. Array (NodeData message) → Html message
 feMergeNode' = createElement' "feMergeNode"
 
-feMorphology ∷ ∀ a b h. ToHtml a b h
+feMorphology ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feMorphology = createElement "feMorphology"
 
-feMorphology_ ∷ ∀ b h. ToHtml_ b h
+feMorphology_ ∷ ∀ message. Array (Html message) → Html message
 feMorphology_ = createElement_ "feMorphology"
 
-feMorphology' ∷ ∀ a h. ToHtml' a h
+feMorphology' ∷ ∀ message. Array (NodeData message) → Html message
 feMorphology' = createElement' "feMorphology"
 
-feOffset ∷ ∀ a b h. ToHtml a b h
+feOffset ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feOffset = createElement "feOffset"
 
-feOffset_ ∷ ∀ b h. ToHtml_ b h
+feOffset_ ∷ ∀ message. Array (Html message) → Html message
 feOffset_ = createElement_ "feOffset"
 
-feOffset' ∷ ∀ a h. ToHtml' a h
+feOffset' ∷ ∀ message. Array (NodeData message) → Html message
 feOffset' = createElement' "feOffset"
 
-fePointLight ∷ ∀ a b h. ToHtml a b h
+fePointLight ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 fePointLight = createElement "fePointLight"
 
-fePointLight_ ∷ ∀ b h. ToHtml_ b h
+fePointLight_ ∷ ∀ message. Array (Html message) → Html message
 fePointLight_ = createElement_ "fePointLight"
 
-fePointLight' ∷ ∀ a h. ToHtml' a h
+fePointLight' ∷ ∀ message. Array (NodeData message) → Html message
 fePointLight' = createElement' "fePointLight"
 
-feSpecularLighting ∷ ∀ a b h. ToHtml a b h
+feSpecularLighting ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feSpecularLighting = createElement "feSpecularLighting"
 
-feSpecularLighting_ ∷ ∀ b h. ToHtml_ b h
+feSpecularLighting_ ∷ ∀ message. Array (Html message) → Html message
 feSpecularLighting_ = createElement_ "feSpecularLighting"
 
-feSpecularLighting' ∷ ∀ a h. ToHtml' a h
+feSpecularLighting' ∷ ∀ message. Array (NodeData message) → Html message
 feSpecularLighting' = createElement' "feSpecularLighting"
 
-feSpotLight ∷ ∀ a b h. ToHtml a b h
+feSpotLight ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feSpotLight = createElement "feSpotLight"
 
-feSpotLight_ ∷ ∀ b h. ToHtml_ b h
+feSpotLight_ ∷ ∀ message. Array (Html message) → Html message
 feSpotLight_ = createElement_ "feSpotLight"
 
-feSpotLight' ∷ ∀ a h. ToHtml' a h
+feSpotLight' ∷ ∀ message. Array (NodeData message) → Html message
 feSpotLight' = createElement' "feSpotLight"
 
-feTile ∷ ∀ a b h. ToHtml a b h
+feTile ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feTile = createElement "feTile"
 
-feTile_ ∷ ∀ b h. ToHtml_ b h
+feTile_ ∷ ∀ message. Array (Html message) → Html message
 feTile_ = createElement_ "feTile"
 
-feTile' ∷ ∀ a h. ToHtml' a h
+feTile' ∷ ∀ message. Array (NodeData message) → Html message
 feTile' = createElement' "feTile"
 
-feTurbulence ∷ ∀ a b h. ToHtml a b h
+feTurbulence ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 feTurbulence = createElement "feTurbulence"
 
-feTurbulence_ ∷ ∀ b h. ToHtml_ b h
+feTurbulence_ ∷ ∀ message. Array (Html message) → Html message
 feTurbulence_ = createElement_ "feTurbulence"
 
-feTurbulence' ∷ ∀ a h. ToHtml' a h
+feTurbulence' ∷ ∀ message. Array (NodeData message) → Html message
 feTurbulence' = createElement' "feTurbulence"
 
-filter ∷ ∀ a b h. ToHtml a b h
+filter ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 filter = createElement "filter"
 
-filter_ ∷ ∀ b h. ToHtml_ b h
+filter_ ∷ ∀ message. Array (Html message) → Html message
 filter_ = createElement_ "filter"
 
-filter' ∷ ∀ a h. ToHtml' a h
+filter' ∷ ∀ message. Array (NodeData message) → Html message
 filter' = createElement' "filter"
 
-font ∷ ∀ a b h. ToHtml a b h
+font ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 font = createElement "font"
 
-font_ ∷ ∀ b h. ToHtml_ b h
+font_ ∷ ∀ message. Array (Html message) → Html message
 font_ = createElement_ "font"
 
-font' ∷ ∀ a h. ToHtml' a h
+font' ∷ ∀ message. Array (NodeData message) → Html message
 font' = createElement' "font"
 
-fontFace ∷ ∀ a b h. ToHtml a b h
+fontFace ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 fontFace = createElement "font-face"
 
-fontFace_ ∷ ∀ b h. ToHtml_ b h
+fontFace_ ∷ ∀ message. Array (Html message) → Html message
 fontFace_ = createElement_ "font-face"
 
-fontFace' ∷ ∀ a h. ToHtml' a h
+fontFace' ∷ ∀ message. Array (NodeData message) → Html message
 fontFace' = createElement' "font-face"
 
-fontFaceFormat ∷ ∀ a b h. ToHtml a b h
+fontFaceFormat ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 fontFaceFormat = createElement "font-face-format"
 
-fontFaceFormat_ ∷ ∀ b h. ToHtml_ b h
+fontFaceFormat_ ∷ ∀ message. Array (Html message) → Html message
 fontFaceFormat_ = createElement_ "font-face-format"
 
-fontFaceFormat' ∷ ∀ a h. ToHtml' a h
+fontFaceFormat' ∷ ∀ message. Array (NodeData message) → Html message
 fontFaceFormat' = createElement' "font-face-format"
 
-fontFaceName ∷ ∀ a b h. ToHtml a b h
+fontFaceName ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 fontFaceName = createElement "font-face-name"
 
-fontFaceName_ ∷ ∀ b h. ToHtml_ b h
+fontFaceName_ ∷ ∀ message. Array (Html message) → Html message
 fontFaceName_ = createElement_ "font-face-name"
 
-fontFaceName' ∷ ∀ a h. ToHtml' a h
+fontFaceName' ∷ ∀ message. Array (NodeData message) → Html message
 fontFaceName' = createElement' "font-face-name"
 
-fontFaceSrc ∷ ∀ a b h. ToHtml a b h
+fontFaceSrc ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 fontFaceSrc = createElement "font-face-src"
 
-fontFaceSrc_ ∷ ∀ b h. ToHtml_ b h
+fontFaceSrc_ ∷ ∀ message. Array (Html message) → Html message
 fontFaceSrc_ = createElement_ "font-face-src"
 
-fontFaceSrc' ∷ ∀ a h. ToHtml' a h
+fontFaceSrc' ∷ ∀ message. Array (NodeData message) → Html message
 fontFaceSrc' = createElement' "font-face-src"
 
-fontFaceUri ∷ ∀ a b h. ToHtml a b h
+fontFaceUri ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 fontFaceUri = createElement "font-face-uri"
 
-fontFaceUri_ ∷ ∀ b h. ToHtml_ b h
+fontFaceUri_ ∷ ∀ message. Array (Html message) → Html message
 fontFaceUri_ = createElement_ "font-face-uri"
 
-fontFaceUri' ∷ ∀ a h. ToHtml' a h
+fontFaceUri' ∷ ∀ message. Array (NodeData message) → Html message
 fontFaceUri' = createElement' "font-face-uri"
 
-foreignObject ∷ ∀ a b h. ToHtml a b h
+foreignObject ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 foreignObject = createElement "foreignObject"
 
-foreignObject_ ∷ ∀ b h. ToHtml_ b h
+foreignObject_ ∷ ∀ message. Array (Html message) → Html message
 foreignObject_ = createElement_ "foreignObject"
 
-foreignObject' ∷ ∀ a h. ToHtml' a h
+foreignObject' ∷ ∀ message. Array (NodeData message) → Html message
 foreignObject' = createElement' "foreignObject"
 
-g ∷ ∀ a b h. ToHtml a b h
+g ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 g = createElement "g"
 
-g_ ∷ ∀ b h. ToHtml_ b h
+g_ ∷ ∀ message. Array (Html message) → Html message
 g_ = createElement_ "g"
 
-g' ∷ ∀ a h. ToHtml' a h
+g' ∷ ∀ message. Array (NodeData message) → Html message
 g' = createElement' "g"
 
-glyph ∷ ∀ a b h. ToHtml a b h
+glyph ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 glyph = createElement "glyph"
 
-glyph_ ∷ ∀ b h. ToHtml_ b h
+glyph_ ∷ ∀ message. Array (Html message) → Html message
 glyph_ = createElement_ "glyph"
 
-glyph' ∷ ∀ a h. ToHtml' a h
+glyph' ∷ ∀ message. Array (NodeData message) → Html message
 glyph' = createElement' "glyph"
 
-glyphRef ∷ ∀ a b h. ToHtml a b h
+glyphRef ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 glyphRef = createElement "glyphRef"
 
-glyphRef_ ∷ ∀ b h. ToHtml_ b h
+glyphRef_ ∷ ∀ message. Array (Html message) → Html message
 glyphRef_ = createElement_ "glyphRef"
 
-glyphRef' ∷ ∀ a h. ToHtml' a h
+glyphRef' ∷ ∀ message. Array (NodeData message) → Html message
 glyphRef' = createElement' "glyphRef"
 
-hatch ∷ ∀ a b h. ToHtml a b h
+hatch ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 hatch = createElement "hatch"
 
-hatch_ ∷ ∀ b h. ToHtml_ b h
+hatch_ ∷ ∀ message. Array (Html message) → Html message
 hatch_ = createElement_ "hatch"
 
-hatch' ∷ ∀ a h. ToHtml' a h
+hatch' ∷ ∀ message. Array (NodeData message) → Html message
 hatch' = createElement' "hatch"
 
-hatchpath ∷ ∀ a b h. ToHtml a b h
+hatchpath ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 hatchpath = createElement "hatchpath"
 
-hatchpath_ ∷ ∀ b h. ToHtml_ b h
+hatchpath_ ∷ ∀ message. Array (Html message) → Html message
 hatchpath_ = createElement_ "hatchpath"
 
-hatchpath' ∷ ∀ a h. ToHtml' a h
+hatchpath' ∷ ∀ message. Array (NodeData message) → Html message
 hatchpath' = createElement' "hatchpath"
 
-hkern ∷ ∀ a b h. ToHtml a b h
+hkern ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 hkern = createElement "hkern"
 
-hkern_ ∷ ∀ b h. ToHtml_ b h
+hkern_ ∷ ∀ message. Array (Html message) → Html message
 hkern_ = createElement_ "hkern"
 
-hkern' ∷ ∀ a h. ToHtml' a h
+hkern' ∷ ∀ message. Array (NodeData message) → Html message
 hkern' = createElement' "hkern"
 
-image ∷ ∀ a b h. ToHtml a b h
+image ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 image = createElement "image"
 
-image_ ∷ ∀ b h. ToHtml_ b h
+image_ ∷ ∀ message. Array (Html message) → Html message
 image_ = createElement_ "image"
 
-image' ∷ ∀ a h. ToHtml' a h
+image' ∷ ∀ message. Array (NodeData message) → Html message
 image' = createElement' "image"
 
-line ∷ ∀ a b h. ToHtml a b h
+line ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 line = createElement "line"
 
-line_ ∷ ∀ b h. ToHtml_ b h
+line_ ∷ ∀ message. Array (Html message) → Html message
 line_ = createElement_ "line"
 
-line' ∷ ∀ a h. ToHtml' a h
+line' ∷ ∀ message. Array (NodeData message) → Html message
 line' = createElement' "line"
 
-linearGradient ∷ ∀ a b h. ToHtml a b h
+linearGradient ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 linearGradient = createElement "linearGradient"
 
-linearGradient_ ∷ ∀ b h. ToHtml_ b h
+linearGradient_ ∷ ∀ message. Array (Html message) → Html message
 linearGradient_ = createElement_ "linearGradient"
 
-linearGradient' ∷ ∀ a h. ToHtml' a h
+linearGradient' ∷ ∀ message. Array (NodeData message) → Html message
 linearGradient' = createElement' "linearGradient"
 
-marker ∷ ∀ a b h. ToHtml a b h
+marker ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 marker = createElement "marker"
 
-marker_ ∷ ∀ b h. ToHtml_ b h
+marker_ ∷ ∀ message. Array (Html message) → Html message
 marker_ = createElement_ "marker"
 
-marker' ∷ ∀ a h. ToHtml' a h
+marker' ∷ ∀ message. Array (NodeData message) → Html message
 marker' = createElement' "marker"
 
-mask ∷ ∀ a b h. ToHtml a b h
+mask ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 mask = createElement "mask"
 
-mask_ ∷ ∀ b h. ToHtml_ b h
+mask_ ∷ ∀ message. Array (Html message) → Html message
 mask_ = createElement_ "mask"
 
-mask' ∷ ∀ a h. ToHtml' a h
+mask' ∷ ∀ message. Array (NodeData message) → Html message
 mask' = createElement' "mask"
 
-mesh ∷ ∀ a b h. ToHtml a b h
+mesh ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 mesh = createElement "mesh"
 
-mesh_ ∷ ∀ b h. ToHtml_ b h
+mesh_ ∷ ∀ message. Array (Html message) → Html message
 mesh_ = createElement_ "mesh"
 
-mesh' ∷ ∀ a h. ToHtml' a h
+mesh' ∷ ∀ message. Array (NodeData message) → Html message
 mesh' = createElement' "mesh"
 
-meshgradient ∷ ∀ a b h. ToHtml a b h
+meshgradient ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 meshgradient = createElement "meshgradient"
 
-meshgradient_ ∷ ∀ b h. ToHtml_ b h
+meshgradient_ ∷ ∀ message. Array (Html message) → Html message
 meshgradient_ = createElement_ "meshgradient"
 
-meshgradient' ∷ ∀ a h. ToHtml' a h
+meshgradient' ∷ ∀ message. Array (NodeData message) → Html message
 meshgradient' = createElement' "meshgradient"
 
-meshpatch ∷ ∀ a b h. ToHtml a b h
+meshpatch ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 meshpatch = createElement "meshpatch"
 
-meshpatch_ ∷ ∀ b h. ToHtml_ b h
+meshpatch_ ∷ ∀ message. Array (Html message) → Html message
 meshpatch_ = createElement_ "meshpatch"
 
-meshpatch' ∷ ∀ a h. ToHtml' a h
+meshpatch' ∷ ∀ message. Array (NodeData message) → Html message
 meshpatch' = createElement' "meshpatch"
 
-meshrow ∷ ∀ a b h. ToHtml a b h
+meshrow ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 meshrow = createElement "meshrow"
 
-meshrow_ ∷ ∀ b h. ToHtml_ b h
+meshrow_ ∷ ∀ message. Array (Html message) → Html message
 meshrow_ = createElement_ "meshrow"
 
-meshrow' ∷ ∀ a h. ToHtml' a h
+meshrow' ∷ ∀ message. Array (NodeData message) → Html message
 meshrow' = createElement' "meshrow"
 
-metadata ∷ ∀ a b h. ToHtml a b h
+metadata ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 metadata = createElement "metadata"
 
-metadata_ ∷ ∀ b h. ToHtml_ b h
+metadata_ ∷ ∀ message. Array (Html message) → Html message
 metadata_ = createElement_ "metadata"
 
-metadata' ∷ ∀ a h. ToHtml' a h
+metadata' ∷ ∀ message. Array (NodeData message) → Html message
 metadata' = createElement' "metadata"
 
-missingGlyph ∷ ∀ a b h. ToHtml a b h
+missingGlyph ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 missingGlyph = createElement "missing-glyph"
 
-missingGlyph_ ∷ ∀ b h. ToHtml_ b h
+missingGlyph_ ∷ ∀ message. Array (Html message) → Html message
 missingGlyph_ = createElement_ "missing-glyph"
 
-missingGlyph' ∷ ∀ a h. ToHtml' a h
+missingGlyph' ∷ ∀ message. Array (NodeData message) → Html message
 missingGlyph' = createElement' "missing-glyph"
 
-mpath ∷ ∀ a b h. ToHtml a b h
+mpath ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 mpath = createElement "mpath"
 
-mpath_ ∷ ∀ b h. ToHtml_ b h
+mpath_ ∷ ∀ message. Array (Html message) → Html message
 mpath_ = createElement_ "mpath"
 
-mpath' ∷ ∀ a h. ToHtml' a h
+mpath' ∷ ∀ message. Array (NodeData message) → Html message
 mpath' = createElement' "mpath"
 
-path ∷ ∀ a b h. ToHtml a b h
+path ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 path = createElement "path"
 
-path_ ∷ ∀ b h. ToHtml_ b h
+path_ ∷ ∀ message. Array (Html message) → Html message
 path_ = createElement_ "path"
 
-path' ∷ ∀ a h. ToHtml' a h
+path' ∷ ∀ message. Array (NodeData message) → Html message
 path' = createElement' "path"
 
-pattern ∷ ∀ a b h. ToHtml a b h
+pattern ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 pattern = createElement "pattern"
 
-pattern_ ∷ ∀ b h. ToHtml_ b h
+pattern_ ∷ ∀ message. Array (Html message) → Html message
 pattern_ = createElement_ "pattern"
 
-pattern' ∷ ∀ a h. ToHtml' a h
+pattern' ∷ ∀ message. Array (NodeData message) → Html message
 pattern' = createElement' "pattern"
 
-polygon ∷ ∀ a b h. ToHtml a b h
+polygon ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 polygon = createElement "polygon"
 
-polygon_ ∷ ∀ b h. ToHtml_ b h
+polygon_ ∷ ∀ message. Array (Html message) → Html message
 polygon_ = createElement_ "polygon"
 
-polygon' ∷ ∀ a h. ToHtml' a h
+polygon' ∷ ∀ message. Array (NodeData message) → Html message
 polygon' = createElement' "polygon"
 
-polyline ∷ ∀ a b h. ToHtml a b h
+polyline ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 polyline = createElement "polyline"
 
-polyline_ ∷ ∀ b h. ToHtml_ b h
+polyline_ ∷ ∀ message. Array (Html message) → Html message
 polyline_ = createElement_ "polyline"
 
-polyline' ∷ ∀ a h. ToHtml' a h
+polyline' ∷ ∀ message. Array (NodeData message) → Html message
 polyline' = createElement' "polyline"
 
-radialGradient ∷ ∀ a b h. ToHtml a b h
+radialGradient ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 radialGradient = createElement "radialGradient"
 
-radialGradient_ ∷ ∀ b h. ToHtml_ b h
+radialGradient_ ∷ ∀ message. Array (Html message) → Html message
 radialGradient_ = createElement_ "radialGradient"
 
-radialGradient' ∷ ∀ a h. ToHtml' a h
+radialGradient' ∷ ∀ message. Array (NodeData message) → Html message
 radialGradient' = createElement' "radialGradient"
 
-rect ∷ ∀ a b h. ToHtml a b h
+rect ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 rect = createElement "rect"
 
-rect_ ∷ ∀ b h. ToHtml_ b h
+rect_ ∷ ∀ message. Array (Html message) → Html message
 rect_ = createElement_ "rect"
 
-rect' ∷ ∀ a h. ToHtml' a h
+rect' ∷ ∀ message. Array (NodeData message) → Html message
 rect' = createElement' "rect"
 
-script ∷ ∀ a b h. ToHtml a b h
+script ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 script = createElement "script"
 
-script_ ∷ ∀ b h. ToHtml_ b h
+script_ ∷ ∀ message. Array (Html message) → Html message
 script_ = createElement_ "script"
 
-script' ∷ ∀ a h. ToHtml' a h
+script' ∷ ∀ message. Array (NodeData message) → Html message
 script' = createElement' "script"
 
-set ∷ ∀ a b h. ToHtml a b h
+set ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 set = createElement "set"
 
-set_ ∷ ∀ b h. ToHtml_ b h
+set_ ∷ ∀ message. Array (Html message) → Html message
 set_ = createElement_ "set"
 
-set' ∷ ∀ a h. ToHtml' a h
+set' ∷ ∀ message. Array (NodeData message) → Html message
 set' = createElement' "set"
 
-solidcolor ∷ ∀ a b h. ToHtml a b h
+solidcolor ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 solidcolor = createElement "solidcolor"
 
-solidcolor_ ∷ ∀ b h. ToHtml_ b h
+solidcolor_ ∷ ∀ message. Array (Html message) → Html message
 solidcolor_ = createElement_ "solidcolor"
 
-solidcolor' ∷ ∀ a h. ToHtml' a h
+solidcolor' ∷ ∀ message. Array (NodeData message) → Html message
 solidcolor' = createElement' "solidcolor"
 
-stop ∷ ∀ a b h. ToHtml a b h
+stop ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 stop = createElement "stop"
 
-stop_ ∷ ∀ b h. ToHtml_ b h
+stop_ ∷ ∀ message. Array (Html message) → Html message
 stop_ = createElement_ "stop"
 
-stop' ∷ ∀ a h. ToHtml' a h
+stop' ∷ ∀ message. Array (NodeData message) → Html message
 stop' = createElement' "stop"
 
-switch ∷ ∀ a b h. ToHtml a b h
+switch ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 switch = createElement "switch"
 
-switch_ ∷ ∀ b h. ToHtml_ b h
+switch_ ∷ ∀ message. Array (Html message) → Html message
 switch_ = createElement_ "switch"
 
-switch' ∷ ∀ a h. ToHtml' a h
+switch' ∷ ∀ message. Array (NodeData message) → Html message
 switch' = createElement' "switch"
 
-symbol ∷ ∀ a b h. ToHtml a b h
+symbol ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 symbol = createElement "symbol"
 
-symbol_ ∷ ∀ b h. ToHtml_ b h
+symbol_ ∷ ∀ message. Array (Html message) → Html message
 symbol_ = createElement_ "symbol"
 
-symbol' ∷ ∀ a h. ToHtml' a h
+symbol' ∷ ∀ message. Array (NodeData message) → Html message
 symbol' = createElement' "symbol"
 
-textPath ∷ ∀ a b h. ToHtml a b h
+textPath ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 textPath = createElement "textPath"
 
-textPath_ ∷ ∀ b h. ToHtml_ b h
+textPath_ ∷ ∀ message. Array (Html message) → Html message
 textPath_ = createElement_ "textPath"
 
-textPath' ∷ ∀ a h. ToHtml' a h
+textPath' ∷ ∀ message. Array (NodeData message) → Html message
 textPath' = createElement' "textPath"
 
-tref ∷ ∀ a b h. ToHtml a b h
+tref ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 tref = createElement "tref"
 
-tref_ ∷ ∀ b h. ToHtml_ b h
+tref_ ∷ ∀ message. Array (Html message) → Html message
 tref_ = createElement_ "tref"
 
-tref' ∷ ∀ a h. ToHtml' a h
+tref' ∷ ∀ message. Array (NodeData message) → Html message
 tref' = createElement' "tref"
 
-tspan ∷ ∀ a b h. ToHtml a b h
+tspan ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 tspan = createElement "tspan"
 
-tspan_ ∷ ∀ b h. ToHtml_ b h
+tspan_ ∷ ∀ message. Array (Html message) → Html message
 tspan_ = createElement_ "tspan"
 
-tspan' ∷ ∀ a h. ToHtml' a h
+tspan' ∷ ∀ message. Array (NodeData message) → Html message
 tspan' = createElement' "tspan"
 
-unknown ∷ ∀ a b h. ToHtml a b h
+unknown ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 unknown = createElement "unknown"
 
-unknown_ ∷ ∀ b h. ToHtml_ b h
+unknown_ ∷ ∀ message. Array (Html message) → Html message
 unknown_ = createElement_ "unknown"
 
-unknown' ∷ ∀ a h. ToHtml' a h
+unknown' ∷ ∀ message. Array (NodeData message) → Html message
 unknown' = createElement' "unknown"
 
-use ∷ ∀ a b h. ToHtml a b h
+use ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 use = createElement "use"
 
-use_ ∷ ∀ b h. ToHtml_ b h
+use_ ∷ ∀ message. Array (Html message) → Html message
 use_ = createElement_ "use"
 
-use' ∷ ∀ a h. ToHtml' a h
+use' ∷ ∀ message. Array (NodeData message) → Html message
 use' = createElement' "use"
 
-view ∷ ∀ a b h. ToHtml a b h
+view ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 view = createElement "view"
 
-view_ ∷ ∀ b h. ToHtml_ b h
+view_ ∷ ∀ message. Array (Html message) → Html message
 view_ = createElement_ "view"
 
-view' ∷ ∀ a h. ToHtml' a h
+view' ∷ ∀ message. Array (NodeData message) → Html message
 view' = createElement' "view"
 
-vkern ∷ ∀ a b h. ToHtml a b h
+vkern ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
 vkern = createElement "vkern"
 
-vkern_ ∷ ∀ b h. ToHtml_ b h
+vkern_ ∷ ∀ message. Array (Html message) → Html message
 vkern_ = createElement_ "vkern"
 
-vkern' ∷ ∀ a h. ToHtml' a h
+vkern' ∷ ∀ message. Array (NodeData message) → Html message
 vkern' = createElement' "vkern"
diff --git a/test/Basic/Application.purs b/test/Basic/Application.purs
index 2f305b9..b99ad29 100755
--- a/test/Basic/Application.purs
+++ b/test/Basic/Application.purs
@@ -40,7 +40,7 @@ update model = case _ of
 
 view ∷ Model → Html Message
 view model = HE.main_
-      [ HE.span [ HA.id "text-output" ] model
+      [ HE.span [ HA.id "text-output" ] [HE.text model]
       ,
         --we add extra events for each input to test if the correct message is used
         HE.input [ HA.id "text-input", HA.type' "text", HA.onInput Current, HA.onFocus Cut, onEnterPressed Submit ]
diff --git a/test/Functor/Basic.purs b/test/Functor/Basic.purs
index 521dbc5..e449070 100644
--- a/test/Functor/Basic.purs
+++ b/test/Functor/Basic.purs
@@ -30,14 +30,14 @@ update model = F.noMessages <<< case _ of
                   Just model' → DM.fromMaybe model $ DA.updateAt index (nestedUpdate model' message) model
 
 view ∷ Model → Html Message
-view model = HE.main "main"
-      [ HE.button [ HA.id "add-button", HA.onClick Add ] "Add"
+view model = HE.main [HA.id "main"]
+      [ HE.button [ HA.id "add-button", HA.onClick Add ] [HE.text "Add"]
       , HE.div_ $ DA.mapWithIndex viewCounter model
       ]
       where
       viewCounter index model' = HE.div [ HA.style { display: "flex" } ]
             [ CounterMessage index <$> nestedView index model'
-            , HE.button [ HA.onClick $ Remove index ] "Remove"
+            , HE.button [ HA.onClick $ Remove index ] [HE.text "Remove"]
             ]
 
 -- | The model represents the state of the app
@@ -56,10 +56,10 @@ nestedUpdate model = case _ of
 
 -- | `view` updates the app markup whenever the model is updated
 nestedView ∷ Int → NestedModel → Html NestedMessage
-nestedView index model = HE.main ("main-" <> show index)
-      [ HE.button [ HA.id ("decrement-button-" <> show index), HA.onClick Decrement ] "-"
-      , HE.span ("text-output-" <> show index) $ show model
-      , HE.button [ HA.id ("increment-button-" <> show index), HA.onClick Increment ] "+"
+nestedView index model = HE.main [HA.id ("main-" <> show index)]
+      [ HE.button [ HA.id ("decrement-button-" <> show index), HA.onClick Decrement ] [HE.text "-"]
+      , HE.span [HA.id ("text-output-" <> show index)] [HE.text $ show model]
+      , HE.button [ HA.id ("increment-button-" <> show index), HA.onClick Increment ] [HE.text "+"]
       ]
 
 mount ∷ Effect Unit
diff --git a/test/Functor/Lazy.purs b/test/Functor/Lazy.purs
index da24f3f..e786aaf 100644
--- a/test/Functor/Lazy.purs
+++ b/test/Functor/Lazy.purs
@@ -1,15 +1,14 @@
 module Test.Functor.Lazy where
 
-import Data.Maybe
-import Effect
-import Flame
-import Flame.Html.Element
+import Data.Maybe (Maybe(..))
+import Effect (Effect)
 import Prelude
 
 import Data.Tuple.Nested ((/\))
+import Flame (Html, Update)
+import Flame as F
 import Flame.Html.Attribute as HA
-import Flame.Html.Element as H
-import Flame.Html.Event as E
+import Flame.Html.Element as HE
 import Web.DOM.ParentNode (QuerySelector(..))
 
 data CounterMsg = Increment Int
@@ -23,11 +22,11 @@ updateCounter ∷ CounterModel → CounterMsg → CounterModel
 updateCounter model (Increment val) = model { count = model.count + val }
 
 counterView ∷ CounterModel → Html CounterMsg
-counterView = lazy Nothing counterView_
+counterView = HE.lazy Nothing counterView_
 
 counterView_ ∷ CounterModel → Html CounterMsg
-counterView_ model = H.main "main"
-      [ H.button [ HA.id "add-button", E.onClick $ Increment 1000 ] [ H.text $ "Current Value: " <> show model.count ]
+counterView_ model = HE.main [ HA.id "main" ]
+      [ HE.button [ HA.id "add-button", HA.onClick $ Increment 1000 ] [ HE.text $ "Current Value: " <> show model.count ]
       ]
 
 data Msg = PageMsg PageMsg
@@ -36,19 +35,19 @@ data PageMsg = CounterMsg CounterMsg
 
 type Model = { counter ∷ CounterModel }
 
-init ∷  { counter ∷ { count :: Int } }
+init ∷ { counter ∷ { count ∷ Int } }
 init = { counter: initCounter }
 
-update :: Update Model Msg
+update ∷ Update Model Msg
 update model (PageMsg (CounterMsg msg)) = model { counter = updateCounter model.counter msg } /\ []
 
 view ∷ Model → Html Msg
-view model = H.div_ [ PageMsg <$> CounterMsg <$> counterView model.counter ]
+view model = HE.div_ [ PageMsg <$> CounterMsg <$> counterView model.counter ]
 
 mount ∷ Effect Unit
-mount = mount_ (QuerySelector "#mount-point")
+mount = F.mount_ (QuerySelector "#mount-point")
       { subscribe: []
-      , model:init
+      , model: init
       , update
       , view
       }
diff --git a/test/Main.purs b/test/Main.purs
index de25aee..21bcbe8 100755
--- a/test/Main.purs
+++ b/test/Main.purs
@@ -74,27 +74,6 @@ foreign import createDiv ∷ Effect Node
 main ∷ Effect Unit
 main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
       TS.describe "Server side virtual node creation" do
-            TS.it "ToHtml instances" do
-                  let html = HE.a [ HA.id "test" ] [ HE.text "TEST" ]
-                  html' ← liftEffect $ FRS.render html
-                  TSA.shouldEqual """<a id="test">TEST</a>""" html'
-
-                  let html2 = HE.a (HA.id "test") [ HE.text "TEST" ]
-                  html2' ← liftEffect $ FRS.render html2
-                  TSA.shouldEqual """<a id="test">TEST</a>""" html2'
-
-                  let html3 = HE.kbd "test" [ HE.text "TEST" ]
-                  html3' ← liftEffect $ FRS.render html3
-                  TSA.shouldEqual """<kbd id="test">TEST</kbd>""" html3'
-
-                  let html4 = HE.a "test" $ HE.text "TEST"
-                  html4' ← liftEffect $ FRS.render html4
-                  TSA.shouldEqual """<a id="test">TEST</a>""" html4'
-
-                  let html5 = HE.a "test" "TEST"
-                  html5' ← liftEffect $ FRS.render html5
-                  TSA.shouldEqual """<a id="test">TEST</a>""" html5'
-
             TS.it "ToClassList instances" do
                   let html = HE.a [ HA.class' "test" ] [ HE.text "TEST" ]
                   html' ← liftEffect $ FRS.render html
@@ -105,7 +84,7 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
                   TSA.shouldEqual """<svg class="test2 test3">TEST</svg>""" html2'
 
             TS.it "inline style" do
-                  let html = HE.a (HA.style { mystyle: "test" }) [ HE.text "TEST" ]
+                  let html = HE.a [ HA.style { mystyle: "test" } ] [ HE.text "TEST" ]
                   html' ← liftEffect $ FRS.render html
                   TSA.shouldEqual """<a style="mystyle: test">TEST</a>""" html'
 
@@ -113,7 +92,7 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
                   html2' ← liftEffect $ FRS.render html2
                   TSA.shouldEqual """<a style="width: 23px; display: none">TEST</a>""" html2'
 
-                  let html3 = HE.a (HA.style1 "mystyle" "test-test") [ HE.text "TEST" ]
+                  let html3 = HE.a [ HA.style1 "mystyle" "test-test" ] [ HE.text "TEST" ]
                   html3' ← liftEffect $ FRS.render html3
                   TSA.shouldEqual """<a style="mystyle: test-test">TEST</a>""" html3'
 
@@ -136,39 +115,39 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
                   TSA.shouldEqual """<a class="a b c">TEST</a>""" html'
 
             TS.it "style/class name case" do
-                  html ← liftEffect <<< FRS.render $ HE.createElement' "element" $ HA.class' "superClass"
+                  html ← liftEffect <<< FRS.render $ HE.createElement' "element" [ HA.class' "superClass" ]
                   TSA.shouldEqual """<element class="super-class"></element>""" html
 
-                  html2 ← liftEffect <<< FRS.render $ HE.createElement' "element" $ HA.class' "SuperClass"
+                  html2 ← liftEffect <<< FRS.render $ HE.createElement' "element" [ HA.class' "SuperClass" ]
                   TSA.shouldEqual """<element class="super-class"></element>""" html2
 
-                  html3 ← liftEffect <<< FRS.render $ HE.createElement' "element" $ HA.class' "MySuperClass my-other-class"
+                  html3 ← liftEffect <<< FRS.render $ HE.createElement' "element" [ HA.class' "MySuperClass my-other-class" ]
                   TSA.shouldEqual """<element class="my-super-class my-other-class"></element>""" html3
 
-                  html4 ← liftEffect <<< FRS.render $ HE.createElement' "element" $ HA.class' "SUPERCLASS"
+                  html4 ← liftEffect <<< FRS.render $ HE.createElement' "element" [ HA.class' "SUPERCLASS" ]
                   TSA.shouldEqual """<element class="superclass"></element>""" html4
 
-                  html5 ← liftEffect <<< FRS.render $ HE.createElement' "element" $ HA.style { borderBox: "23", s: "34", borderLeftTopRadius: "20px" }
+                  html5 ← liftEffect <<< FRS.render $ HE.createElement' "element" [ HA.style { borderBox: "23", s: "34", borderLeftTopRadius: "20px" } ]
                   TSA.shouldEqual """<element style="border-box: 23; s: 34; border-left-top-radius: 20px"></element>""" html5
 
-                  html6 ← liftEffect <<< FRS.render $ HE.createElement' "element" $ HA.class' { borderBox: true, s: false, borderLeftTopRadius: true }
+                  html6 ← liftEffect <<< FRS.render $ HE.createElement' "element" [ HA.class' { borderBox: true, s: false, borderLeftTopRadius: true } ]
                   TSA.shouldEqual """<element class="border-box border-left-top-radius"></element>""" html6
 
             TS.it "custom elements" do
-                  let html = HE.createElement' "custom-element" "test"
+                  let html = HE.createElement' "custom-element" [ HA.id "test" ]
                   html' ← liftEffect $ FRS.render html
                   TSA.shouldEqual """<custom-element id="test"></custom-element>""" html'
 
-                  let html2 = HE.createElement' "custom-element" "test"
+                  let html2 = HE.createElement' "custom-element" [ HA.id "test" ]
                   html2' ← liftEffect $ FRS.render html2
                   TSA.shouldEqual """<custom-element id="test"></custom-element>""" html2'
 
-                  let html3 = HE.createElement_ "custom-element" "test"
+                  let html3 = HE.createElement_ "custom-element" [ HE.text "test" ]
                   html3' ← liftEffect $ FRS.render html3
                   TSA.shouldEqual """<custom-element>test</custom-element>""" html3'
 
             TS.it "lazy nodes" do
-                  let html = HE.lazy Nothing (const (HE.p [ HA.id "p", HA.min "23" ] "TEST")) unit
+                  let html = HE.lazy Nothing (const (HE.p [ HA.id "p", HA.min "23" ] [ HE.text "TEST" ])) unit
                   html' ← liftEffect $ FRS.render html
                   TSA.shouldEqual """<p id="p" min="23">TEST</p>""" html'
 
@@ -182,28 +161,30 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
                   TSA.shouldEqual """<a class="test">TEST</a><a class="test-2">TEST-2</a>""" html'
 
             TS.it "svg nodes" do
-                  let html = HE.svg [ HA.id "oi", HA.class' "ola", HA.viewBox "0 0 23 0" ] <<< HE.path' $ HA.d "234"
+                  let html = HE.svg [ HA.id "oi", HA.class' "ola", HA.viewBox "0 0 23 0" ] [ HE.path' [ HA.d "234" ] ]
                   html' ← liftEffect $ FRS.render html
                   TSA.shouldEqual """<svg class="ola" id="oi" viewBox="0 0 23 0"><path d="234" /></svg>""" html'
 
             TS.it "managed nodes are ignored" do
-                  let html = HE.div [ HA.class' "a b" ] $ HE.managed_ { createNode: const createDiv, updateNode: \e _ _ → pure e } unit
+                  let html = HE.div [ HA.class' "a b" ] [ HE.managed_ { createNode: const createDiv, updateNode: \e _ _ → pure e } unit ]
                   html' ← liftEffect $ FRS.render html
                   TSA.shouldEqual """<div class="a b"></div>""" html'
 
             TS.it "nested elements" do
                   let
                         html = HE.html_
-                              [ HE.head_ [ HE.title "title" ]
+                              [ HE.head_ [ HE.title [ HE.text "title" ] ]
                               , HE.body_
                                       [ HE.main_
-                                              [ HE.button_ "-"
+                                              [ HE.button_ [ HE.text "-" ]
                                               , HE.br
                                               , HE.text "Test"
-                                              , HE.button_ "+"
-                                              , HE.svg (HA.viewBox "0 0 23 0") <<< HE.path' $ HA.d "234"
-                                              , HE.div_ $ HE.div_
-                                                      [ HE.span_ [ HE.a_ "here" ]
+                                              , HE.button_ [ HE.text "+" ]
+                                              , HE.svg [ HA.viewBox "0 0 23 0" ] [ HE.path' [ HA.d "234" ] ]
+                                              , HE.div_
+                                                      [ HE.div_
+                                                              [ HE.span_ [ HE.a_ [ HE.text "here" ] ]
+                                                              ]
                                                       ]
                                               ]
                                       ]
@@ -214,16 +195,18 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
             TS.it "nested nodes with attributes" do
                   let
                         html = HE.html [ HA.lang "en" ]
-                              [ HE.head_ [ HE.title "title" ]
-                              , HE.body "content"
+                              [ HE.head_ [ HE.title [ HE.text "title" ] ]
+                              , HE.body [ HA.id "content" ]
                                       [ HE.main_
-                                              [ HE.button (HA.style { display: "block", width: "20px" }) "-"
+                                              [ HE.button [ HA.style { display: "block", width: "20px" } ] [ HE.text "-" ]
                                               , HE.br
                                               , HE.text "Test"
-                                              , HE.button (HA.createAttribute "my-attribute" "myValue") "+"
+                                              , HE.button [ HA.createAttribute "my-attribute" "myValue" ] [ HE.text "+" ]
                                               , HE.hr' [ HA.style { border: "200px solid blue" } ]
-                                              , HE.div_ $ HE.div_
-                                                      [ HE.span_ [ HE.a_ "here" ]
+                                              , HE.div_
+                                                      [ HE.div_
+                                                              [ HE.span_ [ HE.a_ [ HE.text "here" ] ]
+                                                              ]
                                                       ]
                                               ]
                                       ]
@@ -234,21 +217,21 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
             TS.it "nested nodes with properties and attributes" do
                   let
                         html = HE.html [ HA.lang "en" ]
-                              [ HE.head [ HA.disabled true ] [ HE.title "title" ]
-                              , HE.body "content"
+                              [ HE.head [ HA.disabled true ] [ HE.title [ HE.text "title" ] ]
+                              , HE.body [HA.id "content"]
                                       [ HE.lazy Nothing
                                               ( const
                                                       ( HE.main_
-                                                              [ HE.button (HA.style { display: "block", width: "20px" }) "-"
+                                                              [ HE.button [HA.style { display: "block", width: "20px" }] [HE.text "-"]
                                                               , HE.br
                                                               , HE.text "Test"
-                                                              , HE.button (HA.createAttribute "my-attribute" "myValue") "+"
+                                                              , HE.button [HA.createAttribute "my-attribute" "myValue"] [HE.text "+"]
                                                               , HE.hr' [ HA.autocomplete "off", HA.style { border: "200px solid blue" } ]
-                                                              , HE.div_ $ HE.div_
+                                                              , HE.div_  [HE.div_
                                                                       [
                                                                         --empty data should not be rendered
-                                                                        HE.span (HA.class' "") [ HE.a [ HA.autofocus true ] "here" ]
-                                                                      ]
+                                                                        HE.span [HA.class' ""] [ HE.a [ HA.autofocus true ] [HE.text "here"] ]
+                                                                      ]]
                                                               ]
                                                       )
                                               )
@@ -261,7 +244,7 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
       TS.describe "root node" do
             TS.it "root node is unchanged" do
                   liftEffect unsafeCreateEnviroment
-                  let html = HE.div "test-div" $ HE.input [ HA.id "t", HA.value "a" ]
+                  let html = HE.div [HA.id "test-div"] [ HE.input [ HA.id "t", HA.value "a" ]]
                   void $ mountHtml' html
                   rootNode ← liftEffect $ FAD.querySelector "#mount-point"
                   TSA.shouldSatisfy rootNode DM.isJust
@@ -270,7 +253,7 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
                   liftEffect unsafeCreateEnviroment
                   rootNode ← liftEffect $ unsafeQuerySelector "#mount-point"
                   liftEffect $ innerHtml rootNode """<div id="oi"></div>"""
-                  let html = HE.div "test-div" $ HE.input [ HA.id "t", HA.value "a" ]
+                  let html = HE.div [HA.id "test-div"] [ HE.input [ HA.id "t", HA.value "a" ]]
                   state ← mountHtml' html
                   childrenCount ← childrenNodeLengthOf "#mount-point"
                   TSA.shouldEqual 2 childrenCount
@@ -280,64 +263,64 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
       --we also have to test the translation of virtual nodes to actual dom nodes
       TS.describe "DOM node creation" do
             TS.it "styles" do
-                  let html = HE.a [ HA.id "link", HA.style { border: "solid", margin: "0px" } ] "TEST"
+                  let html = HE.a [ HA.id "link", HA.style { border: "solid", margin: "0px" } ] [HE.text "TEST"]
                   state ← mountHtml html
                   nodeStyle ← getStyle "#link"
                   TSA.shouldEqual "border: solid; margin: 0px;" nodeStyle
 
-                  let updatedHtml = HE.a [ HA.id "link", HA.style { border: "2px", padding: "23px" } ] "TEST"
+                  let updatedHtml = HE.a [ HA.id "link", HA.style { border: "2px", padding: "23px" } ] [HE.text "TEST"]
                   liftEffect $ FRID.resume state updatedHtml
                   updatedNodeStyle ← getStyle "#link"
                   TSA.shouldEqual "border: 2px; padding: 23px;" updatedNodeStyle
 
-                  let emptyUpdatedHtml = HE.a [ HA.id "link", HA.style {} ] "TEST"
+                  let emptyUpdatedHtml = HE.a [ HA.id "link", HA.style {} ] [HE.text "TEST"]
                   liftEffect $ FRID.resume state emptyUpdatedHtml
                   emptyUpdatedNodeStyle ← getStyle "#link"
                   TSA.shouldEqual "" emptyUpdatedNodeStyle
 
-                  let fullUpdatedHtml = HE.a [ HA.id "link", HA.style { "z-index": "3" } ] "TEST"
+                  let fullUpdatedHtml = HE.a [ HA.id "link", HA.style { "z-index": "3" } ] [HE.text "TEST"]
                   liftEffect $ FRID.resume state fullUpdatedHtml
                   fullNodeStyle ← getStyle "#link"
                   TSA.shouldEqual "z-index: 3;" fullNodeStyle
 
             TS.it "element classes" do
-                  let html = HE.p (HA.class' "firstClass secondClass thirdClass") "TEST"
+                  let html = HE.p [HA.class' "firstClass secondClass thirdClass"] [HE.text "TEST"]
                   state ← mountHtml html
                   nodeClass ← getClass "p"
                   TSA.shouldEqual "first-class second-class third-class" nodeClass
 
-                  let updatedHtml = HE.p (HA.class' { firstClass: false }) "TEST"
+                  let updatedHtml = HE.p [HA.class' { firstClass: false }] [HE.text "TEST"]
                   liftEffect $ FRID.resume state updatedHtml
                   updatedNodeClass ← getClass "p"
                   TSA.shouldEqual "" updatedNodeClass
 
-                  let emptyUpdatedHtml = HE.p (HA.class' "") "TEST"
+                  let emptyUpdatedHtml = HE.p [HA.class' ""] [HE.text "TEST"]
                   liftEffect $ FRID.resume state emptyUpdatedHtml
                   emptyUpdatedNodeClass ← getClass "p"
                   TSA.shouldEqual "" emptyUpdatedNodeClass
 
-                  let fullUpdatedHtml = HE.p (HA.class' { some: true, some2: true }) "TEST"
+                  let fullUpdatedHtml = HE.p [HA.class' { some: true, some2: true }] [HE.text "TEST"]
                   liftEffect $ FRID.resume state fullUpdatedHtml
                   fullNodeClass ← getClass "p"
                   TSA.shouldEqual "some some2" fullNodeClass
 
             TS.it "svg classes" do
-                  let html = HE.svg (HA.class' "firstClass secondClass thirdClass") "TEST"
+                  let html = HE.svg [HA.class' "firstClass secondClass thirdClass"] [HE.text "TEST"]
                   state ← mountHtml html
                   nodeClass ← getSvgClass "svg"
                   TSA.shouldEqual (Just "first-class second-class third-class") nodeClass
 
-                  let updatedHtml = HE.svg (HA.class' { firstClass: false }) "TEST"
+                  let updatedHtml = HE.svg [HA.class' { firstClass: false }] [HE.text "TEST"]
                   liftEffect $ FRID.resume state updatedHtml
                   updatedNodeClass ← getSvgClass "svg"
                   TSA.shouldEqual (Just "") updatedNodeClass
 
-                  let emptyUpdatedHtml = HE.svg (HA.class' "") "TEST"
+                  let emptyUpdatedHtml = HE.svg [HA.class' ""] [HE.text "TEST"]
                   liftEffect $ FRID.resume state emptyUpdatedHtml
                   emptyUpdatedNodeClass ← getSvgClass "svg"
                   TSA.shouldEqual (Just "") emptyUpdatedNodeClass
 
-                  let fullUpdatedHtml = HE.svg (HA.class' { some: true, some2: true }) "TEST"
+                  let fullUpdatedHtml = HE.svg [HA.class' { some: true, some2: true }] [HE.text "TEST"]
                   liftEffect $ FRID.resume state fullUpdatedHtml
                   fullNodeClass ← getSvgClass "svg"
                   TSA.shouldEqual (Just "some some2") fullNodeClass
@@ -387,7 +370,7 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
                   TSA.shouldEqual [ "q", "aaa" ] updatedNodeProperties
 
             TS.it "text property of lazy nodes" do
-                  let html = HE.lazy Nothing (const (HE.div_ "oi")) unit
+                  let html = HE.lazy Nothing (const (HE.div_ [HE.text "oi"])) unit
                   void $ mountHtml html
                   text ← textContent "#mount-point"
                   TSA.shouldEqual "oi" text
@@ -424,24 +407,24 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
 
             TS.it "unset text property" do
                   --nodes with a single text node child have the textContent property set
-                  let html = HE.div "test-div" "oi"
+                  let html = HE.div [HA.id "test-div"] [HE.text "oi"]
                   state ← mountHtml html
                   text ← textContent "#test-div"
                   TSA.shouldEqual "oi" text
 
-                  let updatedHtml = HE.div' "test-div"
+                  let updatedHtml = HE.div' [HA.id "test-div"]
                   liftEffect $ FRID.resume state updatedHtml
                   text2 ← textContent "#test-div"
                   TSA.shouldEqual "" text2
 
             TS.it "text to children" do
                   --nodes with a single text node child have the textContent property set
-                  let html = HE.div "test-div" "oi"
+                  let html = HE.div [HA.id "test-div"] [HE.text "oi"]
                   state ← mountHtml html
                   text ← textContent "#test-div"
                   TSA.shouldEqual "oi" text
 
-                  let updatedHtml = HE.div "test-div" [ HE.span_ "ola", HE.div_ "hah", HE.br ]
+                  let updatedHtml = HE.div [HA.id "test-div"] [ HE.span_ [HE.text "ola"], HE.div_ [HE.text "hah"], HE.br ]
                   liftEffect $ FRID.resume state updatedHtml
                   text2 ← textContent "#test-div"
                   --from children
@@ -451,12 +434,12 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
 
             TS.it "children to text" do
                   --nodes with a single text node child have the textContent property set
-                  let html = HE.div "test-div" [ HE.span_ "ola", HE.div_ "hah", HE.br ]
+                  let html = HE.div [HA.id "test-div"] [ HE.span_ [HE.text "ola"], HE.div_ [HE.text "hah"], HE.br ]
                   state ← mountHtml html
                   childrenCount ← childrenNodeLengthOf "#test-div"
                   TSA.shouldEqual 3 childrenCount
 
-                  let updatedHtml = HE.div "test-div" "oi"
+                  let updatedHtml = HE.div [HA.id "test-div"] [HE.text "oi"]
                   liftEffect $ FRID.resume state updatedHtml
                   text ← textContent "#test-div"
                   TSA.shouldEqual "oi" text
@@ -464,9 +447,9 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
                   TSA.shouldEqual 0 childrenCount2
 
             TS.it "update node tag" do
-                  let html = HE.div "test-div" $ HE.input [ HA.id "t", HA.value "a" ]
+                  let html = HE.div [HA.id "test-div"] [ HE.input [ HA.id "t", HA.value "a" ]]
                   state ← mountHtml html
-                  let updatedHtml = HE.span (HA.class' "test-class") $ HE.input [ HA.id "t", HA.value "a" ]
+                  let updatedHtml = HE.span [HA.class' "test-class"] [ HE.input [ HA.id "t", HA.value "a" ]]
                   liftEffect $ FRID.resume state updatedHtml
                   oldElement ← liftEffect $ FAD.querySelector "#test-div"
                   TSA.shouldSatisfy oldElement DM.isNothing
@@ -474,9 +457,9 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
                   TSA.shouldEqual "test-class" nodeClass
 
             TS.it "update node type" do
-                  let html = HE.div "test-div" $ HE.input [ HA.id "t", HA.value "a" ]
+                  let html = HE.div [HA.id "test-div"] [ HE.input [ HA.id "t", HA.value "a" ]]
                   state ← mountHtml html
-                  let updatedHtml = HE.svg' (HA.viewBox "0 0 0 0")
+                  let updatedHtml = HE.svg' [HA.viewBox "0 0 0 0"]
                   liftEffect $ FRID.resume state updatedHtml
                   oldElement ← liftEffect $ FAD.querySelector "#test-div"
                   TSA.shouldSatisfy oldElement DM.isNothing
@@ -484,34 +467,34 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
                   TSA.shouldEqual "viewBox:0 0 0 0" nodeAttributes
 
             TS.it "update fragment to node" do
-                  let html = HE.div "test-div" [ HE.fragment [HE.input [ HA.id "t", HA.value "a" ], HE.br], HE.span_ "ss"]
+                  let html = HE.div [HA.id "test-div"] [ HE.fragment [ HE.input [ HA.id "t", HA.value "a" ], HE.br ], HE.span_ [HE.text "ss"] ]
                   state ← mountHtml html
                   childrenCount ← childrenNodeLengthOf "#test-div"
                   TSA.shouldEqual 3 childrenCount
 
-                  let updatedHtml = HE.div "test-div" [ HE.div_ "aa", HE.span_ "ss"]
+                  let updatedHtml = HE.div [HA.id "test-div"] [ HE.div_ [HE.text "aa"], HE.span_ [HE.text "ss"] ]
                   liftEffect $ FRID.resume state updatedHtml
                   childrenCount2 ← childrenNodeLengthOf "#test-div"
                   TSA.shouldEqual 2 childrenCount2
 
             TS.it "inserting children" do
-                  let html = HE.div' "test-div"
+                  let html = HE.div' [HA.id "test-div"]
                   state ← mountHtml html
-                  let updatedHtml = HE.div "test-div" [ HE.br, HE.hr ]
+                  let updatedHtml = HE.div [HA.id "test-div"] [ HE.br, HE.hr ]
                   liftEffect $ FRID.resume state updatedHtml
                   childrenCount ← childrenNodeLengthOf "#test-div"
                   TSA.shouldEqual 2 childrenCount
 
             TS.it "removing children" do
-                  let html = HE.div "test-div" [ HE.br, HE.hr ]
+                  let html = HE.div [HA.id "test-div"] [ HE.br, HE.hr ]
                   state ← mountHtml html
-                  let updatedHtml = HE.div' "test-div"
+                  let updatedHtml = HE.div' [HA.id "test-div"]
                   liftEffect $ FRID.resume state updatedHtml
                   childrenCount ← childrenNodeLengthOf "#test-div"
                   TSA.shouldEqual 0 childrenCount
 
             TS.it "removing children with innerHtml" do
-                  let html = HE.div "test-div" [ HE.br, HE.hr ]
+                  let html = HE.div [HA.id "test-div"] [ HE.br, HE.hr ]
                   state ← mountHtml html
                   let updatedHtml = HE.div' [ HA.id "test-div", HA.innerHtml "<p>oi</p>" ]
                   liftEffect $ FRID.resume state updatedHtml
@@ -523,7 +506,7 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
             TS.it "removing and inserting children with innerHtml" do
                   let html = HE.div' [ HA.id "test-div", HA.innerHtml "<p>oi</p>" ]
                   state ← mountHtml html
-                  let updatedHtml = HE.div (HA.id "test-div") [ HE.br, HE.hr ]
+                  let updatedHtml = HE.div [HA.id "test-div"] [ HE.br, HE.hr ]
                   liftEffect $ FRID.resume state updatedHtml
                   childrenCount ← childrenNodeLengthOf "#test-div"
                   TSA.shouldEqual 2 childrenCount
@@ -531,9 +514,9 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
                   TSA.shouldSatisfy hr DM.isJust
 
             TS.it "fragments" do
-                  let html = HE.div "test-div" $ HE.input [ HA.id "t", HA.value "a" ]
+                  let html = HE.div [HA.id "test-div"] [ HE.input [ HA.id "t", HA.value "a" ]]
                   state ← mountHtml html
-                  let updatedHtml = HE.fragment $ HE.lazy Nothing (const (HE.svg' (HA.viewBox "0 0 0 0"))) unit
+                  let updatedHtml = HE.fragment [HE.lazy Nothing (const (HE.svg' [HA.viewBox "0 0 0 0"])) unit]
                   liftEffect $ FRID.resume state updatedHtml
                   oldElement ← liftEffect $ FAD.querySelector "#test-div"
                   TSA.shouldSatisfy oldElement DM.isNothing
@@ -565,26 +548,26 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
                   TSA.shouldEqual "test" nodeClass
 
             TS.it "setting inner html" do
-                  let html = HE.div_ $ HE.div' [ HA.id "test-div", HA.innerHtml "<span>Test</span>" ]
+                  let html = HE.div_ [HE.div' [ HA.id "test-div", HA.innerHtml "<span>Test</span>" ]]
                   state ← mountHtml html
                   childrenCount ← childrenNodeLengthOf "#test-div"
                   TSA.shouldEqual 1 childrenCount
 
-                  let updatedHtml = HE.main_ $ HE.div' [ HA.id "test-div", HA.innerHtml "<span>Test</span><hr>" ]
+                  let updatedHtml = HE.main_ [HE.div' [ HA.id "test-div", HA.innerHtml "<span>Test</span><hr>" ]]
                   liftEffect $ FRID.resume state updatedHtml
                   childrenCount2 ← childrenNodeLengthOf "#test-div"
                   TSA.shouldEqual 2 childrenCount2
 
-                  let updatedHtml2 = HE.main_ "oi"
+                  let updatedHtml2 = HE.main_ [HE.text "oi"]
                   liftEffect $ FRID.resume state updatedHtml2
                   oldElement ← liftEffect $ FAD.querySelector "#test-div"
                   TSA.shouldSatisfy oldElement DM.isNothing
 
             TS.it "replacing child nodes (type)" do
-                  let html = HE.div "test-div" $ HE.input [ HA.id "t", HA.value "a" ]
+                  let html = HE.div [HA.id "test-div"] [ HE.input [ HA.id "t", HA.value "a" ]]
                   state ← mountHtml html
 
-                  let updatedHtml = HE.div "test-div" $ HE.svg' (HA.viewBox "0 0 0 0")
+                  let updatedHtml = HE.div [HA.id "test-div"] [HE.svg' [HA.viewBox "0 0 0 0"]]
                   liftEffect $ FRID.resume state updatedHtml
                   oldElement ← liftEffect $ FAD.querySelector "input"
                   TSA.shouldSatisfy oldElement DM.isNothing
@@ -592,10 +575,10 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
                   TSA.shouldEqual "viewBox:0 0 0 0" nodeAttributes
 
             TS.it "replacing child nodes (tag)" do
-                  let html = HE.div "test-div" $ HE.input [ HA.id "t", HA.value "a" ]
+                  let html = HE.div [HA.id "test-div"] [ HE.input [ HA.id "t", HA.value "a" ]]
                   state ← mountHtml html
 
-                  let updatedHtml = HE.div "test-div" $ HE.div_ "test"
+                  let updatedHtml = HE.div [HA.id "test-div"] [HE.div_ [HE.text "test"]]
                   liftEffect $ FRID.resume state updatedHtml
                   oldElement ← liftEffect $ FAD.querySelector "input"
                   TSA.shouldSatisfy oldElement DM.isNothing
@@ -603,10 +586,10 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
                   TSA.shouldEqual "" nodeAttributes
 
             TS.it "replacing child nodes (number of children)" do
-                  let html = HE.div "test-div" [ HE.input [ HA.id "t", HA.value "a" ], HE.div (HA.class' "inside-div") "test", HE.span "test-span" $ HE.br ]
+                  let html = HE.div [HA.id "test-div"] [ HE.input [ HA.id "t", HA.value "a" ], HE.div [HA.class' "inside-div"] [HE.text "test"], HE.span [HA.id "test-span"] [HE.br] ]
                   state ← mountHtml html
 
-                  let updatedHtml = HE.div "test-div" [ HE.main_ "oi", HE.section_ $ HE.hr ]
+                  let updatedHtml = HE.div [HA.id "test-div"] [ HE.main_ [HE.text "oi"], HE.section_  [HE.hr] ]
                   liftEffect $ FRID.resume state updatedHtml
                   oldElements ← liftEffect $ DT.traverse FAD.querySelector [ "input", "#test-div div", "#test-div span" ]
                   TSA.shouldSatisfy oldElements (DA.all DM.isNothing)
@@ -632,37 +615,37 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
 
       TS.describe "keyed" do
             TS.it "common prefix" do
-                  let html = HE.div "test-div" [ HE.span' [ HA.key "1" ], HE.span' [ HA.key "2" ] ]
+                  let html = HE.div [HA.id "test-div"] [ HE.span' [ HA.key "1" ], HE.span' [ HA.key "2" ] ]
                   state ← mountHtml html
-                  let updatedHtml = HE.div "test-div" [ HE.span' [ HA.key "1" ], HE.span' [ HA.key "2" ], HE.span' [ HA.key "3" ] ]
+                  let updatedHtml = HE.div [HA.id "test-div"] [ HE.span' [ HA.key "1" ], HE.span' [ HA.key "2" ], HE.span' [ HA.key "3" ] ]
                   liftEffect $ FRID.resume state updatedHtml
                   childrenCount ← childrenNodeLengthOf "#test-div"
                   TSA.shouldEqual 3 childrenCount
 
             TS.it "common suffix" do
-                  let html = HE.div "test-div" [ HE.span' [ HA.key "2" ], HE.span' [ HA.key "3" ] ]
+                  let html = HE.div [HA.id "test-div"] [ HE.span' [ HA.key "2" ], HE.span' [ HA.key "3" ] ]
                   state ← mountHtml html
-                  let updatedHtml = HE.div "test-div" [ HE.span' [ HA.key "1" ], HE.span' [ HA.key "2" ], HE.span' [ HA.key "3" ] ]
+                  let updatedHtml = HE.div [HA.id "test-div"] [ HE.span' [ HA.key "1" ], HE.span' [ HA.key "2" ], HE.span' [ HA.key "3" ] ]
                   liftEffect $ FRID.resume state updatedHtml
                   childrenCount ← childrenNodeLengthOf "#test-div"
                   TSA.shouldEqual 3 childrenCount
 
             TS.it "swap backwards" do
-                  let html = HE.div "test-div" [ HE.span' [ HA.key "1", HA.id "1" ], HE.span' [ HA.key "2", HA.id "2" ], HE.span' [ HA.key "3", HA.id "3" ] ]
+                  let html = HE.div [HA.id "test-div"] [ HE.span' [ HA.key "1", HA.id "1" ], HE.span' [ HA.key "2", HA.id "2" ], HE.span' [ HA.key "3", HA.id "3" ] ]
                   state ← mountHtml html
                   childrenIds ← childNodeIds "#test-div"
                   TSA.shouldEqual [ "1", "2", "3" ] childrenIds
-                  let updatedHtml = HE.div "test-div" [ HE.span' [ HA.key "3", HA.id "3" ], HE.span' [ HA.key "2", HA.id "2" ], HE.span' [ HA.key "1", HA.id "1" ] ]
+                  let updatedHtml = HE.div [HA.id "test-div"] [ HE.span' [ HA.key "3", HA.id "3" ], HE.span' [ HA.key "2", HA.id "2" ], HE.span' [ HA.key "1", HA.id "1" ] ]
                   liftEffect $ FRID.resume state updatedHtml
                   childrenIdsSwapped ← childNodeIds "#test-div"
                   TSA.shouldEqual [ "3", "2", "1" ] childrenIdsSwapped
 
             TS.it "swap forward" do
-                  let html = HE.div "test-div" [ HE.span' [ HA.key "3", HA.id "3" ], HE.span' [ HA.key "2", HA.id "2" ], HE.span' [ HA.key "1", HA.id "1" ] ]
+                  let html = HE.div [HA.id "test-div"] [ HE.span' [ HA.key "3", HA.id "3" ], HE.span' [ HA.key "2", HA.id "2" ], HE.span' [ HA.key "1", HA.id "1" ] ]
                   state ← mountHtml html
                   childrenIds ← childNodeIds "#test-div"
                   TSA.shouldEqual [ "3", "2", "1" ] childrenIds
-                  let updatedHtml = HE.div "test-div" [ HE.span' [ HA.key "1", HA.id "1" ], HE.span' [ HA.key "2", HA.id "2" ], HE.span' [ HA.key "3", HA.id "3" ] ]
+                  let updatedHtml = HE.div [HA.id "test-div"] [ HE.span' [ HA.key "1", HA.id "1" ], HE.span' [ HA.key "2", HA.id "2" ], HE.span' [ HA.key "3", HA.id "3" ] ]
                   liftEffect $ FRID.resume state updatedHtml
                   childrenIdsSwapped ← childNodeIds "#test-div"
                   TSA.shouldEqual [ "1", "2", "3" ] childrenIdsSwapped
@@ -739,7 +722,6 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
                   current2 ← textContent "#add-button"
                   TSA.shouldEqual "Current Value: 3001" current2
 
-
       TS.describe "Subscription applications" do
             TS.it "application" do
                   id ← liftEffect do
diff --git a/test/ServerSideRendering/Application.purs b/test/ServerSideRendering/Application.purs
index 73a6ed9..d8c36ea 100644
--- a/test/ServerSideRendering/Application.purs
+++ b/test/ServerSideRendering/Application.purs
@@ -34,16 +34,16 @@ update (Model m) message =
 
 -- | `view` is called whenever the model is updated
 view ∷ Model → Html Message
-view model = HE.main "my-id" $ children model <> [ HE.span_ "rendered!" ]
+view model = HE.main [HA.id "my-id"] $ children model <> [ HE.span_ [HE.text "rendered!"] ]
 
 preView ∷ Model → Html Message
-preView model = HE.main "my-id" $ children model
+preView model = HE.main [HA.id "my-id"] $ children model
 
 children ∷ Model → Array (Html Message)
 children (Model model) =
-      [ HE.span "text-output" $ show model
+      [ HE.span [HA.id "text-output"] [ HE.text $ show model]
       , HE.br
-      , HE.button [ HA.id "increment-button", HA.onClick Increment ] "+"
+      , HE.button [ HA.id "increment-button", HA.onClick Increment ] [HE.text "+"]
       ]
 
 preMount ∷ Effect Unit
diff --git a/test/ServerSideRendering/FragmentNode.purs b/test/ServerSideRendering/FragmentNode.purs
index 3208f19..28eb50f 100644
--- a/test/ServerSideRendering/FragmentNode.purs
+++ b/test/ServerSideRendering/FragmentNode.purs
@@ -33,18 +33,18 @@ update (Model m) message =
 
 -- | `view` is called whenever the model is updated
 view ∷ Model → Html Message
-view model = HE.main "my-id" $ children model <> [ HE.span_ "rendered!" ]
+view model = HE.main [HA.id "my-id"] $ children model <> [ HE.span_ [HE.text "rendered!"] ]
 
 preView ∷ Model → Html Message
-preView model = HE.main "my-id" $ children model
+preView model = HE.main [HA.id "my-id"] $ children model
 
 children ∷ Model → Array (Html Message)
 children (Model model) =
       [ HE.fragment
-              [ HE.span "text-output" $ show model
+              [ HE.span [HA.id "text-output"] [ HE.text $ show model]
               , HE.br
               ]
-      , HE.button [ HA.id "increment-button", HA.onClick Increment ] "+"
+      , HE.button [ HA.id "increment-button", HA.onClick Increment ] [HE.text "+"]
       ]
 
 preMount ∷ Effect Unit
diff --git a/test/ServerSideRendering/ManagedNode.purs b/test/ServerSideRendering/ManagedNode.purs
index 2452cd3..1f46812 100644
--- a/test/ServerSideRendering/ManagedNode.purs
+++ b/test/ServerSideRendering/ManagedNode.purs
@@ -42,10 +42,10 @@ update (Model m) message =
 
 -- | `view` is called whenever the model is updated
 view ∷ Model → Html Message
-view model = HE.main "my-id" $ children model
+view model = HE.main [HA.id "my-id"] $ children model
 
 preView ∷ Model → Html Message
-preView model = HE.main "my-id" $ children model
+preView model = HE.main [HA.id "my-id"] $ children model
 
 nodeRenderer ∷ NodeRenderer Int
 nodeRenderer =
@@ -64,7 +64,7 @@ children ∷ Model → Array (Html Message)
 children (Model model) =
       [ HE.managed nodeRenderer [ HA.id "text-output" ] model
       , HE.br
-      , HE.button [ HA.id "increment-button", HA.onClick Increment ] "+"
+      , HE.button [ HA.id "increment-button", HA.onClick Increment ] [HE.text "+"]
       ]
 
 preMount ∷ Effect Unit
diff --git a/test/Subscription/Application.purs b/test/Subscription/Application.purs
index 33d8739..af86f6d 100644
--- a/test/Subscription/Application.purs
+++ b/test/Subscription/Application.purs
@@ -12,6 +12,7 @@ import Effect.Aff (Aff)
 import Flame (Html)
 import Flame as F
 import Flame.Application as FA
+import Flame.Html.Attribute as HA
 import Flame.Html.Element as HE
 import Flame.Types (AppId(..))
 import Web.DOM.ParentNode (QuerySelector(..))
@@ -30,8 +31,8 @@ update model = case _ of
 
 -- | `view` is called whenever the model is updated
 view ∷ Model → Html TEELMessage
-view model = HE.main "main"
-      [ HE.span "text-output" $ show model
+view model = HE.main [HA.id "main"]
+      [ HE.span [HA.id "text-output"] [ HE.text $ show model]
       ]
 
 -- | Mount the application on the given selector
diff --git a/test/Subscription/Broadcast.purs b/test/Subscription/Broadcast.purs
index aff3fa2..1a6c7e9 100644
--- a/test/Subscription/Broadcast.purs
+++ b/test/Subscription/Broadcast.purs
@@ -13,6 +13,7 @@ import Effect.Aff (Aff)
 import Flame (Html)
 import Flame as F
 import Flame.Application as FA
+import Flame.Html.Attribute as HA
 import Flame.Html.Element as HE
 import Flame.Subscription as FS
 import Web.DOM.ParentNode (QuerySelector(..))
@@ -32,8 +33,8 @@ update model = case _ of
 
 -- | `view` is called whenever the model is updated
 view ∷ Model → Html TSBMessage
-view model = HE.main "main"
-      [ HE.span "text-output" $ show model
+view model = HE.main [HA.id "main"]
+      [ HE.span [HA.id "text-output"] [HE.text $ show model]
       ]
 
 -- | Mount the application on the given selector