diff --git a/common/Mdx.res b/common/Mdx.res
index 3eceec600..f0db0d61d 100644
--- a/common/Mdx.res
+++ b/common/Mdx.res
@@ -48,8 +48,7 @@ module MdxChildren: {
 } = {
   type unknown
 
-  @unboxed
-  type rec t = Any('a): t
+  type t
 
   type case =
     | String(string)
@@ -57,7 +56,7 @@ module MdxChildren: {
     | Array(array<mdxComponent>)
     | Unknown(unknown)
 
-  let classify = (Any(v): t): case =>
+  let classify = (v: t): case =>
     if %raw(`function (a) { return  a instanceof Array}`)(v) {
       Array((Obj.magic(v): array<mdxComponent>))
     } else if Js.typeof(v) == "string" {
diff --git a/common/MetaFrontmatter.js b/common/MetaFrontmatter.js
deleted file mode 100644
index 2de49633d..000000000
--- a/common/MetaFrontmatter.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// Generated by ReScript, PLEASE EDIT WITH CARE
-
-
-function decode(json) {
-  return {
-          TAG: 1,
-          _0: "Not implemented",
-          [Symbol.for("name")]: "Error"
-        };
-}
-
-export {
-  decode ,
-  
-}
-/* No side effect */
diff --git a/common/MetaFrontmatter.res b/common/MetaFrontmatter.res
deleted file mode 100644
index ad4f147c3..000000000
--- a/common/MetaFrontmatter.res
+++ /dev/null
@@ -1,10 +0,0 @@
-// This module is used for accessing meta data from MDX frontmatter
-// It's mostly used in conjunction with the <Meta /> component
-
-// Note: Every optional value in here must be encoded
-// as Js.Null.t, since it will be used for JSON serialization
-// within Next's static generation
-
-type t
-
-let decode = (json: Js.Json.t): result<t, string> => Error("Not implemented")
diff --git a/compilers/README.md b/compilers/README.md
new file mode 100644
index 000000000..37503ac3b
--- /dev/null
+++ b/compilers/README.md
@@ -0,0 +1,5 @@
+# compilers
+
+This folder is needed to install additional rescript compiler versions for testing our documented source code on multiple compiler versions.
+
+Our `scripts/test-examples.js` script will automatically install all package.json dependencies if it cannot find any compiler versions.
diff --git a/compilers/package-lock.json b/compilers/package-lock.json
new file mode 100644
index 000000000..0edc863f2
--- /dev/null
+++ b/compilers/package-lock.json
@@ -0,0 +1,13 @@
+{
+  "name": "compilers",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "rescript-820": {
+      "version": "npm:bs-platform@8.2.0",
+      "resolved": "https://registry.npmjs.org/bs-platform/-/bs-platform-8.2.0.tgz",
+      "integrity": "sha512-quvmUac/ZxGDsT7L5+6RNXrLPvLHkWFownacaqlwVoyAm770bPyupTRU49ALPGk3HpjfD5eE+lpGdOSPtuwJiA=="
+    }
+  }
+}
diff --git a/compilers/package.json b/compilers/package.json
new file mode 100644
index 000000000..4d308f493
--- /dev/null
+++ b/compilers/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "compilers",
+  "private": true,
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "rescript-820": "npm:bs-platform@8.2.0"
+  }
+}
diff --git a/components/ApiMarkdown.res b/components/ApiMarkdown.res
index 78e8f884b..fa48b4f0b 100644
--- a/components/ApiMarkdown.res
+++ b/components/ApiMarkdown.res
@@ -1,7 +1,3 @@
-// This file was automatically converted to ReScript from 'ApiMarkdown.re'
-// Check the output and make sure to delete the original file
-open Util.ReactStuff
-
 /*
    This module is intended for the ODOC like documentation layout.
    It hides the h2 tags and does
diff --git a/components/Button.res b/components/Button.res
index f3fa964fb..9f71c0399 100644
--- a/components/Button.res
+++ b/components/Button.res
@@ -1,5 +1,3 @@
-open Util.ReactStuff
-
 @react.component
 let make = (~children) =>
   <button
diff --git a/components/CodeMirror.js b/components/CodeMirror.js
index ceb9f5845..9b2e912c1 100644
--- a/components/CodeMirror.js
+++ b/components/CodeMirror.js
@@ -82,7 +82,7 @@ var DomUtil = {
 
 var $$Error = {};
 
-function make(rowCol, kind, wrapper, param) {
+function make(rowCol, kind, param) {
   var marker = document.createElement("div");
   var colorClass = kind === "Error" ? "text-fire bg-fire-15" : "text-gold bg-gold-15";
   marker.id = "gutter-marker_" + rowCol[0] + "-" + rowCol[1];
@@ -139,7 +139,7 @@ function updateErrors(state, onMarkerFocus, onMarkerFocusLeave, cm, errors) {
           var marker = make([
                 e.row,
                 e.column
-              ], e.kind, wrapper, undefined);
+              ], e.kind, undefined);
           wrapper.appendChild(marker);
           var row = e.row - 1 | 0;
           var endRow = e.endRow - 1 | 0;
diff --git a/components/CodeMirror.res b/components/CodeMirror.res
index 8b880bc36..797c10366 100644
--- a/components/CodeMirror.res
+++ b/components/CodeMirror.res
@@ -58,7 +58,7 @@ let useWindowWidth: unit => int = %raw(
   }
   return null;
   }
-  ` // Empty array ensures that effect is only run on mount and unmount
+  `
 )
 
 /* The module for interacting with the imperative CodeMirror API */
@@ -112,7 +112,7 @@ module CM = {
   @bs.send
   external setGutterMarker: (t, int, string, Dom.element) => unit = "setGutterMarker"
 
-  @bs.send external clearGutter: (t, string) => unit = ""
+  @bs.send external clearGutter: (t, string) => unit = "clearGutter"
 
   type markPos = {
     line: int,
@@ -211,7 +211,8 @@ module Error = {
 
 module GutterMarker = {
   // Note: this is not a React component
-  let make = (~rowCol: (int, int), ~kind: Error.kind, ~wrapper: Dom.element, ()): Dom.element => { // row, col
+  let make = (~rowCol: (int, int), ~kind: Error.kind, ()): Dom.element => {
+    // row, col
     open DomUtil
 
     let marker = createElement("div")
@@ -269,7 +270,7 @@ let updateErrors = (~state: state, ~onMarkerFocus=?, ~onMarkerFocusLeave=?, ~cm:
     open DomUtil
     open Error
 
-    let marker = GutterMarker.make(~rowCol=(e.row, e.column), ~kind=e.kind, ~wrapper, ())
+    let marker = GutterMarker.make(~rowCol=(e.row, e.column), ~kind=e.kind, ())
 
     wrapper->appendChild(marker)
 
@@ -361,13 +362,13 @@ let make = // props relevant for the react wrapper
   ~lineWrapping=false,
 ): React.element => {
   let inputElement = React.useRef(Js.Nullable.null)
-  let cmRef: React.Ref.t<option<CM.t>> = React.useRef(None)
+  let cmRef: React.ref<option<CM.t>> = React.useRef(None)
   let cmStateRef = React.useRef({marked: []})
 
   let windowWidth = useWindowWidth()
 
   React.useEffect0(() =>
-    switch inputElement->React.Ref.current->Js.Nullable.toOption {
+    switch inputElement.current->Js.Nullable.toOption {
     | Some(input) =>
       let options = CM.Options.t(
         ~theme="material",
@@ -399,14 +400,14 @@ let make = // props relevant for the react wrapper
       // so we need to set the initial value imperatively
       cm->CM.setValue(value)
 
-      React.Ref.setCurrent(cmRef, Some(cm))
+      cmRef.current = Some(cm)
 
       let cleanup = () => {
         /* Js.log2("cleanup", options->CM.Options.mode); */
 
         // This will destroy the CM instance
         cm->CM.toTextArea
-        React.Ref.setCurrent(cmRef, None)
+        cmRef.current = None
       }
 
       Some(cleanup)
@@ -428,12 +429,12 @@ let make = // props relevant for the react wrapper
      By checking if the local state of the CM instance is different
      to the input value, we can sync up both states accordingly
  */
-  switch cmRef->React.Ref.current {
+  switch cmRef.current {
   | Some(cm) =>
     if CM.getValue(cm) === value {
       ()
     } else {
-      let state = cmStateRef->React.Ref.current
+      let state = cmStateRef.current
       cm->CM.operation(() =>
         updateErrors(~onMarkerFocus?, ~onMarkerFocusLeave?, ~state, ~cm, errors)
       )
@@ -454,8 +455,8 @@ let make = // props relevant for the react wrapper
   })->Js.Array2.joinWith(";")
 
   React.useEffect1(() => {
-    let state = cmStateRef->React.Ref.current
-    switch cmRef->React.Ref.current {
+    let state = cmStateRef.current
+    switch cmRef.current {
     | Some(cm) =>
       cm->CM.operation(() =>
         updateErrors(~onMarkerFocus?, ~onMarkerFocusLeave?, ~state, ~cm, errors)
@@ -470,7 +471,7 @@ let make = // props relevant for the react wrapper
       a codemirror instance, or the window has been resized.
  */
   React.useEffect2(() => {
-    switch cmRef->React.Ref.current {
+    switch cmRef.current {
     | Some(cm) => cm->CM.refresh
     | None => ()
     }
diff --git a/components/DocSearch.js b/components/DocSearch.js
index c3014bebc..44d9ad0ca 100644
--- a/components/DocSearch.js
+++ b/components/DocSearch.js
@@ -29,7 +29,7 @@ function DocSearch(Props) {
                   
                 }));
   };
-  var onClick = function (evt) {
+  var onClick = function (param) {
     Curry._1(setState, (function (param) {
             return /* Active */0;
           }));
@@ -39,7 +39,7 @@ function DocSearch(Props) {
                   
                 }));
   };
-  var onBlur = function (evt) {
+  var onBlur = function (param) {
     clearInput(undefined);
     return Curry._1(setState, (function (param) {
                   return /* Inactive */1;
@@ -91,7 +91,7 @@ function DocSearch$Textbox(Props) {
         return /* Inactive */1;
       });
   var setState = match[1];
-  var onClick = function (evt) {
+  var onClick = function (param) {
     Curry._1(setState, (function (param) {
             return /* Active */0;
           }));
@@ -100,7 +100,7 @@ function DocSearch$Textbox(Props) {
                   
                 }));
   };
-  var onBlur = function (evt) {
+  var onBlur = function (param) {
     return Curry._1(setState, (function (param) {
                   return /* Inactive */1;
                 }));
diff --git a/components/DocSearch.res b/components/DocSearch.res
index c824450a1..5e5b5a68f 100644
--- a/components/DocSearch.res
+++ b/components/DocSearch.res
@@ -37,22 +37,21 @@ let make = () => {
   let (state, setState) = React.useState(_ => Inactive)
 
   let focusInput = () =>
-    React.Ref.current(inputRef)->Js.Nullable.toOption->Belt.Option.forEach(el => el->focus)
+    inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->focus)
 
   let clearInput = () =>
-    React.Ref.current(inputRef)->Js.Nullable.toOption->Belt.Option.forEach(el => el->value(""))
+    inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->value(""))
 
-  let blurInput = () =>
-    React.Ref.current(inputRef)->Js.Nullable.toOption->Belt.Option.forEach(el => el->blur)
+  let blurInput = () => inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->blur)
 
-  let onClick = evt => {
+  let onClick = _ => {
     /* ReactEvent.Mouse.preventDefault(evt); */
     setState(_ => Active)
     clearInput()
     focusInput()
   }
 
-  let onBlur = evt => {
+  let onBlur = _ => {
     /* ReactEvent.Focus.preventDefault(evt); */
     /* ReactEvent.Focus.stopPropagation(evt); */
     clearInput()
@@ -113,21 +112,21 @@ module Textbox = {
     let (state, setState) = React.useState(_ => Inactive)
 
     let focusInput = () =>
-      React.Ref.current(inputRef)->Js.Nullable.toOption->Belt.Option.forEach(el => el->focus)
+      inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->focus)
 
-    let clearInput = () =>
-      React.Ref.current(inputRef)->Js.Nullable.toOption->Belt.Option.forEach(el => el->value(""))
+    let _clearInput = () =>
+      inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->value(""))
 
     let blurInput = () =>
-      React.Ref.current(inputRef)->Js.Nullable.toOption->Belt.Option.forEach(el => el->blur)
+      inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->blur)
 
-    let onClick = evt => {
+    let onClick = _ => {
       /* ReactEvent.Mouse.preventDefault(evt); */
       setState(_ => Active)
       focusInput()
     }
 
-    let onBlur = evt =>
+    let onBlur = _ =>
       /* ReactEvent.Focus.preventDefault(evt); */
       /* ReactEvent.Focus.stopPropagation(evt); */
       setState(_ => Inactive)
diff --git a/components/Navigation.res b/components/Navigation.res
index f962ec6b1..9c46855b9 100644
--- a/components/Navigation.res
+++ b/components/Navigation.res
@@ -32,7 +32,7 @@ let linkOrActiveDocsSubroute = (~route) => {
 }
 
 let githubHref = "https://github.com/reason-association/rescript-lang.org#rescript-langorg"
-let twitterHref = "https://twitter.com/rescriptlang"
+//let twitterHref = "https://twitter.com/rescriptlang"
 let discourseHref = "https://forum.rescript-lang.org"
 
 module CollapsibleLink = {
@@ -43,11 +43,11 @@ module CollapsibleLink = {
     | Closed
 
   @react.component
-  let make = (
+  let _make = (
     ~title: string,
     ~onStateChange: (~id: string, state) => unit,
     ~allowHover=true,
-    ~allowInteraction=true,
+    /* ~allowInteraction=true, */
     ~id: string,
     ~state: state,
     ~active=false,
@@ -165,7 +165,7 @@ let useWindowWidth: unit => option<int> = %raw(
   }
   return null;
   }
-  ` // Empty array ensures that effect is only run on mount and unmount
+  `
 )
 
 type collapsible = {
@@ -175,10 +175,12 @@ type collapsible = {
   state: CollapsibleLink.state,
 }
 
+@@warning("-60")
 module SubNav = {
+  @@warning("-60")
   module DocsLinks = {
     @react.component
-    let make = (~route: string) => {
+    let _make = (~route: string) => {
       let reTheme = ColorTheme.toCN(#Reason)
       let jsTheme = ColorTheme.toCN(#Js)
 
@@ -346,7 +348,7 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
 
   let route = router.route
 
-  let (collapsibles, setCollapsibles) = React.useState(_ => [/* { */
+  let (_collapsibles, setCollapsibles) = React.useState(_ => [/* { */
   /* title: "Docs", */
   /* href: "/docs", */
   /* children: route => { */
@@ -374,7 +376,7 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
   let windowWidth = useWindowWidth()
 
   // Don't allow hover behavior for collapsibles if mobile navigation is on
-  let allowHover = switch windowWidth {
+  let _allowHover = switch windowWidth {
   | Some(width) => width > 576 // Value noted in tailwind config
   | None => true
   }
diff --git a/layouts/SidebarLayout.res b/layouts/SidebarLayout.res
index 03f88d3ac..001122424 100644
--- a/layouts/SidebarLayout.res
+++ b/layouts/SidebarLayout.res
@@ -117,7 +117,7 @@ module Sidebar = {
     ~categories: array<Category.t>,
     ~route: string,
     ~toplevelNav=React.null,
-    ~title: option<string>=?,
+    ~title as _: option<string>=?,
     ~preludeSection=React.null,
     ~activeToc: option<Toc.t>=?,
     ~isOpen: bool,
@@ -223,7 +223,7 @@ let make = (
   let breadcrumbs =
     breadcrumbs->Belt.Option.mapWithDefault(React.null, crumbs => <BreadCrumbs crumbs />)
 
-  let (isSidebarOpen, setSidebarOpen) = sidebarState
+  let (_isSidebarOpen, setSidebarOpen) = sidebarState
   let toggleSidebar = () => setSidebarOpen(prev => !prev)
 
   React.useEffect1(() => {
diff --git a/package.json b/package.json
index 561540ab7..a08806458 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^9.5.1",
-    "bs-platform": "8.3.2",
+    "bs-platform": "8.3.3-dev.2",
     "cssnano": "^4.1.10",
     "postcss-cli": "^7.1.1",
     "reanalyze": "^2.5.0",
diff --git a/re_pages/Blog.res b/re_pages/Blog.res
index c3facb268..1c4c1561e 100644
--- a/re_pages/Blog.res
+++ b/re_pages/Blog.res
@@ -96,7 +96,7 @@ module BlogCard = {
   let make = (
     ~previewImg: option<string>=?,
     ~title: string="Unknown Title",
-    ~author: BlogFrontmatter.Author.t,
+    ~author as _: BlogFrontmatter.Author.t,
     ~category: option<string>=?,
     ~badge: option<BlogFrontmatter.Badge.t>=?,
     ~date: Js.Date.t,
diff --git a/re_pages/Playground.js b/re_pages/Playground.js
index 50db3179f..9bbde832a 100644
--- a/re_pages/Playground.js
+++ b/re_pages/Playground.js
@@ -148,10 +148,6 @@ function Playground$Pane(Props) {
                       onMouseDown: onMouseDown
                     }, Util.ReactStuff.s(title));
         }));
-  var tab = Belt_Array.get(tabs, current);
-  if (tab !== undefined) {
-    tab.content;
-  }
   var body = Belt_Array.mapWithIndex(tabs, (function (i, tab) {
           var className = current === i ? "block h-full" : "hidden";
           return React.createElement("div", {
@@ -1313,7 +1309,7 @@ function Playground$WarningFlagsWidget(Props) {
         }, React.createElement(Icon.Close.make, {}));
   }
   var activeClass = isActive ? "border-white" : "border-night-light";
-  var areaOnFocus = function (evt) {
+  var areaOnFocus = function (_evt) {
     if (!isActive) {
       return Belt_Option.forEach(Caml_option.nullable_to_opt(inputRef.current), (function (el) {
                     el.focus();
@@ -1392,16 +1388,6 @@ function Playground$Settings(Props) {
   var setConfig = Props.setConfig;
   var editorCode = Props.editorCode;
   var config = Props.config;
-  var match = readyState.targetLang;
-  switch (match) {
-    case /* Reason */0 :
-        break;
-    case /* OCaml */1 :
-        break;
-    case /* Res */2 :
-        break;
-    
-  }
   var availableTargetLangs = RescriptCompilerApi.Version.availableLanguages(readyState.selected.apiVersion);
   var onTargetLangSelect = function (lang) {
     return Curry._1(dispatch, {
@@ -2134,7 +2120,7 @@ function Playground$default(Props) {
                                               
                                             }),
                                           onMarkerFocus: (function (rowCol) {
-                                              return Curry._1(setFocusedRowCol, (function (prev) {
+                                              return Curry._1(setFocusedRowCol, (function (_prev) {
                                                             return rowCol;
                                                           }));
                                             }),
@@ -2151,7 +2137,6 @@ function Playground$default(Props) {
                                     maxWidth: windowWidth > 1024 ? "56rem" : "100%"
                                   }
                                 }, React.createElement(Playground$OutputPanel, {
-                                      actionIndicatorKey: String(actionCount),
                                       compilerDispatch: compilerDispatch,
                                       compilerState: compilerState,
                                       editorCode: editorCode
diff --git a/re_pages/Playground.res b/re_pages/Playground.res
index ed24a5431..d287642f4 100644
--- a/re_pages/Playground.res
+++ b/re_pages/Playground.res
@@ -150,11 +150,6 @@ module Pane = {
       </button>
     })
 
-    let body = switch Belt.Array.get(tabs, current) {
-    | Some(tab) => tab.content
-    | None => React.null
-    }
-
     let body = Belt.Array.mapWithIndex(tabs, (i, tab) => {
       let className = current === i ? "block h-full" : "hidden"
 
@@ -511,7 +506,7 @@ module ResultPane = {
 }
 
 module WarningFlagsWidget = {
-  @bs.set external scrollTop: (Dom.element, int) => unit = "scrollTop"
+  @bs.set external _scrollTop: (Dom.element, int) => unit = "scrollTop"
   @bs.send external focus: Dom.element => unit = "focus"
   @bs.send
   external scrollIntoView: (Dom.element, @bs.as(json`false`) _) => unit = "scrollIntoView"
@@ -693,10 +688,10 @@ module WarningFlagsWidget = {
     let inputRef = React.useRef(Js.Nullable.null)
 
     let focusInput = () =>
-      React.Ref.current(inputRef)->Js.Nullable.toOption->Belt.Option.forEach(el => el->focus)
+      inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->focus)
 
     let blurInput = () =>
-      React.Ref.current(inputRef)->Js.Nullable.toOption->Belt.Option.forEach(el => el->blur)
+      inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->blur)
 
     let chips = Belt.Array.mapWithIndex(flags, (i, token) => {
       let {WarningFlagDescription.Parser.flag: flag, enabled} = token
@@ -766,7 +761,7 @@ module WarningFlagsWidget = {
       let key = ReactEvent.Keyboard.key(evt)
       let ctrlKey = ReactEvent.Keyboard.ctrlKey(evt)
 
-      let caretPosition = ReactEvent.Keyboard.target(evt)["selectionStart"]
+      /* let caretPosition = ReactEvent.Keyboard.target(evt)["selectionStart"] */
       /* Js.log2("caretPosition", caretPosition); */
 
       let full = (ctrlKey ? "CTRL+" : "") ++ key
@@ -856,7 +851,7 @@ module WarningFlagsWidget = {
           let ref = if selected === i {
             ReactDOMRe.Ref.callbackDomRef(dom => {
               let el = Js.Nullable.toOption(dom)
-              let parent = React.Ref.current(listboxRef)->Js.Nullable.toOption
+              let parent = listboxRef.current->Js.Nullable.toOption
 
               switch (parent, el) {
               | (Some(parent), Some(el)) => scrollToElement(~parent, el)
@@ -969,7 +964,7 @@ module WarningFlagsWidget = {
       "border-night-light"
     }
 
-    let areaOnFocus = evt =>
+    let areaOnFocus = _evt =>
       if !isActive {
         focusInput()
       }
@@ -1018,21 +1013,15 @@ module Settings = {
     ~readyState: CompilerManagerHook.ready,
     ~dispatch: CompilerManagerHook.action => unit,
     ~setConfig: Api.Config.t => unit,
-    ~editorCode: React.Ref.t<string>,
+    ~editorCode: React.ref<string>,
     ~config: Api.Config.t,
   ) => {
     let {Api.Config.warn_flags: warn_flags} = config
 
-    let targetLangVersion = switch readyState.targetLang {
-    | Res => (Api.Lang.Res, readyState.selected.compilerVersion)
-    | Reason => (Reason, readyState.selected.reasonVersion)
-    | OCaml => (OCaml, readyState.selected.ocamlVersion)
-    }
-
     let availableTargetLangs = Api.Version.availableLanguages(readyState.selected.apiVersion)
 
     let onTargetLangSelect = lang =>
-      dispatch(SwitchLanguage({lang: lang, code: React.Ref.current(editorCode)}))
+      dispatch(SwitchLanguage({lang: lang, code: editorCode.current}))
 
     let onWarningFlagsUpdate = flags => {
       let normalizeEmptyFlags = flags =>
@@ -1211,7 +1200,7 @@ module ControlPanel = {
     ~actionIndicatorKey: string,
     ~state: CompilerManagerHook.state,
     ~dispatch: CompilerManagerHook.action => unit,
-    ~editorCode: React.Ref.t<string>,
+    ~editorCode: React.ref<string>,
   ) => {
     let router = Next.Router.useRouter()
     let children = switch state {
@@ -1221,7 +1210,7 @@ module ControlPanel = {
     | Ready(ready) =>
       let onFormatClick = evt => {
         ReactEvent.Mouse.preventDefault(evt)
-        dispatch(Format(React.Ref.current(editorCode)))
+        dispatch(Format(editorCode.current))
       }
 
       let createShareLink = () => {
@@ -1232,7 +1221,7 @@ module ControlPanel = {
 
         Js.Array2.push(
           params,
-          ("code", editorCode->React.Ref.current->LzString.compressToEncodedURIComponent),
+          ("code", editorCode.current->LzString.compressToEncodedURIComponent),
         )->ignore
 
         let querystring = Belt.Array.reduce(params, "", (acc, next) => {
@@ -1288,10 +1277,9 @@ module OutputPanel = {
 
   @react.component
   let make = (
-    ~actionIndicatorKey,
     ~compilerDispatch,
     ~compilerState: CompilerManagerHook.state,
-    ~editorCode: React.Ref.t<string>,
+    ~editorCode: React.ref<string>,
   ) => {
     /*
        We need the prevState to understand different
@@ -1303,7 +1291,7 @@ module OutputPanel = {
  */
     let prevState = React.useRef(None)
 
-    let cmCode = switch React.Ref.current(prevState) {
+    let cmCode = switch prevState.current {
     | Some(prev) =>
       switch (prev, compilerState) {
       | (_, Ready({result: Nothing})) => None
@@ -1324,7 +1312,7 @@ module OutputPanel = {
       }
     }
 
-    React.Ref.setCurrent(prevState, Some(compilerState))
+    prevState.current = Some(compilerState)
 
     let resultPane = switch compilerState {
     | Compiling(ready, _)
@@ -1390,7 +1378,7 @@ module OutputPanel = {
     let prevSelected = React.useRef(0)
 
     let selected = switch compilerState {
-    | Compiling(_, _) => React.Ref.current(prevSelected)
+    | Compiling(_, _) => prevSelected.current
     | Ready(ready) =>
       switch ready.result {
       | Comp(Success(_))
@@ -1400,7 +1388,7 @@ module OutputPanel = {
     | _ => 0
     }
 
-    React.Ref.setCurrent(prevSelected, selected)
+    prevSelected.current = selected
 
     let tabs = [
       {Pane.title: "JavaScript", content: output},
@@ -1499,7 +1487,7 @@ let default = () => {
   // The user can focus an error / warning on a specific line & column
   // which is stored in this ref and triggered by hover / click states
   // in the CodeMirror editor
-  let (focusedRowCol, setFocusedRowCol) = React.useState(_ => None)
+  let (_focusedRowCol, setFocusedRowCol) = React.useState(_ => None)
 
   let editorCode = React.useRef(initialContent)
 
@@ -1507,9 +1495,9 @@ let default = () => {
    we take any success results and set the editor code to the new formatted code */
   switch compilerState {
   | Ready({result: FinalResult.Nothing} as ready) =>
-    compilerDispatch(CompileCode(ready.targetLang, React.Ref.current(editorCode)))
+    compilerDispatch(CompileCode(ready.targetLang, editorCode.current))
   | Ready({result: FinalResult.Conv(Api.ConversionResult.Success({code}))}) =>
-    React.Ref.setCurrent(editorCode, code)
+    editorCode.current = code
   | _ => ()
   }
 
@@ -1525,13 +1513,12 @@ let default = () => {
   let timeoutCompile = React.useRef(() => ())
 
   React.useEffect1(() => {
-    React.Ref.setCurrent(timeoutCompile, () =>
+    timeoutCompile.current = () =>
       switch compilerState {
-      | Ready(ready) =>
-        compilerDispatch(CompileCode(ready.targetLang, React.Ref.current(editorCode)))
+      | Ready(ready) => compilerDispatch(CompileCode(ready.targetLang, editorCode.current))
       | _ => ()
       }
-    )
+
     None
   }, [compilerState])
 
@@ -1598,21 +1585,21 @@ let default = () => {
                   maxHeight="calc(100vh - 10rem)"
                   mode="reason"
                   errors=cmErrors
-                  value={React.Ref.current(editorCode)}
+                  value={editorCode.current}
                   onChange={value => {
-                    React.Ref.setCurrent(editorCode, value)
+                    editorCode.current = value
 
-                    switch React.Ref.current(typingTimer) {
+                    switch typingTimer.current {
                     | None => ()
                     | Some(timer) => Js.Global.clearTimeout(timer)
                     }
                     let timer = Js.Global.setTimeout(() => {
-                      React.Ref.current(timeoutCompile)()
-                      React.Ref.setCurrent(typingTimer, None)
+                      timeoutCompile.current()
+                      typingTimer.current = None
                     }, 100)
-                    React.Ref.setCurrent(typingTimer, Some(timer))
+                    typingTimer.current = Some(timer)
                   }}
-                  onMarkerFocus={rowCol => setFocusedRowCol(prev => Some(rowCol))}
+                  onMarkerFocus={rowCol => setFocusedRowCol(_prev => Some(rowCol))}
                   onMarkerFocusLeave={_ => setFocusedRowCol(_ => None)}
                 />
               </div>
@@ -1620,12 +1607,7 @@ let default = () => {
             <div
               className="relative w-full overflow-x-hidden h-screen lg:h-auto lg:w-1/2"
               style={ReactDOMRe.Style.make(~maxWidth=windowWidth > 1024 ? "56rem" : "100%", ())}>
-              <OutputPanel
-                actionIndicatorKey={Belt.Int.toString(actionCount)}
-                compilerDispatch
-                compilerState
-                editorCode
-              />
+              <OutputPanel compilerDispatch compilerState editorCode />
               <div className="absolute bottom-0 w-full">
                 <Statusbar
                   actionIndicatorKey={Belt.Int.toString(actionCount)} state=compilerState
diff --git a/scripts/test-examples.js b/scripts/test-examples.js
index d903db522..ca23a9f37 100644
--- a/scripts/test-examples.js
+++ b/scripts/test-examples.js
@@ -5,7 +5,19 @@ const path = require("path");
 
 let tempFileName = path.join(__dirname, '..', '_tempFile.res')
 let tempFileNameRegex = /_tempFile\.res/g
-let bsc = path.join(__dirname, '..', 'node_modules', 'bs-platform', process.platform, 'bsc.exe')
+
+// TODO: In the future we need to use the appropriate rescript version for each doc version variant
+//       see the package.json on how to define another rescript version
+let compilersDir = path.join(__dirname, "..", "compilers")
+let bsc = path.join(compilersDir, 'node_modules', 'rescript-820', process.platform, 'bsc.exe')
+
+const prepareCompilers = () => {
+  if (fs.existsSync(bsc)) {
+    return;
+  }
+  console.log("compilers not installed. Installing compilers...");
+  child_process.execFileSync("npm", ['install'], {cwd: compilersDir})
+}
 
 let parseFile = content => {
   if (!/```res (example|prelude|sig)/.test(content)) {
@@ -50,6 +62,10 @@ let postprocessOutput = (file, error) => {
     })
 }
 
+
+prepareCompilers();
+
+console.log("Running tests...")
 fs.writeFileSync(tempFileName, '')
 
 let success = true
diff --git a/yarn.lock b/yarn.lock
index 198b47fbe..ed20de9b2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2161,10 +2161,10 @@ bs-fetch@^0.3.1:
   resolved "https://registry.yarnpkg.com/bs-fetch/-/bs-fetch-0.3.1.tgz#9c7d074b27e6bb2b9f2ec985964f32bcac49f79e"
   integrity sha512-MxwnuuXPldXnoCtlpeN5JNbbmb1tVgsqpLfVunvuMLAIQNyP0TqoImHiQRTz38PBSN8/iX+2yVlm+PFJfnHHiA==
 
-bs-platform@8.3.2:
-  version "8.3.2"
-  resolved "https://registry.yarnpkg.com/bs-platform/-/bs-platform-8.3.2.tgz#c307f1cc2d2397c3d088c7f3b62e9f493283cdcf"
-  integrity sha512-iOTi5JIlNPoCPq31NS9ET79FLyCpwTL2JZbgHz35LzY9Bch1iDtbBR3FVGhRbjphxelAP4fLlFONfUNp5Y3a5g==
+bs-platform@8.3.3-dev.2:
+  version "8.3.3-dev.2"
+  resolved "https://registry.yarnpkg.com/bs-platform/-/bs-platform-8.3.3-dev.2.tgz#af94cf48708899b02af76095d4197e20e6d12e97"
+  integrity sha512-2G2PPIFhUBoN1tzZW9PurjWgvCg+Lx/gIqkAjPaDIIA6S8GFPs/UcTyl4ZwJNvQdKv33Qgih2eYTiBp4hCM3MQ==
 
 buffer-from@^1.0.0, buffer-from@^1.1.1:
   version "1.1.1"