diff --git a/.github/workflows/opam.yml b/.github/workflows/opam.yml
index 21fb3565f..12d037a39 100644
--- a/.github/workflows/opam.yml
+++ b/.github/workflows/opam.yml
@@ -24,7 +24,7 @@ jobs:
           # disabling this for now
 
         ocaml-compiler:
-          - 5.1.x
+          - 5.1.1
 
     runs-on: ${{ matrix.os }}
 
diff --git a/CHANGES.md b/CHANGES.md
index 4b2635a6d..434ee981b 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -7,6 +7,7 @@
 * Wrap the `React` library, exposing just a single top-level module
   (@anmonteiro in [#783](https://github.com/reasonml/reason-react/pull/783))
 * Re-organise toplevel modules (@davesnx in [#794](https://github.com/reasonml/reason-react/pull/794))
+* Require and adapt to Melange v3 (@anmonteiro in [#821](https://github.com/reasonml/reason-react/pull/821))
 
 # 0.12.0
 
diff --git a/Makefile b/Makefile
index 150e10f95..9cf988a8e 100644
--- a/Makefile
+++ b/Makefile
@@ -58,7 +58,7 @@ install: ## Update the package dependencies when new deps are added to dune-proj
 
 .PHONY: init
 create-switch: ## Create a local opam switch
-	@opam switch create . 5.1.0 --no-install
+	@opam switch create . 5.1.1 --no-install
 
 .PHONY: init
 init: create-switch install ## Create a local opam switch, install deps
diff --git a/dune-project b/dune-project
index 03a037dad..668aee343 100644
--- a/dune-project
+++ b/dune-project
@@ -34,9 +34,11 @@
   "ReasonReact helps you use Reason to build React components with deeply integrated, strong, static type safety.\n\nIt is designed and built by people using Reason and React in large, mission critical production React codebases.")
  (depends
   (ocaml
-   (and (>= 5.1.0) (< 5.2.0)))
+   (and
+    (>= 5.1.1)
+    (< 5.2.0)))
   (melange
-   (>= 2.0.0))
+   (>= 3.0.0))
   (reason-react-ppx
    (= :version))
   (reason
@@ -56,15 +58,17 @@
  (synopsis "React.js JSX PPX")
  (description "ReasonReact JSX PPX")
  (depends
-    (ocaml
-   (and (>= 5.1.0) (< 5.2.0)))
+  (ocaml
+   (and
+    (>= 5.1.1)
+    (< 5.2.0)))
   (reason
    (>= 3.10.0))
   (ppxlib
    (>= 0.28.0))
   (merlin
    (and
-    (= 4.9-501preview)
+    (= 4.13.1-501)
     :with-test))
   (ocamlformat
    (and
diff --git a/flake.lock b/flake.lock
index 0fd55cc44..2a5874d72 100644
--- a/flake.lock
+++ b/flake.lock
@@ -5,11 +5,11 @@
         "systems": "systems"
       },
       "locked": {
-        "lastModified": 1694529238,
-        "narHash": "sha256-zsNZZGTGnMOf9YpHKJqMSsa0dXbfmxeoJ7xHlrt+xmY=",
+        "lastModified": 1705309234,
+        "narHash": "sha256-uNRRNRKmJyCRC/8y1RqBkqWBLM034y4qN7EprSdmgyA=",
         "owner": "numtide",
         "repo": "flake-utils",
-        "rev": "ff7b65b44d01cf9ba6a71320833626af21126384",
+        "rev": "1ef2e671c3b0c19053962c07dbda38332dcebf26",
         "type": "github"
       },
       "original": {
@@ -20,11 +20,11 @@
     },
     "nix-filter": {
       "locked": {
-        "lastModified": 1694857738,
-        "narHash": "sha256-bxxNyLHjhu0N8T3REINXQ2ZkJco0ABFPn6PIe2QUfqo=",
+        "lastModified": 1705332318,
+        "narHash": "sha256-kcw1yFeJe9N4PjQji9ZeX47jg0p9A0DuU4djKvg1a7I=",
         "owner": "numtide",
         "repo": "nix-filter",
-        "rev": "41fd48e00c22b4ced525af521ead8792402de0ea",
+        "rev": "3449dc925982ad46246cfc36469baf66e1b64f17",
         "type": "github"
       },
       "original": {
@@ -41,11 +41,11 @@
         "nixpkgs": "nixpkgs_2"
       },
       "locked": {
-        "lastModified": 1699386524,
-        "narHash": "sha256-3plMDSyJ8JMBuAEKlXJx1DGCSlvoa8MlfT/q2Vi/Iog=",
+        "lastModified": 1706769090,
+        "narHash": "sha256-q4VquXSb9DdBOms28Cf4AJvaA99kPFCDSvyEg6DC7Q8=",
         "owner": "nix-ocaml",
         "repo": "nix-overlays",
-        "rev": "18b50a3d73adea9926d88fda43a05aba4ee6a164",
+        "rev": "d0415cd3ba07920174247c95b96ca7d50cee8753",
         "type": "github"
       },
       "original": {
@@ -56,17 +56,17 @@
     },
     "nixpkgs_2": {
       "locked": {
-        "lastModified": 1699263391,
-        "narHash": "sha256-gl4gNUR1GjIfI7aRYUr024nrK3Sxx3W3dRuS4LB56Zg=",
+        "lastModified": 1706672657,
+        "narHash": "sha256-API05c0SDZrmzz1wpqt/K3iCwlaOqDeDfZGp0YGQnek=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "cac8c76f21fccba39376504e18c23f7e18fd8419",
+        "rev": "632751bf0ceeefc74af7a9d2335ea923ad9c831a",
         "type": "github"
       },
       "original": {
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "cac8c76f21fccba39376504e18c23f7e18fd8419",
+        "rev": "632751bf0ceeefc74af7a9d2335ea923ad9c831a",
         "type": "github"
       }
     },
diff --git a/ppx/test/issue-429.t/run.t b/ppx/test/issue-429.t/run.t
index ad6100cc6..a1b1454ee 100644
--- a/ppx/test/issue-429.t/run.t
+++ b/ppx/test/issue-429.t/run.t
@@ -44,7 +44,7 @@ Let's test hovering over parts of the component
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => React.element",
+      "type": "(~greeting: string) => element",
       "tail": "no"
     }
   ]
@@ -87,7 +87,7 @@ Let's test hovering over parts of the component
         "line": 36,
         "col": 1
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -99,7 +99,7 @@ Let's test hovering over parts of the component
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => React.element",
+      "type": "(~greeting: string) => element",
       "tail": "no"
     }
   ]
@@ -142,7 +142,7 @@ Let's test hovering over parts of the component
         "line": 36,
         "col": 1
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -154,7 +154,7 @@ Let's test hovering over parts of the component
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => React.element",
+      "type": "(~greeting: string) => element",
       "tail": "no"
     }
   ]
@@ -185,7 +185,7 @@ Let's test hovering over parts of the component
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -197,7 +197,7 @@ Let's test hovering over parts of the component
         "line": 36,
         "col": 1
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -209,7 +209,7 @@ Let's test hovering over parts of the component
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => React.element",
+      "type": "(~greeting: string) => element",
       "tail": "no"
     }
   ]
