diff --git a/package-lock.json b/package-lock.json
index c6ae80f..6f7f598 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6823,6 +6823,11 @@
       "integrity": "sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg==",
       "dev": true
     },
+    "preact": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.4.1.tgz",
+      "integrity": "sha512-WKrRpCSwL2t3tpOOGhf2WfTpcmbpxaWtDbdJdKdjd0aEiTkvOmS4NBkG6kzlaAHI9AkQ3iVqbFWM3Ei7mZ4o1Q=="
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -7007,16 +7012,6 @@
         }
       }
     },
-    "react": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
-      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
-      }
-    },
     "react-contenteditable": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/react-contenteditable/-/react-contenteditable-3.3.3.tgz",
@@ -7026,17 +7021,6 @@
         "prop-types": "^15.7.1"
       }
     },
-    "react-dom": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
-      "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.1"
-      }
-    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -7460,15 +7444,6 @@
         }
       }
     },
-    "scheduler": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      }
-    },
     "schema-utils": {
       "version": "2.6.5",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.5.tgz",
diff --git a/package.json b/package.json
index fb75e4d..51b6df1 100644
--- a/package.json
+++ b/package.json
@@ -41,9 +41,8 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
-    "react": "^16.13.1",
+    "preact": "^10.4.1",
     "react-contenteditable": "^3.3.3",
-    "react-dom": "^16.13.1",
     "react-transition-group": "^4.3.0",
     "tiny-emitter": "^2.1.0"
   }
diff --git a/src/Icons.js b/src/Icons.js
index 22d1f4e..40fe762 100644
--- a/src/Icons.js
+++ b/src/Icons.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'preact/compat';
 
 /**
  * Icon from IcoFont https://icofont.com/, licensed under the CC BY 4.0 license.
diff --git a/src/TextAnnotator.jsx b/src/TextAnnotator.jsx
index 8e58216..63e9f9c 100644
--- a/src/TextAnnotator.jsx
+++ b/src/TextAnnotator.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component } from 'preact/compat';
 import Editor from './editor/Editor';
 import Highlighter from './highlighter/Highlighter';
 import SelectionHandler from './selection/SelectionHandler';
diff --git a/src/editor/Editor.jsx b/src/editor/Editor.jsx
index 9bb6f38..f0a7be1 100644
--- a/src/editor/Editor.jsx
+++ b/src/editor/Editor.jsx
@@ -1,4 +1,5 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React from 'preact/compat';
+import { useState, useRef, useEffect } from 'preact/hooks';
 import setPosition from './setPosition';
 
 const autoApply = props => {
diff --git a/src/editor/useClickOutside.js b/src/editor/useClickOutside.js
index a7b9c50..ff662b6 100644
--- a/src/editor/useClickOutside.js
+++ b/src/editor/useClickOutside.js
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect } from 'preact/hooks';
 
 export default function useClickOutside(ref, callback) {
 
diff --git a/src/editor/widgets/comment/Comment.jsx b/src/editor/widgets/comment/Comment.jsx
index 52e66be..45bd775 100644
--- a/src/editor/widgets/comment/Comment.jsx
+++ b/src/editor/widgets/comment/Comment.jsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React from 'preact/compat';
+import { useState } from 'preact/hooks';
 import DropdownMenu from './DropdownMenu';
 import TextEntryField from './TextEntryField';
 import { ChevronDownIcon } from '../../../Icons';
diff --git a/src/editor/widgets/comment/CommentWidget.jsx b/src/editor/widgets/comment/CommentWidget.jsx
index af96cdf..d78056a 100644
--- a/src/editor/widgets/comment/CommentWidget.jsx
+++ b/src/editor/widgets/comment/CommentWidget.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'preact/compat';
 import Comment from './Comment';
 import TextEntryField from './TextEntryField';
 
diff --git a/src/editor/widgets/comment/DropdownMenu.jsx b/src/editor/widgets/comment/DropdownMenu.jsx
index aac7055..d2c934e 100644
--- a/src/editor/widgets/comment/DropdownMenu.jsx
+++ b/src/editor/widgets/comment/DropdownMenu.jsx
@@ -1,4 +1,5 @@
-import React, { useRef } from 'react';
+import React from 'preact/compat';
+import { useRef } from 'preact/hooks';
 import useClickOutside from '../../useClickOutside';
 
 const DropdownMenu = props => {
diff --git a/src/editor/widgets/comment/TextEntryField.jsx b/src/editor/widgets/comment/TextEntryField.jsx
index 553f15d..37bfd87 100644
--- a/src/editor/widgets/comment/TextEntryField.jsx
+++ b/src/editor/widgets/comment/TextEntryField.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component } from 'preact/compat';
 import ContentEditable from 'react-contenteditable';
 
 /** 
diff --git a/src/editor/widgets/tag/TagWidget.jsx b/src/editor/widgets/tag/TagWidget.jsx
index 3b8ad46..1674394 100644
--- a/src/editor/widgets/tag/TagWidget.jsx
+++ b/src/editor/widgets/tag/TagWidget.jsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import React from 'preact/compat';
+import { useState } from 'preact/hooks';
 import { CSSTransition } from 'react-transition-group';
 import { CloseIcon } from '../../../Icons';
 
diff --git a/src/relations/editor/RelationEditor.jsx b/src/relations/editor/RelationEditor.jsx
index 84379b2..b6a490d 100644
--- a/src/relations/editor/RelationEditor.jsx
+++ b/src/relations/editor/RelationEditor.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component } from 'preact/compat';
 import ContentEditable from 'react-contenteditable';
 import { TrashIcon, CheckIcon } from '../../Icons';
 
diff --git a/webpack.config.js b/webpack.config.js
index 3041e24..5109b7f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -11,7 +11,11 @@ module.exports = {
     hints: false
   },
   resolve: {
-    extensions: ['.js', '.jsx']
+    extensions: ['.js', '.jsx'],
+    alias: {
+      "react": "preact/compat",
+      "react-dom": "preact/compat"
+    }
   },
   module: {
     rules: [