diff --git a/examples/canvas2d/Main.hs b/examples/canvas2d/Main.hs
index 98407b72..13df877e 100644
--- a/examples/canvas2d/Main.hs
+++ b/examples/canvas2d/Main.hs
@@ -1,3 +1,4 @@
+{-# LANGUAGE CPP #-}
 {-# LANGUAGE RecordWildCards #-}
 {-# LANGUAGE OverloadedStrings #-}
 module Main where
@@ -19,9 +20,9 @@ data Action
 main :: IO ()
 main = do
   [sun, moon, earth] <- replicateM 3 newImage
-  setSrc sun "https://mdn.mozillademos.org/files/1456/Canvas_sun.png"
-  setSrc moon "https://mdn.mozillademos.org/files/1443/Canvas_moon.png"
-  setSrc earth "https://mdn.mozillademos.org/files/1429/Canvas_earth.png"
+  setSrc sun "https://7b40c187-5088-4a99-9118-37d20a2f875e.mdnplay.dev/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations/canvas_sun.png"
+  setSrc moon "https://7b40c187-5088-4a99-9118-37d20a2f875e.mdnplay.dev/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations/canvas_moon.png"
+  setSrc earth "https://7b40c187-5088-4a99-9118-37d20a2f875e.mdnplay.dev/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations/canvas_earth.png"
   startApp App { initialAction = GetTime
                , update = updateModel (sun,moon,earth)
                , ..
@@ -70,6 +71,31 @@ updateModel (sun,moon,earth) (SetTime m@(secs,millis)) _ = m <# do
   drawImage sun 0 0 300 300 ctx
   pure GetTime
 
+#ifndef ghcjs_HOST_OS
+foreign import javascript unsafe "((x) => { x.globalCompositeOperation = 'destination-over'; })"
+  setGlobalCompositeOperation :: Context -> IO ()
+
+foreign import javascript unsafe "((x, y, z, w) => { w.drawImage(x,y,z); })"
+  drawImage' :: Image -> Double -> Double -> Context -> IO ()
+
+foreign import javascript unsafe "(() => { return document.getElementById('canvas').getContext('2d'); })"
+  getCtx :: IO Context
+
+foreign import javascript unsafe "(() => { return new Image(); })"
+  newImage :: IO Image
+
+foreign import javascript unsafe "((x, y) => { x.src = y; })"
+  setSrc :: Image -> MisoString -> IO ()
+
+foreign import javascript unsafe "(() => { return new Date(); })"
+  newDate :: IO JSVal
+
+foreign import javascript unsafe "((x) => { return x.getSeconds(); })"
+  getSecs :: JSVal -> IO Double
+
+foreign import javascript unsafe "((x) => { return x.getMilliseconds(); })"
+  getMillis :: JSVal -> IO Double
+#else
 foreign import javascript unsafe "$1.globalCompositeOperation = 'destination-over';"
   setGlobalCompositeOperation :: Context -> IO ()
 
@@ -93,4 +119,5 @@ foreign import javascript unsafe "$r = $1.getSeconds();"
 
 foreign import javascript unsafe "$r = $1.getMilliseconds();"
   getMillis :: JSVal -> IO Double
+#endif
 
diff --git a/examples/file-reader/Main.hs b/examples/file-reader/Main.hs
index a8063fd4..e6271a06 100644
--- a/examples/file-reader/Main.hs
+++ b/examples/file-reader/Main.hs
@@ -1,3 +1,4 @@
+{-# LANGUAGE CPP                 #-}
 {-# LANGUAGE DeriveGeneric       #-}
 {-# LANGUAGE OverloadedStrings   #-}
 {-# LANGUAGE ScopedTypeVariables #-}
@@ -12,7 +13,11 @@ import           Miso.String
 import           Control.Concurrent.MVar
 
 import GHCJS.Types
+#ifndef ghcjs_HOST_OS
+import GHC.JS.Foreign.Callback
+#else
 import GHCJS.Foreign.Callback
+#endif
 
 -- | Model
 data Model
@@ -71,6 +76,22 @@ viewModel Model {..} = view
       , div_ [] [ text info ]
       ]
 
+#ifndef ghcjs_HOST_OS
+foreign import javascript unsafe "(() => { return new FileReader(); })"
+  newReader :: IO JSVal
+
+foreign import javascript unsafe "((x) => { return x.files[0]; })"
+  getFile :: JSVal -> IO JSVal
+
+foreign import javascript unsafe "((x, y) => { x.onload = y; })"
+  setOnLoad :: JSVal -> Callback (IO ()) -> IO ()
+
+foreign import javascript unsafe "((x) => { return x.result; })"
+  getResult :: JSVal -> IO MisoString
+
+foreign import javascript unsafe "((x, y) => { x.readAsText(y); })"
+  readText :: JSVal -> JSVal -> IO ()
+#else
 foreign import javascript unsafe "$r = new FileReader();"
   newReader :: IO JSVal
 
@@ -85,3 +106,4 @@ foreign import javascript unsafe "$r = $1.result;"
 
 foreign import javascript unsafe "$1.readAsText($2);"
   readText :: JSVal -> JSVal -> IO ()
+#endif
diff --git a/examples/three/Main.hs b/examples/three/Main.hs
index 54d707a1..2ed4e171 100644
--- a/examples/three/Main.hs
+++ b/examples/three/Main.hs
@@ -1,3 +1,4 @@
+{-# LANGUAGE CPP               #-}
 {-# LANGUAGE OverloadedStrings #-}
 {-# LANGUAGE RecordWildCards   #-}
 module Main where
@@ -97,6 +98,61 @@ updateModel ref GetTime m = m <# do
 updateModel _ (SetTime m) _ =
   m <# pure GetTime
 
+#ifndef ghcjs_HOST_OS
+foreign import javascript unsafe "(() => { return new Stats(); })"
+  newStats :: IO JSVal
+
+foreign import javascript unsafe "((x) => { x.begin(); })"
+  statsBegin :: JSVal -> IO ()
+
+foreign import javascript unsafe "((x) => { x.end(); })"
+  statsEnd :: JSVal -> IO ()
+
+foreign import javascript unsafe "((x) => { x.showPanel(0); })"
+  showPanel :: JSVal -> IO ()
+
+foreign import javascript unsafe "(() => { return new THREE.Scene();})"
+  newScene :: IO JSVal
+
+foreign import javascript unsafe "((x,y,z) => { return new THREE.BoxGeometry(x,y,z); })"
+  newBoxGeometry :: Int -> Int -> Int -> IO JSVal
+
+foreign import javascript unsafe "(() => { return new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); })"
+  newCamera :: IO JSVal
+
+foreign import javascript unsafe "((x,y) => { return new THREE.Mesh( x, y ); })"
+  newMesh :: JSVal -> JSVal -> IO JSVal
+
+foreign import javascript unsafe "(() => { return new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); })"
+  newMeshBasicMaterial :: IO JSVal
+
+foreign import javascript unsafe "((x) => { return new THREE.WebGLRenderer({canvas:x, antialias : true}); })"
+  newRenderer :: JSVal -> IO JSVal
+
+foreign import javascript unsafe "((x) => { x.setSize( window.innerWidth, window.innerHeight ); })"
+  setSize :: JSVal -> IO ()
+
+foreign import javascript unsafe "((x, y) => { x.add(y); })"
+  addToScene :: JSVal -> JSVal -> IO ()
+
+foreign import javascript unsafe "((x, y) => { x.position.z = y; })"
+  cameraZ :: JSVal -> Int -> IO ()
+
+foreign import javascript unsafe "((a, y) => { a.rotation.x += y; })"
+  rotateX :: JSVal -> Double -> IO ()
+
+foreign import javascript unsafe "((x, a) => { x.rotation.y += a; })"
+  rotateY :: JSVal -> Double -> IO ()
+
+foreign import javascript unsafe "((x, y, z) => { x.render(y, z); })"
+  render :: JSVal -> JSVal -> JSVal -> IO ()
+
+foreign import javascript unsafe "((x, y) => { x.position.z = y; })"
+  positionCamera :: JSVal -> Double -> IO ()
+
+foreign import javascript unsafe "((x, y) => { x.appendChild( y.domElement ); })"
+  addStatsToDOM :: JSVal -> JSVal -> IO ()
+#else
 foreign import javascript unsafe "$r = new Stats();"
   newStats :: IO JSVal
 
@@ -150,3 +206,4 @@ foreign import javascript unsafe "$1.position.z = $2;"
 
 foreign import javascript unsafe "$1.appendChild( $2.domElement );"
   addStatsToDOM :: JSVal -> JSVal -> IO ()
+#endif