@@ -240,7 +240,7 @@ Wrapping `div`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -252,7 +252,7 @@ Wrapping `div`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -264,7 +264,7 @@ Wrapping `div`
         "line": 36,
         "col": 1
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -276,7 +276,7 @@ Wrapping `div`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => React.element",
+      "type": "(~greeting: string) => element",
       "tail": "no"
     }
   ]
@@ -307,7 +307,7 @@ First child `button`
         "line": 30,
         "col": 75
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -319,7 +319,7 @@ First child `button`
         "line": 35,
         "col": 9
       },
-      "type": "array(React.element)",
+      "type": "array(element)",
       "tail": "no"
     },
     {
@@ -331,7 +331,7 @@ First child `button`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -343,7 +343,7 @@ First child `button`
         "line": 35,
         "col": 9
       },
-      "type": "option(React.element)",
+      "type": "option(element)",
       "tail": "no"
     },
     {
@@ -367,7 +367,7 @@ First child `button`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -379,7 +379,7 @@ First child `button`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -391,7 +391,7 @@ First child `button`
         "line": 36,
         "col": 1
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -403,7 +403,7 @@ First child `button`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => React.element",
+      "type": "(~greeting: string) => element",
       "tail": "no"
     }
   ]
@@ -434,7 +434,7 @@ First child `onClick` prop
         "line": 30,
         "col": 75
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -446,7 +446,7 @@ First child `onClick` prop
         "line": 35,
         "col": 9
       },
