diff --git a/recipes/BookReactHooks/src/Main.purs b/recipes/BookReactHooks/src/Main.purs
index 01016b4b..701b7483 100644
--- a/recipes/BookReactHooks/src/Main.purs
+++ b/recipes/BookReactHooks/src/Main.purs
@@ -13,9 +13,9 @@ import React.Basic.DOM as R
 import React.Basic.Hooks (Component, component)
 import React.Basic.Hooks as React
 import React.Basic.Hooks.Aff (useAff)
-import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 data TextState
@@ -24,24 +24,25 @@ data TextState
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       bookComponent <- mkBookComponent
-      render (bookComponent {}) c
+      render (bookComponent {}) (toElement b)
 
 mkBookComponent :: Component {}
 mkBookComponent = do
   let
     url = "https://elm-lang.org/assets/public-opinion.txt"
   component "Book" \_ -> React.do
-    textState <- useAff unit do
-      result <- Affjax.get ResponseFormat.string url
-      pure case result of
-        Right response
-          | response.status == StatusCode 200 -> Success response.body
-        _ -> Failure
+    textState <-
+      useAff unit do
+        result <- Affjax.get ResponseFormat.string url
+        pure case result of
+          Right response
+            | response.status == StatusCode 200 -> Success response.body
+          _ -> Failure
     pure case textState of
       Nothing -> R.text "Loading..."
       Just Failure -> R.text "I was unable to load your book."
diff --git a/recipes/ButtonsReactHooks/src/Main.purs b/recipes/ButtonsReactHooks/src/Main.purs
index dead0a42..2ebd0085 100644
--- a/recipes/ButtonsReactHooks/src/Main.purs
+++ b/recipes/ButtonsReactHooks/src/Main.purs
@@ -9,19 +9,19 @@ import React.Basic.DOM as R
 import React.Basic.Events (handler_)
 import React.Basic.Hooks (Component, component, useState, (/\))
 import React.Basic.Hooks as React
-import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       buttons <- mkButtons
-      render (buttons {}) c
+      render (buttons {}) (toElement b)
 
 mkButtons :: Component {}
 mkButtons = do
diff --git a/recipes/CardsReactHooks/src/Main.purs b/recipes/CardsReactHooks/src/Main.purs
index 79937e5c..321004fc 100644
--- a/recipes/CardsReactHooks/src/Main.purs
+++ b/recipes/CardsReactHooks/src/Main.purs
@@ -12,19 +12,19 @@ import React.Basic.Hooks (Component, component, useState, (/\))
 import React.Basic.Hooks as React
 import Test.QuickCheck (mkSeed)
 import Test.QuickCheck.Gen (Gen, elements, runGen)
-import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       cardsComponent <- mkCardsComponent
-      render (cardsComponent {}) c
+      render (cardsComponent {}) (toElement b)
 
 mkCardsComponent :: Component {}
 mkCardsComponent = do
diff --git a/recipes/CatGifsReactHooks/src/Main.purs b/recipes/CatGifsReactHooks/src/Main.purs
index be22907e..194b0e4f 100644
--- a/recipes/CatGifsReactHooks/src/Main.purs
+++ b/recipes/CatGifsReactHooks/src/Main.purs
@@ -17,9 +17,9 @@ import React.Basic.Hooks (Component, component, (/\))
 import React.Basic.Hooks as React
 import React.Basic.Hooks.Aff (useAff)
 import React.Basic.Hooks.ResetToken (useResetToken)
-import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 data GifState
@@ -29,12 +29,12 @@ data GifState
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       catGifs <- mkCatGifs
-      render (catGifs {}) c
+      render (catGifs {}) (toElement b)
 
 mkCatGifs :: Component {}
 mkCatGifs = do
