diff --git a/.gitignore b/.gitignore
index 39e3b332..abe8bc16 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,4 @@ client/src/*.js
 .env
 .env.*
 !.env.example
+.idea
\ No newline at end of file
diff --git a/client/shared/ButterToast.re b/client/shared/ButterToast.re
index 181c99d3..fe477642 100644
--- a/client/shared/ButterToast.re
+++ b/client/shared/ButterToast.re
@@ -69,7 +69,7 @@ module ToastOption = {
 
   [@bs.deriving abstract]
   type t = {
-    content: contentArgs => React.reactElement,
+    content: contentArgs => ReactOld.reactElement,
     [@bs.optional]
     dismissOnClick: bool,
     [@bs.optional]
@@ -87,7 +87,7 @@ module ToastOption = {
         ~name=?,
         ~toastTimeout=?,
         content:
-          (~toastId: string, ~dismiss: unit => unit) => React.reactElement,
+          (~toastId: string, ~dismiss: unit => unit) => ReactOld.reactElement,
       ) =>
     t(
       ~content=
diff --git a/client/shared/Fi.re b/client/shared/Fi.re
index dd2357fb..37372a7f 100644
--- a/client/shared/Fi.re
+++ b/client/shared/Fi.re
@@ -1,248 +1,286 @@
-/* react-icons: feather icon */
-module IconContext = {
-  [@bs.deriving abstract]
-  type iconContext = {
-    [@bs.as "Provider"]
-    provider: ReasonReact.reactClass,
-  };
-  [@bs.module "react-icons"] external iconContext: iconContext = "IconContext";
-
-  module Provider = {
-    let reactClass = providerGet(iconContext);
+[@bs.config {jsx: 3}];
 
-    let make = (~value, children) =>
-      ReasonReact.wrapJsForReason(
-        ~reactClass,
-        ~props={"value": value},
-        children,
+module Save = {
+  [@bs.module "react-icons/fi"] [@react.component]
+  external make: (~className: string=?) => React.element = "FiSave";
+
+  module Jsx2 = {
+    let component = ReasonReact.statelessComponent(__MODULE__);
+    let make = (~className=?) => {
+      ReasonReactCompat.wrapReactForReasonReact(
+        make,
+        makeProps(~className?, ()),
       );
+    };
   };
 };
 
-module Save = {
-  [@bs.module "react-icons/fi"]
-  external reactClass: ReasonReact.reactClass = "FiSave";
-
-  let make = (~className="", children) =>
-    ReasonReact.wrapJsForReason(
-      ~reactClass,
-      ~props={"className": className},
-      children,
-    );
-};
-
 module Loader = {
-  [@bs.module "react-icons/fi"]
-  external reactClass: ReasonReact.reactClass = "FiLoader";
-
-  let make = (~className="", children) =>
-    ReasonReact.wrapJsForReason(
-      ~reactClass,
-      ~props={"className": className},
-      children,
-    );
+  [@bs.module "react-icons/fi"] [@react.component]
+  external make: (~className: string=?) => React.element = "FiLoader";
+
+  module Jsx2 = {
+    let component = ReasonReact.statelessComponent(__MODULE__);
+    let make = (~className=?) => {
+      ReasonReactCompat.wrapReactForReasonReact(
+        make,
+        makeProps(~className?, ()),
+      );
+    };
+  };
 };
 
 module Home = {
-  [@bs.module "react-icons/fi"]
-  external reactClass: ReasonReact.reactClass = "FiHome";
-
-  let make = (~className="", children) =>
-    ReasonReact.wrapJsForReason(
-      ~reactClass,
-      ~props={"className": className},
-      children,
-    );
+  [@bs.module "react-icons/fi"] [@react.component]
+  external make: (~className: string=?) => React.element = "FiHome";
+
+  module Jsx2 = {
+    let component = ReasonReact.statelessComponent(__MODULE__);
+    let make = (~className=?) => {
+      ReasonReactCompat.wrapReactForReasonReact(
+        make,
+        makeProps(~className?, ()),
+      );
+    };
+  };
 };
 
 module Github = {
-  [@bs.module "react-icons/fi"]
-  external reactClass: ReasonReact.reactClass = "FiGithub";
-
-  let make = (~className="", children) =>
-    ReasonReact.wrapJsForReason(
-      ~reactClass,
-      ~props={"className": className},
-      children,
-    );
+  [@bs.module "react-icons/fi"] [@react.component]
+  external make: (~className: string=?) => React.element = "FiGithub";
+
+  module Jsx2 = {
+    let component = ReasonReact.statelessComponent(__MODULE__);
+    let make = (~className=?) => {
+      ReasonReactCompat.wrapReactForReasonReact(
+        make,
+        makeProps(~className?, ()),
+      );
+    };
+  };
 };
 
 module GitBranch = {
-  [@bs.module "react-icons/fi"]
-  external reactClass: ReasonReact.reactClass = "FiGitBranch";
-
-  let make = (~className="", children) =>
-    ReasonReact.wrapJsForReason(
-      ~reactClass,
-      ~props={"className": className},
-      children,
-    );
+  [@bs.module "react-icons/fi"] [@react.component]
+  external make: (~className: string=?) => React.element = "FiGitBranch";
+
+  module Jsx2 = {
+    let component = ReasonReact.statelessComponent(__MODULE__);
+    let make = (~className=?) => {
+      ReasonReactCompat.wrapReactForReasonReact(
+        make,
+        makeProps(~className?, ()),
+      );
+    };
+  };
 };
 
 module Terminal = {
-  [@bs.module "react-icons/fi"]
-  external reactClass: ReasonReact.reactClass = "FiTerminal";
-
-  let make = (~className="", children) =>
-    ReasonReact.wrapJsForReason(
-      ~reactClass,
-      ~props={"className": className},
-      children,
-    );
+  [@bs.module "react-icons/fi"] [@react.component]
+  external make: (~className: string=?) => React.element = "FiTerminal";
+
+  module Jsx2 = {
+    let component = ReasonReact.statelessComponent(__MODULE__);
+    let make = (~className=?) => {
+      ReasonReactCompat.wrapReactForReasonReact(
+        make,
+        makeProps(~className?, ()),
+      );
+    };
+  };
 };
 
 module PlusCircle = {
-  [@bs.module "react-icons/fi"]
-  external reactClass: ReasonReact.reactClass = "FiPlusCircle";
-
-  let make = (~className="", children) =>
-    ReasonReact.wrapJsForReason(
-      ~reactClass,
-      ~props={"className": className},
-      children,
-    );
+  [@bs.module "react-icons/fi"] [@react.component]
+  external make: (~className: string=?) => React.element = "FiPlusCircle";
+
+  module Jsx2 = {
+    let component = ReasonReact.statelessComponent(__MODULE__);
+    let make = (~className=?) => {
+      ReasonReactCompat.wrapReactForReasonReact(
+        make,
+        makeProps(~className?, ()),
+      );
+    };
+  };
 };
 
 module FilePlus = {
-  [@bs.module "react-icons/fi"]
-  external reactClass: ReasonReact.reactClass = "FiFilePlus";
-
-  let make = (~className="", children) =>
-    ReasonReact.wrapJsForReason(
-      ~reactClass,
-      ~props={"className": className},
-      children,
-    );
+  [@bs.module "react-icons/fi"] [@react.component]
+  external make: (~className: string=?) => React.element = "FiFilePlus";
+
+  module Jsx2 = {
+    let component = ReasonReact.statelessComponent(__MODULE__);
+    let make = (~className=?) => {
+      ReasonReactCompat.wrapReactForReasonReact(
+        make,
+        makeProps(~className?, ()),
+      );
+    };
+  };
 };
 
 module Plus = {
-  [@bs.module "react-icons/fi"]
-  external reactClass: ReasonReact.reactClass = "FiPlus";
-
-  let make = (~className="", children) =>
-    ReasonReact.wrapJsForReason(
-      ~reactClass,
-      ~props={"className": className},
-      children,
-    );
+  [@bs.module "react-icons/fi"] [@react.component]
+  external make: (~className: string=?) => React.element = "FiPlus";
+
+  module Jsx2 = {
+    let component = ReasonReact.statelessComponent(__MODULE__);
+    let make = (~className=?) => {
+      ReasonReactCompat.wrapReactForReasonReact(
+        make,
+        makeProps(~className?, ()),
+      );
+    };
+  };
 };
 
 module Code = {
-  [@bs.module "react-icons/fi"]
-  external reactClass: ReasonReact.reactClass = "FiCode";
-
-  let make = (~className="", children) =>
-    ReasonReact.wrapJsForReason(
-      ~reactClass,
-      ~props={"className": className},
-      children,
-    );
+  [@bs.module "react-icons/fi"] [@react.component]
+  external make: (~className: string=?) => React.element = "FiCode";
+
+  module Jsx2 = {
+    let component = ReasonReact.statelessComponent(__MODULE__);
+    let make = (~className=?) => {
+      ReasonReactCompat.wrapReactForReasonReact(
+        make,
+        makeProps(~className?, ()),
+      );
+    };
+  };
 };
 
 module Edit2 = {
-  [@bs.module "react-icons/fi"]
-  external reactClass: ReasonReact.reactClass = "FiEdit2";
-
-  let make = (~className="", children) =>
-    ReasonReact.wrapJsForReason(
-      ~reactClass,
-      ~props={"className": className},
-      children,
-    );
+  [@bs.module "react-icons/fi"] [@react.component]
+  external make: (~className: string=?) => React.element = "FiEdit2";
+
+  module Jsx2 = {
+    let component = ReasonReact.statelessComponent(__MODULE__);
+    let make = (~className=?) => {
+      ReasonReactCompat.wrapReactForReasonReact(
+        make,
+        makeProps(~className?, ()),
+      );
+    };
+  };
 };
 
 module Trash2 = {
-  [@bs.module "react-icons/fi"]
-  external reactClass: ReasonReact.reactClass = "FiTrash2";
-
-  let make = (~className="", children) =>
-    ReasonReact.wrapJsForReason(
-      ~reactClass,
-      ~props={"className": className},
-      children,
-    );
+  [@bs.module "react-icons/fi"] [@react.component]
+  external make: (~className: string=?) => React.element = "FiTrash2";
+
+  module Jsx2 = {
+    let component = ReasonReact.statelessComponent(__MODULE__);
+    let make = (~className=?) => {
+      ReasonReactCompat.wrapReactForReasonReact(
+        make,
+        makeProps(~className?, ()),
+      );
+    };
+  };
 };
 
 module RefreshCw = {
-  [@bs.module "react-icons/fi"]
-  external reactClass: ReasonReact.reactClass = "FiRefreshCw";
-
-  let make = (~className="", children) =>
-    ReasonReact.wrapJsForReason(
-      ~reactClass,
-      ~props={"className": className},
-      children,
-    );
+  [@bs.module "react-icons/fi"] [@react.component]
+  external make: (~className: string=?) => React.element = "FiRefreshCw";
+
+  module Jsx2 = {
+    let component = ReasonReact.statelessComponent(__MODULE__);
+    let make = (~className=?) => {
+      ReasonReactCompat.wrapReactForReasonReact(
+        make,
+        makeProps(~className?, ()),
+      );
+    };
+  };
 };
 
 module Package = {
-  [@bs.module "react-icons/fi"]
-  external reactClass: ReasonReact.reactClass = "FiPackage";
-
-  let make = (~className="", children) =>
-    ReasonReact.wrapJsForReason(
-      ~reactClass,
-      ~props={"className": className},
-      children,
-    );
+  [@bs.module "react-icons/fi"] [@react.component]
+  external make: (~className: string=?) => React.element = "FiPackage";
+
+  module Jsx2 = {
+    let component = ReasonReact.statelessComponent(__MODULE__);
+    let make = (~className=?) => {
+      ReasonReactCompat.wrapReactForReasonReact(
+        make,
+        makeProps(~className?, ()),
+      );
+    };
+  };
 };
 
 module Play = {
-  [@bs.module "react-icons/fi"]
-  external reactClass: ReasonReact.reactClass = "FiPlay";
-
-  let make = (~className="", children) =>
-    ReasonReact.wrapJsForReason(
-      ~reactClass,
-      ~props={"className": className},
-      children,
-    );
+  [@bs.module "react-icons/fi"] [@react.component]
+  external make: (~className: string=?) => React.element = "FiPlay";
+
+  module Jsx2 = {
+    let component = ReasonReact.statelessComponent(__MODULE__);
+    let make = (~className=?) => {
+      ReasonReactCompat.wrapReactForReasonReact(
+        make,
+        makeProps(~className?, ()),
+      );
+    };
+  };
 };
 
 module Link = {
-  [@bs.module "react-icons/fi"]
-  external reactClass: ReasonReact.reactClass = "FiLink";
-
-  let make = (~className="", children) =>
-    ReasonReact.wrapJsForReason(
-      ~reactClass,
-      ~props={"className": className},
-      children,
-    );
+  [@bs.module "react-icons/fi"] [@react.component]
+  external make: (~className: string=?) => React.element = "FiLink";
+
+  module Jsx2 = {
+    let component = ReasonReact.statelessComponent(__MODULE__);
+    let make = (~className=?) => {
+      ReasonReactCompat.wrapReactForReasonReact(
+        make,
+        makeProps(~className?, ()),
+      );
+    };
+  };
 };
 
 module RefreshCCW = {
-  [@bs.module "react-icons/fi"]
-  external reactClass: ReasonReact.reactClass = "FiRefreshCcw";
-
-  let make = (~className="", children) =>
-    ReasonReact.wrapJsForReason(
-      ~reactClass,
-      ~props={"className": className},
-      children,
-    );
+  [@bs.module "react-icons/fi"] [@react.component]
+  external make: (~className: string=?) => React.element = "FiRefreshCcw";
+
+  module Jsx2 = {
+    let component = ReasonReact.statelessComponent(__MODULE__);
+    let make = (~className=?) => {
+      ReasonReactCompat.wrapReactForReasonReact(
+        make,
+        makeProps(~className?, ()),
+      );
+    };
+  };
 };
 
 module FiXCircle = {
-  [@bs.module "react-icons/fi"]
-  external reactClass: ReasonReact.reactClass = "FiXCircle";
-
-  let make = (~className="", children) =>
-    ReasonReact.wrapJsForReason(
-      ~reactClass,
-      ~props={"className": className},
-      children,
-    );
+  [@bs.module "react-icons/fi"] [@react.component]
+  external make: (~className: string=?) => React.element = "FiXCircle";
+
+  module Jsx2 = {
+    let component = ReasonReact.statelessComponent(__MODULE__);
+    let make = (~className=?) => {
+      ReasonReactCompat.wrapReactForReasonReact(
+        make,
+        makeProps(~className?, ()),
+      );
+    };
+  };
 };
 
 module FiRefreshCw = {
-  [@bs.module "react-icons/fi"]
-  external reactClass: ReasonReact.reactClass = "FiRefreshCw";
-
-  let make = (~className="", children) =>
-    ReasonReact.wrapJsForReason(
-      ~reactClass,
-      ~props={"className": className},
-      children,
-    );
+  [@bs.module "react-icons/fi"] [@react.component]
+  external make: (~className: string=?) => React.element = "FiRefreshCw";
+
+  module Jsx2 = {
+    let component = ReasonReact.statelessComponent(__MODULE__);
+    let make = (~className=?) => {
+      ReasonReactCompat.wrapReactForReasonReact(
+        make,
+        makeProps(~className?, ()),
+      );
+    };
+  };
 };
diff --git a/client/shared/React.re b/client/shared/React.re
deleted file mode 100644
index b1ad183b..00000000
--- a/client/shared/React.re
+++ /dev/null
@@ -1,5 +0,0 @@
-include ReasonReact;
-
-type nothing;
-
-type childless = array(nothing);
diff --git a/client/shared/ReactOld.re b/client/shared/ReactOld.re
new file mode 100644
index 00000000..e37a7920
--- /dev/null
+++ b/client/shared/ReactOld.re
@@ -0,0 +1,6 @@
+/* This component is deprecated and will be deleted once JSX2 to JSX3 migration is completed */
+include ReasonReact;
+
+type nothing;
+
+type childless = array(nothing);
diff --git a/client/src/Note.re b/client/src/Note.re
index d2fed8b6..8d01f066 100644
--- a/client/src/Note.re
+++ b/client/src/Note.re
@@ -9,7 +9,7 @@ open Editor_Types;
 module RedirectSketchURL = {
   let component = ReasonReact.reducerComponent("Note_RedirectSketchURL");
 
-  let make = (~noteId, children): React.component(unit, 'a, unit) => {
+  let make = (~noteId, children): ReactOld.component(unit, 'a, unit) => {
     ...component,
     didMount: _ => Router.replaceSilent(Route.Note({noteId, data: None})),
     render: _send => children,
@@ -18,7 +18,7 @@ module RedirectSketchURL = {
 
 let component = ReasonReact.statelessComponent("Note");
 
-let make = (~noteInfo: Route.noteRouteConfig, _children: React.childless) => {
+let make = (~noteInfo: Route.noteRouteConfig, _children: ReactOld.childless) => {
   ...component,
   render: _self => {
     let noteId = noteInfo.noteId;
diff --git a/client/src/Router.re b/client/src/Router.re
index 8250426d..37459eb8 100644
--- a/client/src/Router.re
+++ b/client/src/Router.re
@@ -40,7 +40,8 @@ module Unload = {
   module Provider = {
     let component = ReasonReact.reducerComponent("Router_UnloadProvider");
 
-    let make = (_children: React.childless): React.component(unit, 'a, unit) => {
+    let make =
+        (_children: ReactOld.childless): ReactOld.component(unit, 'a, unit) => {
       ...component,
       didMount: _self =>
         window->onbeforeunloadSet((. event) =>
@@ -51,7 +52,7 @@ module Unload = {
             Js.Nullable.return(message);
           }
         ),
-      render: _self => React.null,
+      render: _self => ReactOld.null,
     };
   };
 };
@@ -102,17 +103,55 @@ let replaceSilentUnsafe = path =>
   };
 
 let replaceSilent = route => replaceSilentUnsafe(Route.routeToUrl(route));
-
+/*
+ module LinkUnsafe = {
+   [@bs.config {jsx: 3}];
+
+   [@react.component]
+   let make = (~href, ~id=?, ~title=?, ~className=?, ~popup, ~role=?, ~children) => {
+     <a
+       ?id
+       ?title
+       ?className
+       ?role
+       href
+       onClick={
+         self.handle((event, _self) =>
+           if (!event->ReactEvent.Mouse.ctrlKey && event->ReactEvent.Mouse.button != 1) {
+             event->ReactEvent.Mouse.preventDefault;
+             if (popup) {
+               Popup.openPopup(href);
+             } else {
+               pushUnsafe(href);
+             };
+           }
+         )
+       }>
+       children
+     </a>
+   };
+
+   module Jsx2 = {
+     let component = ReasonReact.statelessComponent(__MODULE__);
+     let make = (~href, ~id=?, ~title=?, ~className=?, ~popup, ~role=?, children) => {
+       ReasonReactCompat.wrapReactForReasonReact(
+         make,
+         makeProps(~href, ~id?, ~title?, ~className?, ~popup, ~role?, ~children, ()),
+       );
+     };
+   };
+ };
+ */
 module LinkUnsafe = {
   let component = ReasonReact.statelessComponent("LinkUnsafe");
 
-  let make = (~href, ~id=?, ~className=?, ~title=?, ~popup, ~role=?, children) => {
+  let make = (~href, ~id=?, ~title=?, ~className=?, ~popup, ~role=?, children) => {
     ...component,
     render: self =>
       <a
         ?id
-        ?className
         ?title
+        ?className
         ?role
         href
         onClick={
@@ -132,7 +171,29 @@ module LinkUnsafe = {
       </a>,
   };
 };
-
+/*
+ module Link = {
+   [@bs.config {jsx: 3}];
+
+   [@react.component]
+   let make = (~route: Route.t, ~id=?, ~title=?, ~className=?, ~popup=false, ~role=?, ~children) => {
+     let href = Route.routeToUrl(route);
+     <LinkUnsafe href ?id ?className ?title popup ?role>
+       children
+     </LinkUnsafe>;
+   };
+
+   module Jsx2 = {
+     let component = ReasonReact.statelessComponent(__MODULE__);
+     let make = (~route: Route.t, ~id=?, ~title=?, ~className=?, ~popup=false, ~role=?, children) => {
+       ReasonReactCompat.wrapReactForReasonReact(
+         make,
+         makeProps(~route?, ~id?, ~title?, ~className?, ~popup?, ~role?, ~children, ()),
+       );
+     };
+   };
+ };
+ */
 module Link = {
   let component = ReasonReact.statelessComponent("LinkSafe");
 
diff --git a/client/src/Router.rei b/client/src/Router.rei
index a030d500..10e93da3 100644
--- a/client/src/Router.rei
+++ b/client/src/Router.rei
@@ -23,7 +23,8 @@ module Unload: {
    */
   module Provider: {
     let make:
-      React.childless => React.component(unit, React.noRetainedProps, unit);
+      ReactOld.childless =>
+      ReactOld.component(unit, ReactOld.noRetainedProps, unit);
   };
 };
 
@@ -41,7 +42,11 @@ module Link: {
       ~className: string=?,
       ~popup: bool=?,
       ~role: string=?,
-      array(React.reactElement)
+      array(ReactOld.reactElement)
     ) =>
-    React.component(React.stateless, React.noRetainedProps, React.actionless);
+    ReactOld.component(
+      ReactOld.stateless,
+      ReactOld.noRetainedProps,
+      ReactOld.actionless,
+    );
 };
diff --git a/client/src/Shortcut.re b/client/src/Shortcut.re
index 6fdeabe6..2f895cf5 100644
--- a/client/src/Shortcut.re
+++ b/client/src/Shortcut.re
@@ -74,3 +74,19 @@ module Consumer = {
     render: _self => children(Store.subscribe),
   };
 };
+/* JSX3
+   module Consumer = {
+   [@react.component]
+     let make = (~children) => {children(Store.subscribe);};
+
+     module Jsx2 = {
+       let component = ReasonReact.statelessComponent(__MODULE__);
+       let make = (children) => {
+         ReasonReactCompat.wrapReactForReasonReact(
+           make,
+           makeProps(~children, ()),
+         );
+       };
+     };
+   };
+   */
diff --git a/client/src/components/FontFaceObserver.re b/client/src/components/FontFaceObserver.re
index fa94ba2d..32c0e5d4 100644
--- a/client/src/components/FontFaceObserver.re
+++ b/client/src/components/FontFaceObserver.re
@@ -33,7 +33,7 @@ module Provider = {
   let component = ReasonReact.reducerComponent("FontFaceObserver_Provider");
 
   let make:
-    (~className: string=?, ~font: string=?, React.childless) =>
+    (~className: string=?, ~font: string=?, ReactOld.childless) =>
     ReasonReact.component(unit, 'a, unit) =
     (~className="fira-code", ~font="Fira Code", _children) => {
       ...component,
diff --git a/client/src/components/Layout_WithTopbar.re b/client/src/components/Layout_WithTopbar.re
index a6c31ed6..e1368eb5 100644
--- a/client/src/components/Layout_WithTopbar.re
+++ b/client/src/components/Layout_WithTopbar.re
@@ -1,3 +1,19 @@
+/*
+ [@bs.config {jsx: 3}];
+
+ [@react.component]
+ let make = (~children) => {<> <UI_Topbar /> children </>};
+
+ module Jsx2 = {
+   let component = ReasonReact.statelessComponent(__MODULE__);
+   let make = (children) => {
+     ReasonReactCompat.wrapReactForReasonReact(
+       make,
+       makeProps(~children, ()),
+     );
+   };
+ };
+ */
 let component = ReasonReact.statelessComponent("Layout_WithTopbar");
 
 let make = children => {
diff --git a/client/src/components/UI_DateTime.re b/client/src/components/UI_DateTime.re
index 4ab74459..cf5c5643 100644
--- a/client/src/components/UI_DateTime.re
+++ b/client/src/components/UI_DateTime.re
@@ -1,3 +1,4 @@
+[@bs.config {jsx: 3}];
 open Utils;
 
 module Transformer: {
@@ -19,22 +20,22 @@ module Transformer: {
   };
 };
 
-let component = ReasonReact.statelessComponent("DateDisplay");
+[@react.component]
+let make = (~date: Js.Json.t, ~transformer=Transformer.relative, ~className=?) => {
+  let date = date |> Js.Json.decodeString;
+  switch (date) {
+  | None => ReasonReact.null
+  | Some(date) =>
+    <time dateTime=date ?className> {date->transformer->str} </time>
+  };
+};
 
-let make =
-    (
-      ~date: Js.Json.t,
-      ~transformer=Transformer.relative,
-      ~className=?,
-      _children,
-    ) => {
-  ...component,
-  render: _self => {
-    let date = date |> Js.Json.decodeString;
-    switch (date) {
-    | None => ReasonReact.null
-    | Some(date) =>
-      <time dateTime=date ?className> {date->transformer->str} </time>
-    };
-  },
+module Jsx2 = {
+  let component = ReasonReact.statelessComponent(__MODULE__);
+  let make = (~date: Js.Json.t, ~transformer=?, ~className=?) => {
+    ReasonReactCompat.wrapReactForReasonReact(
+      make,
+      makeProps(~date, ~transformer?, ~className?, ()),
+    );
+  };
 };
diff --git a/client/src/components/UI_NoSketches.re b/client/src/components/UI_NoSketches.re
index 42bd3552..e365ca03 100644
--- a/client/src/components/UI_NoSketches.re
+++ b/client/src/components/UI_NoSketches.re
@@ -7,13 +7,13 @@ let make = (~className=?, _children) => {
   ...component,
   render: _self =>
     <section className={Cn.make(["UI_NoSketches", Cn.unwrap(className)])}>
-      <Fi.Package className="UI_NoSketches--icon" />
+      <Fi.Package.Jsx2 className="UI_NoSketches--icon" />
       "Your sketches will show up here"->str
       <Router.Link
         route=Route.NoteTemplateChoose
         className="btn btn-primary btn--large UI_NoSketches--button"
         role="button">
-        <Fi.Plus />
+        <Fi.Plus.Jsx2 />
         "Create New Sketch"->str
       </Router.Link>
     </section>,
diff --git a/client/src/components/UI_SketchList.re b/client/src/components/UI_SketchList.re
index 8d3d7987..e9c1ca74 100644
--- a/client/src/components/UI_SketchList.re
+++ b/client/src/components/UI_SketchList.re
@@ -53,7 +53,7 @@ let make =
                                <div
                                  className="UI_SketchList__sketch--lastEdited">
                                  "last edited"->str
-                                 <UI_DateTime
+                                 <UI_DateTime.Jsx2
                                    date=sketch##date
                                    className="UI_SketchList__sketch--time"
                                  />
diff --git a/client/src/components/UI_SketchOwnerInfo.re b/client/src/components/UI_SketchOwnerInfo.re
index 24954e83..0cc382df 100644
--- a/client/src/components/UI_SketchOwnerInfo.re
+++ b/client/src/components/UI_SketchOwnerInfo.re
@@ -27,7 +27,7 @@ let make = (~owner, ~noteLastEdited=?, ~className=?, _children) => {
          noteLastEdited =>
            <span className="UI_SketchOwnerInfo__lastEdited">
              "last edited"->str
-             <UI_DateTime
+             <UI_DateTime.Jsx2
                date=noteLastEdited
                className="UI_SketchOwnerInfo__time"
              />
diff --git a/client/src/components/UI_Topbar.re b/client/src/components/UI_Topbar.re
index 5cb72d2e..de59dc0f 100644
--- a/client/src/components/UI_Topbar.re
+++ b/client/src/components/UI_Topbar.re
@@ -8,7 +8,7 @@ let loginButton =
     className="btn btn-primary Topbar__login"
     popup=true
     route=Route.AuthGithub>
-    <Fi.Github />
+    <Fi.Github.Jsx2 />
     "Login with Github"->str
   </Router.Link>;
 
@@ -32,7 +32,7 @@ let make = _children => {
                route={Route.NoteNew(RE)}
                className="Topbar__action Topbar__action--highlight"
                title="Create new Sketch">
-               <Fi.Plus />
+               <Fi.Plus.Jsx2 />
                "New Sketch"->str
              </Router.Link>
         </UI_Balloon>
diff --git a/client/src_editor/Editor_Blocks.re b/client/src_editor/Editor_Blocks.re
index ea4162c8..44f80094 100644
--- a/client/src_editor/Editor_Blocks.re
+++ b/client/src_editor/Editor_Blocks.re
@@ -578,7 +578,7 @@ let blockControlsButtons = (blockId, isDeleted, send) =>
            className="block__controls--button"
            ariaLabel="Add code block"
            onClick={_ => send(Block_Add(blockId, BTyp_Code))}>
-           <Fi.Code />
+           <Fi.Code.Jsx2 />
            <sup> "+"->str </sup>
          </button>
     </UI_Balloon>
@@ -587,7 +587,7 @@ let blockControlsButtons = (blockId, isDeleted, send) =>
            className="block__controls--button"
            ariaLabel="Add text block"
            onClick={_ => send(Block_Add(blockId, BTyp_Text))}>
-           <Fi.Edit2 />
+           <Fi.Edit2.Jsx2 />
            <sup> "+"->str </sup>
          </button>
     </UI_Balloon>
@@ -597,7 +597,7 @@ let blockControlsButtons = (blockId, isDeleted, send) =>
                 className="block__controls--button block__controls--danger"
                 ariaLabel="Delete block"
                 onClick={_ => send(Block_QueueDelete(blockId))}>
-                <Fi.Trash2 />
+                <Fi.Trash2.Jsx2 />
                 <sup> "-"->str </sup>
               </button>
          </UI_Balloon>
@@ -606,7 +606,7 @@ let blockControlsButtons = (blockId, isDeleted, send) =>
                 className="block__controls--button"
                 ariaLabel="Restore block"
                 onClick={_ => send(Block_Restore(blockId))}>
-                <Fi.RefreshCw />
+                <Fi.RefreshCw.Jsx2 />
                 <sup> "+"->str </sup>
               </button>
          </UI_Balloon>}
@@ -624,7 +624,7 @@ let make =
       ~onExecute,
       ~registerExecuteCallback=?,
       ~registerShortcut: option(Shortcut.subscribeFun)=?,
-      _children: React.childless,
+      _children: ReactOld.childless,
     ) => {
   let makeInitialState = () => {
     lang,
@@ -805,14 +805,14 @@ let make =
                            className="block__deleted--button restore"
                            onClick={_ => send(Block_Restore(b_id))}
                            ariaLabel="Restore block">
-                           <Fi.RefreshCw />
+                           <Fi.RefreshCw.Jsx2 />
                            "Restore"->str
                          </button>
                          <button
                            className="block__deleted--button delete-immediately"
                            onClick={_ => send(Block_DeleteQueued(b_id))}
                            ariaLabel="Delete block immediately">
-                           <Fi.Trash2 />
+                           <Fi.Trash2.Jsx2 />
                            "Delete Immediately"->str
                          </button>
                        </div>
@@ -851,7 +851,7 @@ let make =
                        </div>
                        <div className="block__controls">
                          {readOnly
-                            ? React.null
+                            ? ReactOld.null
                             : blockControlsButtons(b_id, b_deleted, send)}
                        </div>
                      </div>
@@ -878,7 +878,7 @@ let make =
                          />
                        </div>
                        {readOnly
-                          ? React.null
+                          ? ReactOld.null
                           : <div className="block__controls">
                               {blockControlsButtons(b_id, b_deleted, send)}
                             </div>}
diff --git a/client/src_editor/Editor_Blocks.rei b/client/src_editor/Editor_Blocks.rei
index 9745559b..55b8a179 100644
--- a/client/src_editor/Editor_Blocks.rei
+++ b/client/src_editor/Editor_Blocks.rei
@@ -39,6 +39,6 @@ let make:
     ~onExecute: bool => 'a,
     ~registerExecuteCallback: (unit => unit) => unit=?,
     ~registerShortcut: Shortcut.subscribeFun=?,
-    React.childless
+    ReactOld.childless
   ) =>
   ReasonReact.component(state, ReasonReact.noRetainedProps, action);
diff --git a/client/src_editor/Editor_Links.re b/client/src_editor/Editor_Links.re
index c145d930..6acccd55 100644
--- a/client/src_editor/Editor_Links.re
+++ b/client/src_editor/Editor_Links.re
@@ -112,7 +112,7 @@ module SingleLink = {
                 <button
                   className="link__button link__button--danger action__button"
                   onClick={_ => onDelete()}>
-                  <Fi.Trash2 />
+                  <Fi.Trash2.Jsx2 />
                 </button>
               }}
              {switch (onRefresh) {
@@ -123,9 +123,9 @@ module SingleLink = {
                      ? <button
                          className="link__button link__button--danger action__button"
                          onClick={_ => send(Link_Refresh)}>
-                         <Fi.FiRefreshCw />
+                         <Fi.FiRefreshCw.Jsx2 />
                        </button>
-                     : <Fi.Loader />}
+                     : <Fi.Loader.Jsx2 />}
                   {!state.isLinkRefreshing
                      ? ReasonReact.null
                      : {
@@ -169,7 +169,7 @@ module SingleLink = {
                <span className="link__timestamp__hint">
                  "Revision from "->str
                </span>
-               <UI_DateTime date=timestamp />
+               <UI_DateTime.Jsx2 date=timestamp />
              </span>
            }}
         </td>
@@ -236,17 +236,17 @@ module EmptyLink = {
                   }
                   disabled={status == Loading}>
                   {switch (status, state.dirty) {
-                   | (NotAsked, _) => <Fi.PlusCircle />
-                   | (Loading, _) => <Fi.Loader />
+                   | (NotAsked, _) => <Fi.PlusCircle.Jsx2 />
+                   | (Loading, _) => <Fi.Loader.Jsx2 />
                    | (Error(message), false) =>
                      <>
-                       <Fi.PlusCircle />
+                       <Fi.PlusCircle.Jsx2 />
                        <i className="link__button__error">
                          {("  " ++ message)->str}
                        </i>
                      </>
-                   | (Error(_), true) => <Fi.PlusCircle />
-                   | (Fetched, _) => <Fi.Trash2 />
+                   | (Error(_), true) => <Fi.PlusCircle.Jsx2 />
+                   | (Fetched, _) => <Fi.Trash2.Jsx2 />
                    }}
                 </button>
               </td>
@@ -378,7 +378,7 @@ let make = (~currentSketchId, ~links, ~onUpdate, _children) => {
         ...<button
              className="EditorNote__linkMenu"
              onClick={_ => send(ToggleLinkModal)}>
-             <Fi.Edit2 />
+             <Fi.Edit2.Jsx2 />
            </button>
       </UI_Balloon>
       <hr />
@@ -394,7 +394,7 @@ let make = (~currentSketchId, ~links, ~onUpdate, _children) => {
           <button
             className="EditorNote__linkMenu EditorNote__Modal--content--close"
             onClick={_ => send(ToggleLinkModal)}>
-            <Fi.FiXCircle />
+            <Fi.FiXCircle.Jsx2 />
           </button>
           <h2 className="links__new"> {str("Linkings")} </h2>
           <div className="links__container">
diff --git a/client/src_editor/Editor_Note.re b/client/src_editor/Editor_Note.re
index 90b32e53..2155ba81 100644
--- a/client/src_editor/Editor_Note.re
+++ b/client/src_editor/Editor_Note.re
@@ -211,10 +211,10 @@ module Editor_Note = {
                          loading={state.isExecuting} delayMs=500>
                          ...{loading =>
                            loading
-                             ? <Fi.Loader
+                             ? <Fi.Loader.Jsx2
                                  className="EditorNav__button--spin"
                                />
-                             : <Fi.Play />
+                             : <Fi.Play.Jsx2 />
                          }
                        </UI_LoadingWrapper>
                        <span> "Run"->str </span>
@@ -316,7 +316,7 @@ module Editor_Note = {
                 <Editor_Note_GetUserInfo userId={state.noteOwnerId}>
                   ...{
                        fun
-                       | None => React.null
+                       | None => ReactOld.null
                        | Some((user: Js.t('a))) =>
                          <UI_SketchOwnerInfo
                            owner=user
@@ -333,7 +333,7 @@ module Editor_Note = {
                          ->ClassNames.ifTrue("EditorNote__linkMenu--open"),
                        ])}
                        onClick={_ => send(ToggleLinkMenu)}>
-                       <Fi.Link />
+                       <Fi.Link.Jsx2 />
                      </button>
                 </UI_Balloon>
                 <i className="EditorNote__links">
diff --git a/client/src_editor/Editor_Note_ForkButton.re b/client/src_editor/Editor_Note_ForkButton.re
index 53aaf5bf..9438299c 100644
--- a/client/src_editor/Editor_Note_ForkButton.re
+++ b/client/src_editor/Editor_Note_ForkButton.re
@@ -38,8 +38,8 @@ module ForkButton = {
              <UI_LoadingWrapper loading={forkStatus == ForkStatus_Loading}>
                ...{loading =>
                  loading
-                   ? <Fi.Loader className="EditorNav__button--spin" />
-                   : <Fi.GitBranch />
+                   ? <Fi.Loader.Jsx2 className="EditorNav__button--spin" />
+                   : <Fi.GitBranch.Jsx2 />
                }
              </UI_LoadingWrapper>
              <span> "Fork"->str </span>
@@ -263,7 +263,7 @@ let make =
   ...component,
   render: _self =>
     switch (noteState) {
-    | NoteState_New => React.null
+    | NoteState_New => ReactOld.null
     | NoteState_Old =>
       <AuthStatus.IsAuthenticated>
         ...(
diff --git a/client/src_editor/Editor_Note_SaveButton.re b/client/src_editor/Editor_Note_SaveButton.re
index 2b3695d4..f44af31d 100644
--- a/client/src_editor/Editor_Note_SaveButton.re
+++ b/client/src_editor/Editor_Note_SaveButton.re
@@ -17,7 +17,7 @@ module SaveButton = {
         ~registerShortcut: Shortcut.subscribeFun,
         _children,
       )
-      : React.component(unit, 'a, action) => {
+      : ReactOld.component(unit, 'a, action) => {
     ...component,
     didMount: ({send, onUnmount}) =>
       registerShortcut(
@@ -70,8 +70,8 @@ module SaveButton = {
              <UI_LoadingWrapper loading={editorContentStatus == Ec_Saving}>
                ...{loading =>
                  loading
-                   ? <Fi.Loader className="EditorNav__button--spin" />
-                   : <Fi.Save />
+                   ? <Fi.Loader.Jsx2 className="EditorNav__button--spin" />
+                   : <Fi.Save.Jsx2 />
                }
              </UI_LoadingWrapper>
              <span> "Save"->str </span>
diff --git a/client/src_embed/Embed.re b/client/src_embed/Embed.re
index 2c35c603..25c4babf 100644
--- a/client/src_embed/Embed.re
+++ b/client/src_embed/Embed.re
@@ -216,7 +216,7 @@ let make = _children => {
            }}
         </span>
         <button className="footer_run" onClick={_ => send(Run)}>
-          <Fi.Play className="footer_run_icon" />
+          <Fi.Play.Jsx2 className="footer_run_icon" />
           "Run"->str
         </button>
       </footer>