-      "type": "array(React.element)",
+      "type": "array(element)",
       "tail": "no"
     },
     {
@@ -458,7 +458,7 @@ First child `onClick` prop
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -470,7 +470,7 @@ First child `onClick` prop
         "line": 35,
         "col": 9
       },
-      "type": "option(React.element)",
+      "type": "option(element)",
       "tail": "no"
     },
     {
@@ -494,7 +494,7 @@ First child `onClick` prop
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -506,7 +506,7 @@ First child `onClick` prop
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -518,7 +518,7 @@ First child `onClick` prop
         "line": 36,
         "col": 1
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -530,7 +530,7 @@ First child `onClick` prop
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => React.element",
+      "type": "(~greeting: string) => element",
       "tail": "no"
     }
   ]
@@ -549,7 +549,7 @@ First child `onClick` callback argument (event)
         "line": 30,
         "col": 46
       },
-      "type": "React.Event.Mouse.t => unit",
+      "type": "Event.Mouse.t => unit",
       "tail": "no"
     },
     {
@@ -561,7 +561,7 @@ First child `onClick` callback argument (event)
         "line": 30,
         "col": 46
       },
-      "type": "option(React.Event.Mouse.t => unit)",
+      "type": "option(Event.Mouse.t => unit)",
       "tail": "no"
     },
     {
@@ -585,7 +585,7 @@ First child `onClick` callback argument (event)
         "line": 30,
         "col": 75
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -597,7 +597,7 @@ First child `onClick` callback argument (event)
         "line": 35,
         "col": 9
       },
-      "type": "array(React.element)",
+      "type": "array(element)",
       "tail": "no"
     },
     {
@@ -609,7 +609,7 @@ First child `onClick` callback argument (event)
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -621,7 +621,7 @@ First child `onClick` callback argument (event)
         "line": 35,
         "col": 9
       },
-      "type": "option(React.element)",
+      "type": "option(element)",
       "tail": "no"
     },
     {
@@ -645,7 +645,7 @@ First child `onClick` callback argument (event)
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -657,7 +657,7 @@ First child `onClick` callback argument (event)
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -669,7 +669,7 @@ First child `onClick` callback argument (event)
         "line": 36,
         "col": 1
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -681,7 +681,7 @@ First child `onClick` callback argument (event)
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => React.element",
+      "type": "(~greeting: string) => element",
       "tail": "no"
     }
   ]
@@ -724,7 +724,7 @@ First child `onClick` prop `dispatch`
         "line": 30,
         "col": 46
       },
-      "type": "React.Event.Mouse.t => unit",
+      "type": "Event.Mouse.t => unit",
       "tail": "no"
     },
     {
@@ -736,7 +736,7 @@ First child `onClick` prop `dispatch`
         "line": 30,
         "col": 46
       },
-      "type": "option(React.Event.Mouse.t => unit)",
+      "type": "option(Event.Mouse.t => unit)",
       "tail": "no"
     },
     {
@@ -760,7 +760,7 @@ First child `onClick` prop `dispatch`
         "line": 30,
         "col": 75
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -772,7 +772,7 @@ First child `onClick` prop `dispatch`
         "line": 35,
         "col": 9
       },
-      "type": "array(React.element)",
+      "type": "array(element)",
       "tail": "no"
     },
     {
@@ -784,7 +784,7 @@ First child `onClick` prop `dispatch`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -796,7 +796,7 @@ First child `onClick` prop `dispatch`
         "line": 35,
         "col": 9
       },