diff --git a/recipes/ClockReactHooks/src/Main.purs b/recipes/ClockReactHooks/src/Main.purs
index b127fca3..7c3fdf5c 100644
--- a/recipes/ClockReactHooks/src/Main.purs
+++ b/recipes/ClockReactHooks/src/Main.purs
@@ -13,9 +13,9 @@ import React.Basic.DOM (render)
 import React.Basic.DOM.SVG as SVG
 import React.Basic.Hooks (Component, Hook, JSX, UseEffect, UseState, coerceHook, component, useEffectOnce, useState', (/\))
 import React.Basic.Hooks as React
-import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 type Time
@@ -23,12 +23,12 @@ type Time
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       clock <- mkClock
-      render (clock {}) c
+      render (clock {}) (toElement b)
 
 mkClock :: Component {}
 mkClock = do
diff --git a/recipes/FormsReactHooks/src/Main.purs b/recipes/FormsReactHooks/src/Main.purs
index 7db624da..be1e2329 100644
--- a/recipes/FormsReactHooks/src/Main.purs
+++ b/recipes/FormsReactHooks/src/Main.purs
@@ -10,19 +10,19 @@ import React.Basic.DOM.Events (preventDefault, targetValue)
 import React.Basic.Events (EventHandler, handler)
 import React.Basic.Hooks (Component, component, useState, (/\), Hook, UseState, type (/\))
 import React.Basic.Hooks as React
-import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       form <- mkForm
-      render (form {}) c
+      render (form {}) (toElement b)
 
 mkForm :: Component {}
 mkForm = do
diff --git a/recipes/GroceriesReactHooks/src/Main.purs b/recipes/GroceriesReactHooks/src/Main.purs
index f9113c20..2a4e3012 100644
--- a/recipes/GroceriesReactHooks/src/Main.purs
+++ b/recipes/GroceriesReactHooks/src/Main.purs
@@ -7,19 +7,19 @@ import Effect.Exception (throw)
 import React.Basic.DOM (render)
 import React.Basic.DOM as R
 import React.Basic.Hooks (Component, component)
-import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
+  body <- body =<< document =<< window
+  case body of
     Nothing -> throw "Root element not found."
-    Just c -> do
+    Just b -> do
       groceries <- mkGroceries
-      render (groceries {}) c
+      render (groceries {}) (toElement b)
 
 mkGroceries :: Component {}
 mkGroceries = do
diff --git a/recipes/HelloReactHooks/src/Main.purs b/recipes/HelloReactHooks/src/Main.purs
index 33906f49..ab5713fd 100644
--- a/recipes/HelloReactHooks/src/Main.purs
+++ b/recipes/HelloReactHooks/src/Main.purs
@@ -7,19 +7,19 @@ import Effect.Exception (throw)
 import React.Basic.DOM (render)
 import React.Basic.DOM as R
 import React.Basic.Hooks (Component, component)
-import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       helloComponent <- mkHelloComponent
-      render (helloComponent {}) c
+      render (helloComponent {}) (toElement b)
 
 mkHelloComponent :: Component {}
 mkHelloComponent = do
diff --git a/recipes/NumbersReactHooks/src/Main.purs b/recipes/NumbersReactHooks/src/Main.purs
index a8b77253..3f5b1551 100644
--- a/recipes/NumbersReactHooks/src/Main.purs
+++ b/recipes/NumbersReactHooks/src/Main.purs
@@ -10,19 +10,19 @@ import React.Basic.DOM as R
 import React.Basic.Events (handler_)
 import React.Basic.Hooks (Component, component, useState', (/\))
 import React.Basic.Hooks as React
-import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       numbers <- mkNumbers
-      render (numbers {}) c
+      render (numbers {}) (toElement b)
 
 mkNumbers :: Component {}
 mkNumbers = do
diff --git a/recipes/PositionsReactHooks/src/Main.purs b/recipes/PositionsReactHooks/src/Main.purs
index 88d73c46..9a5a9bd8 100644
--- a/recipes/PositionsReactHooks/src/Main.purs
+++ b/recipes/PositionsReactHooks/src/Main.purs
@@ -10,19 +10,19 @@ import React.Basic.DOM as R
 import React.Basic.Events (handler_)
 import React.Basic.Hooks (Component, component, useState', (/\))
 import React.Basic.Hooks as React
-import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       positions <- mkPositions
-      render (positions {}) c
+      render (positions {}) (toElement b)
 
 mkPositions :: Component {}
 mkPositions = do
diff --git a/recipes/TextFieldsReactHooks/src/Main.purs b/recipes/TextFieldsReactHooks/src/Main.purs
index d97fcfa5..c146bcd3 100644
--- a/recipes/TextFieldsReactHooks/src/Main.purs
+++ b/recipes/TextFieldsReactHooks/src/Main.purs
@@ -12,19 +12,19 @@ import React.Basic.DOM.Events (targetValue)
 import React.Basic.Events (handler)
 import React.Basic.Hooks (Component, component, useState, (/\))
 import React.Basic.Hooks as React
-import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       textField <- mkTextField
-      render (textField {}) c
+      render (textField {}) (toElement b)
 
 mkTextField :: Component {}
 mkTextField = do
diff --git a/recipes/TimeReactHooks/src/Main.purs b/recipes/TimeReactHooks/src/Main.purs
index 95ea61e5..44e60042 100644
--- a/recipes/TimeReactHooks/src/Main.purs
+++ b/recipes/TimeReactHooks/src/Main.purs
@@ -14,9 +14,9 @@ import React.Basic.DOM (render)
 import React.Basic.DOM as R
 import React.Basic.Hooks (Component, Hook, UseEffect, UseState, coerceHook, component, useEffectOnce, useState', (/\))
 import React.Basic.Hooks as React
-import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 type Time
@@ -24,12 +24,12 @@ type Time
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       time <- mkTime
-      render (time {}) c
+      render (time {}) (toElement b)
 
 mkTime :: Component {}
 mkTime = do