-      "type": "option(React.element)",
+      "type": "option(element)",
       "tail": "no"
     },
     {
@@ -820,7 +820,7 @@ First child `onClick` prop `dispatch`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -832,7 +832,7 @@ First child `onClick` prop `dispatch`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -844,7 +844,7 @@ First child `onClick` prop `dispatch`
         "line": 36,
         "col": 1
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -856,7 +856,7 @@ First child `onClick` prop `dispatch`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => React.element",
+      "type": "(~greeting: string) => element",
       "tail": "no"
     }
   ]
@@ -911,7 +911,7 @@ First child `onClick` prop `Click`
         "line": 30,
         "col": 46
       },
-      "type": "React.Event.Mouse.t => unit",
+      "type": "Event.Mouse.t => unit",
       "tail": "no"
     },
     {
@@ -923,7 +923,7 @@ First child `onClick` prop `Click`
         "line": 30,
         "col": 46
       },
-      "type": "option(React.Event.Mouse.t => unit)",
+      "type": "option(Event.Mouse.t => unit)",
       "tail": "no"
     },
     {
@@ -947,7 +947,7 @@ First child `onClick` prop `Click`
         "line": 30,
         "col": 75
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -959,7 +959,7 @@ First child `onClick` prop `Click`
         "line": 35,
         "col": 9
       },
-      "type": "array(React.element)",
+      "type": "array(element)",
       "tail": "no"
     },
     {
@@ -971,7 +971,7 @@ First child `onClick` prop `Click`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -983,7 +983,7 @@ First child `onClick` prop `Click`
         "line": 35,
         "col": 9
       },
-      "type": "option(React.element)",
+      "type": "option(element)",
       "tail": "no"
     },
     {
@@ -1007,7 +1007,7 @@ First child `onClick` prop `Click`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1019,7 +1019,7 @@ First child `onClick` prop `Click`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1031,7 +1031,7 @@ First child `onClick` prop `Click`
         "line": 36,
         "col": 1
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1043,7 +1043,7 @@ First child `onClick` prop `Click`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => React.element",
+      "type": "(~greeting: string) => element",
       "tail": "no"
     }
   ]
@@ -1062,7 +1062,7 @@ First child `string`
         "line": 30,
         "col": 55
       },
-      "type": "string => React.element",
+      "type": "string => element",
       "tail": "no"
     },
     {
@@ -1074,7 +1074,7 @@ First child `string`
         "line": 30,
         "col": 65
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1086,7 +1086,7 @@ First child `string`
         "line": 30,
         "col": 65
       },
-      "type": "option(React.element)",
+      "type": "option(element)",
       "tail": "no"
     },
     {
@@ -1110,7 +1110,7 @@ First child `string`
         "line": 30,
         "col": 75
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1122,7 +1122,7 @@ First child `string`
         "line": 35,
         "col": 9
       },
-      "type": "array(React.element)",
+      "type": "array(element)",
       "tail": "no"
     },
     {
@@ -1134,7 +1134,7 @@ First child `string`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1146,7 +1146,7 @@ First child `string`
         "line": 35,
         "col": 9
       },
-      "type": "option(React.element)",
+      "type": "option(element)",
       "tail": "no"
     },
     {
@@ -1170,7 +1170,7 @@ First child `string`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1182,7 +1182,7 @@ First child `string`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1194,7 +1194,7 @@ First child `string`
         "line": 36,
         "col": 1
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1206,7 +1206,7 @@ First child `string`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => React.element",
+      "type": "(~greeting: string) => element",
       "tail": "no"
     }
   ]
@@ -1237,7 +1237,7 @@ First child `message`
         "line": 30,
         "col": 65
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1249,7 +1249,7 @@ First child `message`
         "line": 30,
         "col": 65
       },
-      "type": "option(React.element)",
+      "type": "option(element)",
       "tail": "no"
     },
     {
@@ -1273,7 +1273,7 @@ First child `message`
         "line": 30,
         "col": 75
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1285,7 +1285,7 @@ First child `message`
         "line": 35,
         "col": 9
       },
-      "type": "array(React.element)",
+      "type": "array(element)",
       "tail": "no"
     },
     {
@@ -1297,7 +1297,7 @@ First child `message`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1309,7 +1309,7 @@ First child `message`
         "line": 35,
         "col": 9
       },
-      "type": "option(React.element)",
+      "type": "option(element)",
       "tail": "no"
     },
     {
@@ -1333,7 +1333,7 @@ First child `message`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1345,7 +1345,7 @@ First child `message`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1357,7 +1357,7 @@ First child `message`
         "line": 36,
         "col": 1
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1369,7 +1369,7 @@ First child `message`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => React.element",
+      "type": "(~greeting: string) => element",
       "tail": "no"
     }
   ]
@@ -1412,7 +1412,7 @@ Third child `state`
         "line": 34,
         "col": 42
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1424,7 +1424,7 @@ Third child `state`
         "line": 35,
         "col": 9
       },
-      "type": "array(React.element)",
+      "type": "array(element)",
       "tail": "no"
     },
     {
@@ -1436,7 +1436,7 @@ Third child `state`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1448,7 +1448,7 @@ Third child `state`
         "line": 35,
         "col": 9
       },
-      "type": "option(React.element)",
+      "type": "option(element)",
       "tail": "no"
     },
     {
@@ -1472,7 +1472,7 @@ Third child `state`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1484,7 +1484,7 @@ Third child `state`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1496,7 +1496,7 @@ Third child `state`
         "line": 36,
         "col": 1
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1508,7 +1508,7 @@ Third child `state`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => React.element",
+      "type": "(~greeting: string) => element",
       "tail": "no"
     }
   ]
@@ -1551,7 +1551,7 @@ Third child `show` in `state.show`
         "line": 34,
         "col": 42
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1563,7 +1563,7 @@ Third child `show` in `state.show`
         "line": 35,
         "col": 9
       },
-      "type": "array(React.element)",
+      "type": "array(element)",
       "tail": "no"
     },
     {
@@ -1575,7 +1575,7 @@ Third child `show` in `state.show`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1587,7 +1587,7 @@ Third child `show` in `state.show`
         "line": 35,
         "col": 9
       },
-      "type": "option(React.element)",
+      "type": "option(element)",
       "tail": "no"
     },
     {
@@ -1611,7 +1611,7 @@ Third child `show` in `state.show`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1623,7 +1623,7 @@ Third child `show` in `state.show`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1635,7 +1635,7 @@ Third child `show` in `state.show`
         "line": 36,
         "col": 1
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1647,7 +1647,7 @@ Third child `show` in `state.show`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => React.element",
+      "type": "(~greeting: string) => element",
       "tail": "no"
     }
   ]
@@ -1666,7 +1666,7 @@ Third child `string`
         "line": 34,
         "col": 24
       },
-      "type": "string => React.element",
+      "type": "string => element",
       "tail": "no"
     },
     {
@@ -1678,7 +1678,7 @@ Third child `string`
         "line": 34,
         "col": 34
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1690,7 +1690,7 @@ Third child `string`
         "line": 34,
         "col": 42
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1702,7 +1702,7 @@ Third child `string`
         "line": 35,
         "col": 9
       },
-      "type": "array(React.element)",
+      "type": "array(element)",
       "tail": "no"
     },
     {
@@ -1714,7 +1714,7 @@ Third child `string`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1726,7 +1726,7 @@ Third child `string`
         "line": 35,
         "col": 9
       },
-      "type": "option(React.element)",
+      "type": "option(element)",
       "tail": "no"
     },
     {
@@ -1750,7 +1750,7 @@ Third child `string`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1762,7 +1762,7 @@ Third child `string`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1774,7 +1774,7 @@ Third child `string`
         "line": 36,
         "col": 1
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1786,7 +1786,7 @@ Third child `string`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => React.element",
+      "type": "(~greeting: string) => element",
       "tail": "no"
     }
   ]
@@ -1817,7 +1817,7 @@ Third child `greeting`
         "line": 34,
         "col": 34
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1829,7 +1829,7 @@ Third child `greeting`
         "line": 34,
         "col": 42
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1841,7 +1841,7 @@ Third child `greeting`
         "line": 35,
         "col": 9
       },
-      "type": "array(React.element)",
+      "type": "array(element)",
       "tail": "no"
     },
     {
@@ -1853,7 +1853,7 @@ Third child `greeting`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1865,7 +1865,7 @@ Third child `greeting`
         "line": 35,
         "col": 9
       },
-      "type": "option(React.element)",
+      "type": "option(element)",
       "tail": "no"
     },
     {
@@ -1889,7 +1889,7 @@ Third child `greeting`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1901,7 +1901,7 @@ Third child `greeting`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1913,7 +1913,7 @@ Third child `greeting`
         "line": 36,
         "col": 1
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1925,7 +1925,7 @@ Third child `greeting`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => React.element",
+      "type": "(~greeting: string) => element",
       "tail": "no"
     }
   ]
@@ -1944,7 +1944,7 @@ Third child `null`
         "line": 34,
         "col": 41
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1956,7 +1956,7 @@ Third child `null`
         "line": 34,
         "col": 42
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1968,7 +1968,7 @@ Third child `null`
         "line": 35,
         "col": 9
       },
-      "type": "array(React.element)",
+      "type": "array(element)",
       "tail": "no"
     },
     {
@@ -1980,7 +1980,7 @@ Third child `null`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -1992,7 +1992,7 @@ Third child `null`
         "line": 35,
         "col": 9
       },
-      "type": "option(React.element)",
+      "type": "option(element)",
       "tail": "no"
     },
     {
@@ -2016,7 +2016,7 @@ Third child `null`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -2028,7 +2028,7 @@ Third child `null`
         "line": 35,
         "col": 9
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -2040,7 +2040,7 @@ Third child `null`
         "line": 36,
         "col": 1
       },
-      "type": "React.element",
+      "type": "element",
       "tail": "no"
     },
     {
@@ -2052,7 +2052,7 @@ Third child `null`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => React.element",
+      "type": "(~greeting: string) => element",
       "tail": "no"
     }
   ]
diff --git a/ppx/test/keys.t/run.t b/ppx/test/keys.t/run.t
index 8d5c68e9d..3242dd6b0 100644
--- a/ppx/test/keys.t/run.t
+++ b/ppx/test/keys.t/run.t
@@ -25,14 +25,14 @@ _^
   > -filename component.re < component.re | jq '.value[0]'
   {
     "start": {
-      "line": 8,
-      "col": 0
+      "line": 10,
+      "col": 2
     },
     "end": {
       "line": 10,
       "col": 85
     },
-    "type": "{.. \"author\": Author.t} => React.element",
+    "type": "string",
     "tail": "no"
   }
 
diff --git a/ppx/test/react.t b/ppx/test/react.t
index 25d074a12..53833efd7 100644
--- a/ppx/test/react.t
+++ b/ppx/test/react.t
@@ -11,7 +11,7 @@ Demonstrate how to use the React JSX PPX
   >  (alias mel)
   >  (compile_flags :standard -w -20)
   >  (emit_stdlib false)
-  >  (libraries reason-react)
+  >  (libraries reason-react melange.belt)
   >  (preprocess (pps melange.ppx reason-react-ppx)))
   > EOF
 
diff --git a/reason-react-ppx.opam b/reason-react-ppx.opam
index eabfeff37..6c8703246 100644
--- a/reason-react-ppx.opam
+++ b/reason-react-ppx.opam
@@ -15,10 +15,10 @@ doc: "https://reasonml.github.io/reason-react"
 bug-reports: "https://github.com/reasonml/reason-react/issues"
 depends: [
   "dune" {>= "3.9"}
-  "ocaml" {>= "5.1.0" & < "5.2.0"}
+  "ocaml" {>= "5.1.1" & < "5.2.0"}
   "reason" {>= "3.10.0"}
   "ppxlib" {>= "0.28.0"}
-  "merlin" {= "4.9-501preview" & with-test}
+  "merlin" {= "4.13.1-501" & with-test}
   "ocamlformat" {= "0.24.0" & with-dev-setup}
   "odoc" {with-doc}
 ]
diff --git a/reason-react.opam b/reason-react.opam
index 36a87cef8..b614954e1 100644
--- a/reason-react.opam
+++ b/reason-react.opam
@@ -18,8 +18,8 @@ doc: "https://reasonml.github.io/reason-react"
 bug-reports: "https://github.com/reasonml/reason-react/issues"
 depends: [
   "dune" {>= "3.9"}
-  "ocaml" {>= "5.1.0" & < "5.2.0"}
-  "melange" {>= "2.0.0"}
+  "ocaml" {>= "5.1.1" & < "5.2.0"}
+  "melange" {>= "3.0.0"}
   "reason-react-ppx" {= version}
   "reason" {>= "3.10.0"}
   "ocaml-lsp-server" {with-test}
diff --git a/src/React.re b/src/React.re
index 873d87347..45071cda2 100644
--- a/src/React.re
+++ b/src/React.re
@@ -321,7 +321,7 @@ external createElement: (component('props), 'props) => element =
 [@mel.module "react"]
 external cloneElement: (element, 'props) => element = "cloneElement";
 
-[@mel.splice] [@mel.module "react"]
+[@mel.variadic] [@mel.module "react"]
 external createElementVariadic:
   (component('props), 'props, array(element)) => element =
   "createElement";
diff --git a/src/React.rei b/src/React.rei
index fcbdb1120..f24d7273f 100644
--- a/src/React.rei
+++ b/src/React.rei
@@ -19,7 +19,7 @@ external createElement: (component('props), 'props) => element =
 [@mel.module "react"]
 external cloneElement: (element, 'props) => element = "cloneElement";
 
-[@mel.splice] [@mel.module "react"]
+[@mel.variadic] [@mel.module "react"]
 external createElementVariadic:
   (component('props), 'props, array(element)) => element =
   "createElement";
diff --git a/src/ReactDOM.re b/src/ReactDOM.re
index 42b3a5777..ecc27cb7f 100644
--- a/src/ReactDOM.re
+++ b/src/ReactDOM.re
@@ -489,7 +489,7 @@ module Ref = {
 };
 
 /* This list isn't exhaustive. We'll add more as we go. */
-[@deriving abstract]
+[@deriving (jsProperties, getSet)]
 type domProps = {
   [@mel.optional]
   key: option(string),
diff --git a/src/ReactDOM.rei b/src/ReactDOM.rei
index d6cbd26d4..0d80a6a92 100644
--- a/src/ReactDOM.rei
+++ b/src/ReactDOM.rei
@@ -490,7 +490,7 @@ module Ref: {
 };
 
 /* This list isn't exhaustive. We'll add more as we go. */
-[@deriving abstract]
+[@deriving (jsProperties, getSet)]
 type domProps = {
   [@mel.optional]
   key: option(string),
diff --git a/src/ReactDOMServerNode.re b/src/ReactDOMServerNode.re
index 3d00c0121..eea22122b 100644
--- a/src/ReactDOMServerNode.re
+++ b/src/ReactDOMServerNode.re
@@ -1,4 +1,4 @@
-[@deriving abstract]
+[@deriving (jsProperties, getSet)]
 type options = {
   [@mel.optional]
   bootstrapScriptContent: option(string),
diff --git a/src/ReactDOMServerNode.rei b/src/ReactDOMServerNode.rei
index c1cef959e..2153fbfee 100644
--- a/src/ReactDOMServerNode.rei
+++ b/src/ReactDOMServerNode.rei
@@ -1,4 +1,4 @@
-[@deriving abstract]
+[@deriving (jsProperties, getSet)]
 type options = {
   [@mel.optional]
   bootstrapScriptContent: option(string),
@@ -45,5 +45,4 @@ let renderToPipeableStream:
     ~progressiveChunkSize: int=?,
     React.element
   ) =>
-
   pipeableStream;
diff --git a/src/ReactDOMTestUtils.re b/src/ReactDOMTestUtils.re
index 725e9071f..8d1d1c258 100644
--- a/src/ReactDOMTestUtils.re
+++ b/src/ReactDOMTestUtils.re
@@ -126,7 +126,9 @@ module DOM = {
 
   let findBySelectorAndPartialTextContent = (element, selector, content) =>
     querySelectorAll(element, selector)
-    |> Array.find_opt(node => node->textContent->Js.String2.includes(content));
+    |> Array.find_opt(node =>
+         Js.String.includes(~search=content, node->textContent)
+       );
 };
 
 let prepareContainer = (container: ref(option(Dom.element)), ()) => {
diff --git a/src/ReasonReactRouter.re b/src/ReasonReactRouter.re
index 89603b17a..8f562a9f5 100644
--- a/src/ReasonReactRouter.re
+++ b/src/ReasonReactRouter.re
@@ -73,23 +73,22 @@ let pathParse = str =>
   | "/" => []
   | raw =>
     /* remove the preceeding /, which every pathname seems to have */
-    let raw = Js.String.sliceToEnd(~from=1, raw);
+    let raw = Js.String.slice(~start=1, raw);
     /* remove the trailing /, which some pathnames might have. Ugh */
     let raw =
       switch (Js.String.get(raw, Js.String.length(raw) - 1)) {
-      | "/" => Js.String.slice(~from=0, ~to_=-1, raw)
+      | "/" => Js.String.slice(~start=0, ~end_=-1, raw)
       | _ => raw
       };
     /* remove search portion if present in string */
     let raw =
-      switch (raw |> Js.String.splitAtMost("?", ~limit=2)) {
+      switch (Js.String.split(~sep="?", ~limit=2, raw)) {
       | [|path, _|] => path
       | _ => raw
       };
 
-    raw
-    |> Js.String.split("/")
-    |> Js.Array.filter(item => String.length(item) != 0)
+    Js.String.split(~sep="/", raw)
+    |> Js.Array.filter(~f=item => String.length(item) != 0)
     |> arrayToList;
   };
 let path = (~serverUrlString=?, ()) =>
@@ -109,7 +108,7 @@ let hash = () =>
     | raw =>
       /* remove the preceeding #, which every hash seems to have.
          Why is this even included in location.hash?? */
-      raw |> Js.String.sliceToEnd(~from=1)
+      Js.String.slice(~start=1, raw)
     }
   };
 let searchParse = str =>
@@ -117,7 +116,7 @@ let searchParse = str =>
   | ""
   | "?" => ""
   | raw =>
-    switch (raw |> Js.String.splitAtMost("?", ~limit=2)) {
+    switch (Js.String.split(~sep="?", ~limit=2, raw)) {
     | [|_, search|] => search
     | _ => ""
     }
diff --git a/test/React__test.re b/test/React__test.re
index 8b26c8339..b96e9da61 100644
--- a/test/React__test.re
+++ b/test/React__test.re
@@ -24,7 +24,7 @@ module DummyComponentThatMapsChildren = {
       {children->React.Children.mapWithIndex((element, index) => {
          React.cloneElement(
            element,
-           {"key": {j|$index|j}, "data-index": index},
+           {"key": string_of_int(index), "data-index": index},
          )
        })}
     </div>;
@@ -133,7 +133,9 @@ describe("React", () => {
     let container = getContainer(container);
     let array =
       [|1, 2, 3|]
-      ->Array.map(item => {<div key={j|$item|j}> item->React.int </div>});
+      ->Array.map(item => {
+          <div key={string_of_int(item)}> item->React.int </div>
+        });
     let root = ReactDOM.Client.createRoot(container);
 
     act(() => {
@@ -335,7 +337,7 @@ describe("React", () => {
             fallback={({error: _, info}) => {
               expect(
                 info.componentStack
-                ->Js.String2.includes("ComponentThatThrows"),
+                ->Js.String.includes(~search="ComponentThatThrows"),
               )
               ->toBe(true);
               <strong> "An error occured"->React.string </strong>;