From 6765d769a55aa669bb2b0aa06b8ce1b27abbac7e Mon Sep 17 00:00:00 2001
From: Zihua Li <i@zihua.li>
Date: Thu, 18 Jan 2024 21:08:04 +0800
Subject: [PATCH] Update quick start documentation

---
 package-lock.json                             | 367 +++++++++++++++++-
 packages/website/content/docs/quickstart.mdx  |   8 +-
 packages/website/gatsby-ssr.js                |  12 +
 packages/website/package.json                 |   1 +
 packages/website/root-wrapper.js              |   2 +
 packages/website/src/components/Sandpack.jsx  |  85 ++++
 .../src/components/Sandpack.module.scss       |  27 ++
 packages/website/src/pages/index.jsx          | 167 ++++----
 8 files changed, 569 insertions(+), 100 deletions(-)
 create mode 100644 packages/website/src/components/Sandpack.jsx
 create mode 100644 packages/website/src/components/Sandpack.module.scss

diff --git a/package-lock.json b/package-lock.json
index ca739c34cc..bbf4494eb1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2080,6 +2080,194 @@
         "partytown": "bin/partytown.cjs"
       }
     },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.12.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.12.0.tgz",
+      "integrity": "sha512-r4IjdYFthwbCQyvqnSlx0WBHRHi8nBvU+WjJxFUij81qsBfhNudf/XKKmmC2j3m0LaOYUQTf3qiEK1J8lO1sdg==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.3.3.tgz",
+      "integrity": "sha512-dO4hcF0fGT9tu1Pj1D2PvGvxjeGkbC6RGcZw6Qs74TH+Ed1gw98jmUgd2axWvIZEqTeTuFrg1lEB1KV6cK9h1A==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-css": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.2.1.tgz",
+      "integrity": "sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/css": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-html": {
+      "version": "6.4.7",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.7.tgz",
+      "integrity": "sha512-y9hWSSO41XlcL4uYwWyk0lEgTHcelWWfRuqmvcAmxfCs0HNWZdriWo/EU43S63SxEZpc1Hd50Itw7ktfQvfkUg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/css": "^1.1.0",
+        "@lezer/html": "^1.3.0"
+      }
+    },
+    "node_modules/@codemirror/lang-javascript": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.1.tgz",
+      "integrity": "sha512-jlFOXTejVyiQCW3EQwvKH0m99bUYIw40oPmFjSX2VS78yzfe0HELZ+NEo9Yfo1MkGRpGlj3Gnu4rdxV1EnAs5A==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.0.tgz",
+      "integrity": "sha512-2vaNn9aPGCRFKWcHPFksctzJ8yS5p7YoaT+jHpc0UGKzNuAIx4qy6R5wiqbP+heEEdyaABA582mNqSHzSoYdmg==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.1.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.4.2.tgz",
+      "integrity": "sha512-wzRkluWb1ptPKdzlsrbwwjYCPLgzU6N88YBAmlZi8WFyuiEduSd05MnJYNogzyc8rPK7pj6m95ptUApc8sHKVA==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.0.tgz",
+      "integrity": "sha512-hm8XshYj5Fo30Bb922QX9hXB/bxOAVH+qaqHBzw5TKa72vOeslyGwd4X8M0c1dJ9JqxlaMceOQ8RsL9tC7gU0A=="
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.23.0.tgz",
+      "integrity": "sha512-/51px9N4uW8NpuWkyUX+iam5+PM6io2fm+QmRnzwqBy5v/pwGg9T0kILFtYeum8hjuvENtgsGNKluOfqIICmeQ==",
+      "dependencies": {
+        "@codemirror/state": "^6.4.0",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
+    "node_modules/@codesandbox/nodebox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@codesandbox/nodebox/-/nodebox-0.1.8.tgz",
+      "integrity": "sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg==",
+      "dependencies": {
+        "outvariant": "^1.4.0",
+        "strict-event-emitter": "^0.4.3"
+      }
+    },
+    "node_modules/@codesandbox/sandpack-client": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@codesandbox/sandpack-client/-/sandpack-client-2.11.2.tgz",
+      "integrity": "sha512-TdKmmsPpTbW7NLm2PuiHM+rltDKoF09Y6kRWhkH6IrQFqp3jWaqTlY5r66KfJisRUxeqiUF6o2yL/kZR2oFcig==",
+      "dependencies": {
+        "@codesandbox/nodebox": "0.1.8",
+        "buffer": "^6.0.3",
+        "dequal": "^2.0.2",
+        "outvariant": "1.4.0",
+        "static-browser-server": "1.0.3"
+      }
+    },
+    "node_modules/@codesandbox/sandpack-client/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/@codesandbox/sandpack-react": {
+      "version": "2.11.3",
+      "resolved": "https://registry.npmjs.org/@codesandbox/sandpack-react/-/sandpack-react-2.11.3.tgz",
+      "integrity": "sha512-Syr/nb8bJYvlx6CoaXHlWDapVOp0ZJkXCZDWBCzKCR7Q1y7Bsx15LEuqSPzGQqJa/J8qyy/dRYlpKvPkZtOoFw==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.4.0",
+        "@codemirror/commands": "^6.1.3",
+        "@codemirror/lang-css": "^6.0.1",
+        "@codemirror/lang-html": "^6.4.0",
+        "@codemirror/lang-javascript": "^6.1.2",
+        "@codemirror/language": "^6.3.2",
+        "@codemirror/state": "^6.2.0",
+        "@codemirror/view": "^6.7.1",
+        "@codesandbox/sandpack-client": "^2.11.2",
+        "@lezer/highlight": "^1.1.3",
+        "@react-hook/intersection-observer": "^3.1.1",
+        "@stitches/core": "^1.2.6",
+        "anser": "^2.1.1",
+        "clean-set": "^1.1.2",
+        "codesandbox-import-util-types": "^2.2.3",
+        "dequal": "^2.0.2",
+        "escape-carriage": "^1.3.1",
+        "lz-string": "^1.4.4",
+        "react-devtools-inline": "4.4.0",
+        "react-is": "^17.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
+    "node_modules/@codesandbox/sandpack-react/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+    },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -3200,16 +3388,52 @@
       "dev": true
     },
     "node_modules/@lezer/common": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.1.1.tgz",
-      "integrity": "sha512-aAPB9YbvZHqAW+bIwiuuTDGB4DG0sYNRObGLxud8cW7osw1ZQxfDuTZ8KQiqfZ0QJGcR34CvpTMDXEyo/+Htgg==",
-      "dev": true
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz",
+      "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ=="
+    },
+    "node_modules/@lezer/css": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.7.tgz",
+      "integrity": "sha512-7BlFFAKNn/b39jJLrhdLSX5A2k56GIJvyLqdmm7UU+7XvequY084iuKDMAEhAmAzHnwDE8FK4OQtsIUssW91tg==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.0.tgz",
+      "integrity": "sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/html": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.8.tgz",
+      "integrity": "sha512-EXseJ3pUzWxE6XQBQdqWHZqqlGQRSuNMBcLb6mZWS2J2v+QZhOObD+3ZIKIcm59ntTzyor4LqFTb72iJc3k23Q==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/javascript": {
+      "version": "1.4.13",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.13.tgz",
+      "integrity": "sha512-5IBr8LIO3xJdJH1e9aj/ZNLE4LSbdsx25wFmGRAZsj2zSmwAYjx26JyU/BYOCpRQlu1jcv1z3vy4NB9+UkfRow==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
+      }
     },
     "node_modules/@lezer/lr": {
       "version": "1.3.14",
       "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.14.tgz",
       "integrity": "sha512-z5mY4LStlA3yL7aHT/rqgG614cfcvklS+8oFRFBYrs4YaWLJyKKM4+nN6KopToX0o9Hj6zmH6M5kinOYuy06ug==",
-      "dev": true,
       "dependencies": {
         "@lezer/common": "^1.0.0"
       }
@@ -3461,6 +3685,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@open-draft/deferred-promise": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz",
+      "integrity": "sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA=="
+    },
     "node_modules/@parcel/bundler-default": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/@parcel/bundler-default/-/bundler-default-2.6.2.tgz",
@@ -4818,6 +5047,26 @@
       "integrity": "sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==",
       "dev": true
     },
+    "node_modules/@react-hook/intersection-observer": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@react-hook/intersection-observer/-/intersection-observer-3.1.1.tgz",
+      "integrity": "sha512-OTDx8/wFaRvzFtKl1dEUEXSOqK2zVJHporiTTdC2xO++0e9FEx9wIrPis5q3lqtXeZH9zYGLbk+aB75qNFbbuw==",
+      "dependencies": {
+        "@react-hook/passive-layout-effect": "^1.2.0",
+        "intersection-observer": "^0.10.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/@react-hook/passive-layout-effect": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz",
+      "integrity": "sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.9.4",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.4.tgz",
@@ -5091,6 +5340,11 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/@stitches/core": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@stitches/core/-/core-1.2.8.tgz",
+      "integrity": "sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg=="
+    },
     "node_modules/@swc/helpers": {
       "version": "0.4.36",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.36.tgz",
@@ -6628,8 +6882,7 @@
     "node_modules/anser": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/anser/-/anser-2.1.1.tgz",
-      "integrity": "sha512-nqLm4HxOTpeLOxcmB3QWmV5TcDFhW9y/fyQ+hivtDFcK4OQ+pQ5fzPnXHM1Mfcm0VkLtvVi1TCPr++Qy0Q/3EQ==",
-      "dev": true
+      "integrity": "sha512-nqLm4HxOTpeLOxcmB3QWmV5TcDFhW9y/fyQ+hivtDFcK4OQ+pQ5fzPnXHM1Mfcm0VkLtvVi1TCPr++Qy0Q/3EQ=="
     },
     "node_modules/ansi-align": {
       "version": "3.0.1",
@@ -7431,7 +7684,6 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -8210,6 +8462,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/clean-set": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/clean-set/-/clean-set-1.1.2.tgz",
+      "integrity": "sha512-cA8uCj0qSoG9e0kevyOWXwPaELRPVg5Pxp6WskLMwerx257Zfnh8Nl0JBH59d7wQzij2CK7qEfJQK3RjuKKIug=="
+    },
     "node_modules/cli-boxes": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
@@ -8476,6 +8733,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/codesandbox-import-util-types": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/codesandbox-import-util-types/-/codesandbox-import-util-types-2.2.3.tgz",
+      "integrity": "sha512-Qj00p60oNExthP2oR3vvXmUGjukij+rxJGuiaKM6tyUmSyimdZsqHI/TUvFFClAffk9s7hxGnQgWQ8KCce27qQ=="
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -8879,6 +9141,11 @@
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
       "dev": true
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+    },
     "node_modules/cross-fetch": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz",
@@ -9251,7 +9518,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
       "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
-      "dev": true,
       "dependencies": {
         "es5-ext": "^0.10.50",
         "type": "^1.0.1"
@@ -10363,7 +10629,6 @@
       "version": "0.10.62",
       "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
       "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
-      "dev": true,
       "hasInstallScript": true,
       "dependencies": {
         "es6-iterator": "^2.0.3",
@@ -10378,7 +10643,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
       "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
-      "dev": true,
       "dependencies": {
         "d": "1",
         "es5-ext": "^0.10.35",
@@ -10395,7 +10659,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
       "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
-      "dev": true,
       "dependencies": {
         "d": "^1.0.1",
         "ext": "^1.1.2"
@@ -10459,6 +10722,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-carriage": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/escape-carriage/-/escape-carriage-1.3.1.tgz",
+      "integrity": "sha512-GwBr6yViW3ttx1kb7/Oh+gKQ1/TrhYwxKqVmg5gS+BK+Qe2KrOa/Vh7w3HPBvgGf0LfcDGoY9I6NHKoA5Hozhw=="
+    },
     "node_modules/escape-goat": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz",
@@ -11451,7 +11719,6 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
       "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
-      "dev": true,
       "dependencies": {
         "type": "^2.7.2"
       }
@@ -11459,8 +11726,7 @@
     "node_modules/ext/node_modules/type": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
-      "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==",
-      "dev": true
+      "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw=="
     },
     "node_modules/extend": {
       "version": "3.0.2",
@@ -15487,6 +15753,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/intersection-observer": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.10.0.tgz",
+      "integrity": "sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ=="
+    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -16889,6 +17160,14 @@
         "es5-ext": "~0.10.2"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.5",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
@@ -17987,7 +18266,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -18258,8 +18536,7 @@
     "node_modules/next-tick": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
-      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
-      "dev": true
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
     },
     "node_modules/nice-try": {
       "version": "1.0.5",
@@ -18867,6 +19144,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/outvariant": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.0.tgz",
+      "integrity": "sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw=="
+    },
     "node_modules/p-cancelable": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
@@ -20894,6 +21176,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/react-devtools-inline": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-devtools-inline/-/react-devtools-inline-4.4.0.tgz",
+      "integrity": "sha512-ES0GolSrKO8wsKbsEkVeiR/ZAaHQTY4zDh1UW8DImVmm8oaGLl3ijJDvSGe+qDRKPZdPRnDtWWnSvvrgxXdThQ==",
+      "dependencies": {
+        "es6-symbol": "^3"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -23000,6 +23290,28 @@
       "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==",
       "dev": true
     },
+    "node_modules/static-browser-server": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/static-browser-server/-/static-browser-server-1.0.3.tgz",
+      "integrity": "sha512-ZUyfgGDdFRbZGGJQ1YhiM930Yczz5VlbJObrQLlk24+qNHVQx4OlLcYswEUo3bIyNAbQUIUR9Yr5/Hqjzqb4zA==",
+      "dependencies": {
+        "@open-draft/deferred-promise": "^2.1.0",
+        "dotenv": "^16.0.3",
+        "mime-db": "^1.52.0",
+        "outvariant": "^1.3.0"
+      }
+    },
+    "node_modules/static-browser-server/node_modules/dotenv": {
+      "version": "16.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
+      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/motdotla/dotenv?sponsor=1"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -23024,6 +23336,11 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/strict-event-emitter": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.4.6.tgz",
+      "integrity": "sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg=="
+    },
     "node_modules/strict-uri-encode": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
@@ -23285,6 +23602,11 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/style-mod": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.0.tgz",
+      "integrity": "sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA=="
+    },
     "node_modules/style-to-object": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.4.tgz",
@@ -24233,8 +24555,7 @@
     "node_modules/type": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
-      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
-      "dev": true
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -25358,6 +25679,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
@@ -26621,6 +26947,7 @@
       "version": "2.0.0-beta.0",
       "license": "BSD-3-Clause",
       "dependencies": {
+        "@codesandbox/sandpack-react": "^2.11.3",
         "@mdx-js/mdx": "^2.1.5",
         "@mdx-js/react": "^2.1.5",
         "babel-preset-gatsby": "^2.24.0",
diff --git a/packages/website/content/docs/quickstart.mdx b/packages/website/content/docs/quickstart.mdx
index bf0b20921a..32d2f7173d 100644
--- a/packages/website/content/docs/quickstart.mdx
+++ b/packages/website/content/docs/quickstart.mdx
@@ -4,7 +4,8 @@ title: Quickstart
 
 The best way to get started is to try a simple example. Quill is initialized with a DOM element to contain the editor. The contents of that element will become the initial contents of Quill.
 
-```html
+  <Sandpack files={{
+  "/index.html":  `
 <!-- Include stylesheet -->
 <link href="{{site.cdn}}/quill.snow.css" rel="stylesheet" />
 
@@ -23,8 +24,9 @@ The best way to get started is to try a simple example. Quill is initialized wit
   const quill = new Quill('#editor', {
     theme: 'snow'
   });
-</script>
-```
+</script>`
+
+  }}/ >
 
 And that's all there is to it!
 
diff --git a/packages/website/gatsby-ssr.js b/packages/website/gatsby-ssr.js
index 5396db59ef..47ce86a0d4 100644
--- a/packages/website/gatsby-ssr.js
+++ b/packages/website/gatsby-ssr.js
@@ -1,3 +1,15 @@
+const { getSandpackCssText } = require('@codesandbox/sandpack-react');
 const { wrapRootElement } = require('./root-wrapper');
 
 exports.wrapPageElement = wrapRootElement;
+exports.onRenderBody = ({ setHeadComponents }) => {
+  setHeadComponents([
+    <style
+      id="sandpack"
+      key="sandpack-css"
+      dangerouslySetInnerHTML={{
+        __html: getSandpackCssText(),
+      }}
+    />,
+  ]);
+};
diff --git a/packages/website/package.json b/packages/website/package.json
index 31e018e571..a831525656 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -13,6 +13,7 @@
     "serve": "gatsby serve --port $npm_package_config_ports_gatsby"
   },
   "dependencies": {
+    "@codesandbox/sandpack-react": "^2.11.3",
     "@mdx-js/mdx": "^2.1.5",
     "@mdx-js/react": "^2.1.5",
     "babel-preset-gatsby": "^2.24.0",
diff --git a/packages/website/root-wrapper.js b/packages/website/root-wrapper.js
index 0a6434313c..c842fc0117 100644
--- a/packages/website/root-wrapper.js
+++ b/packages/website/root-wrapper.js
@@ -1,6 +1,7 @@
 import { MDXProvider } from '@mdx-js/react';
 import { Highlight, themes } from 'prism-react-renderer';
 import CodePen from './src/components/CodePen';
+import Sandpack from './src/components/Sandpack';
 import Editor from './src/components/Editor';
 import {
   Heading1,
@@ -13,6 +14,7 @@ import {
 
 const components = {
   CodePen,
+  Sandpack,
   Editor,
   More: () => <div style={{ display: 'none' }}>{/* more */}</div>,
   h1: Heading1,
diff --git a/packages/website/src/components/Sandpack.jsx b/packages/website/src/components/Sandpack.jsx
new file mode 100644
index 0000000000..61bea9c7d6
--- /dev/null
+++ b/packages/website/src/components/Sandpack.jsx
@@ -0,0 +1,85 @@
+import { graphql, useStaticQuery } from 'gatsby';
+import {
+  SandpackProvider,
+  SandpackLayout,
+  SandpackCodeEditor,
+  SandpackPreview,
+  useSandpack,
+} from '@codesandbox/sandpack-react';
+import { useState } from 'react';
+import * as styles from './Sandpack.module.scss';
+
+const TogglePreviewButton = ({ isPreviewEnabled, setIsPreviewEnabled }) => {
+  const { sandpack } = useSandpack();
+
+  return (
+    <button
+      className={styles.togglePreviewButton}
+      onClick={() => {
+        if (!isPreviewEnabled) {
+          sandpack.runSandpack();
+        }
+        setIsPreviewEnabled(!isPreviewEnabled);
+      }}
+    >
+      {isPreviewEnabled ? 'Hide Preview' : 'Run Code'}
+    </button>
+  );
+};
+
+const Sandpack = ({ files, showConsole }) => {
+  const [isPreviewEnabled, setIsPreviewEnabled] = useState(false);
+  const [clientId, setClientId] = useState(null);
+
+  const data = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          cdn
+        }
+      }
+    }
+  `);
+
+  const cdn = data?.site.siteMetadata.cdn;
+
+  return (
+    <div className={styles.container}>
+      <SandpackProvider
+        options={{ autorun: false, autoReload: false }}
+        template="static"
+        files={Object.keys(files).reduce(
+          (f, name) => ({
+            ...f,
+            [name]: files[name].replace(/\{\{site\.cdn\}\}/g, cdn).trim(),
+          }),
+          {},
+        )}
+      >
+        <div className={styles.bar}>
+          <TogglePreviewButton
+            isPreviewEnabled={isPreviewEnabled}
+            setIsPreviewEnabled={setIsPreviewEnabled}
+          />
+        </div>
+        <SandpackLayout>
+          <SandpackCodeEditor
+            showLineNumbers
+            wrapContent
+            showRunButton={false}
+          />
+          {isPreviewEnabled && (
+            <SandpackPreview
+              ref={(p) => {
+                setClientId(p?.clientId);
+              }}
+              showOpenInCodeSandbox={false}
+            />
+          )}
+        </SandpackLayout>
+      </SandpackProvider>
+    </div>
+  );
+};
+
+export default Sandpack;
diff --git a/packages/website/src/components/Sandpack.module.scss b/packages/website/src/components/Sandpack.module.scss
new file mode 100644
index 0000000000..062063c753
--- /dev/null
+++ b/packages/website/src/components/Sandpack.module.scss
@@ -0,0 +1,27 @@
+.container {
+  margin: 24px 0 32px;
+}
+
+.bar {
+  display: flex;
+  margin: 0 0 10px;
+
+  button {
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    padding: 4px 8px;
+    transition: background 0.2s;
+
+    &:hover {
+      background: #fafafa;
+    }
+
+    &:active {
+      background: #eee;
+    }
+  }
+
+  .togglePreviewButton {
+    margin-left: auto;
+  }
+}
diff --git a/packages/website/src/pages/index.jsx b/packages/website/src/pages/index.jsx
index ec912b5599..cf0e5562bd 100644
--- a/packages/website/src/pages/index.jsx
+++ b/packages/website/src/pages/index.jsx
@@ -1,44 +1,56 @@
-import DevelopersIcon from "../svg/features/developers.svg";
-import ScaleIcon from "../svg/features/scale.svg";
-import GitHub from "../components/GitHub";
-import CrossPlatformIcon from "../svg/features/cross-platform.svg";
-import Default from "../components/Default";
-import { useEffect, useRef, useState } from "react";
-import Editor from "../components/Editor";
-import classNames from "classnames";
-import SEO from "../components/SEO";
-import config from "../../gatsby-config";
+import DevelopersIcon from '../svg/features/developers.svg';
+import ScaleIcon from '../svg/features/scale.svg';
+import GitHub from '../components/GitHub';
+import CrossPlatformIcon from '../svg/features/cross-platform.svg';
+import Default from '../components/Default';
+import { useEffect, useRef, useState } from 'react';
+import Editor from '../components/Editor';
+import classNames from 'classnames';
+import SEO from '../components/SEO';
+import { graphql, useStaticQuery } from 'gatsby';
 
-const site = config.siteMetadata;
-const fonts = ["sofia", "slabo", "roboto", "inconsolata", "ubuntu"];
+const fonts = ['sofia', 'slabo', 'roboto', 'inconsolata', 'ubuntu'];
 const userBuckets = [
   {
-    Intuit: "https://www.intuit.com/",
-    LinkedIn: "https://www.linkedin.com/",
-    Microsoft: "https://www.microsoft.com/",
-    Salesforce: "https://www.salesforce.com/",
-    Slack: "https://slack.com/",
+    Intuit: 'https://www.intuit.com/',
+    LinkedIn: 'https://www.linkedin.com/',
+    Microsoft: 'https://www.microsoft.com/',
+    Salesforce: 'https://www.salesforce.com/',
+    Slack: 'https://slack.com/',
   },
   {
-    Asana: "https://asana.com/",
-    Airtable: "https://airtable.com/",
-    Grammarly: "https://www.grammarly.com/",
-    Gusto: "https://www.gusto.com/",
-    "Vox Media": "https://www.voxmedia.com/",
+    Asana: 'https://asana.com/',
+    Airtable: 'https://airtable.com/',
+    Grammarly: 'https://www.grammarly.com/',
+    Gusto: 'https://www.gusto.com/',
+    'Vox Media': 'https://www.voxmedia.com/',
   },
   {
-    Buffer: "https://buffer.com/",
-    Front: "https://frontapp.com/",
-    Lever: "https://www.lever.co/",
-    Reedsy: "https://reedsy.com/",
-    Slab: "https://slab.com/",
+    Buffer: 'https://buffer.com/',
+    Front: 'https://frontapp.com/',
+    Lever: 'https://www.lever.co/',
+    Reedsy: 'https://reedsy.com/',
+    Slab: 'https://slab.com/',
   },
 ];
 
-const Content = () => (
-  <div
-    dangerouslySetInnerHTML={{
-      __html: `
+const Content = () => {
+  const data = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          cdn
+        }
+      }
+    }
+  `);
+
+  const cdn = data?.site.siteMetadata.cdn;
+
+  return (
+    <div
+      dangerouslySetInnerHTML={{
+        __html: `
                 <h1 class="ql-align-center">Quill Rich Text Editor</h1>
                 <p><br></p>
                 <p>Quill is a free, <a href="https://github.com/quilljs/quill/">open source</a> WYSIWYG editor built for the modern web. With its <a href="https://quilljs.com/docs/modules/">modular architecture</a> and expressive <a href="https://quilljs.com/docs/api/">API</a>, it is completely customizable to fit any need.</p>
@@ -47,8 +59,8 @@ const Content = () => (
                 <p><br></p>
                 <h2 class="ql-align-center">Getting Started is Easy</h2>
                 <p><br></p>
-                <pre data-language="javascript" class="ql-syntax" spellcheck="false"><span class="hljs-comment">// &lt;link href="${site.cdn}/quill.snow.css" rel="stylesheet"&gt;</span>
-<span class="hljs-comment">// &lt;script src="${site.cdn}/quill.min.js"&gt;&lt;/script&gt;</span>
+                <pre data-language="javascript" class="ql-syntax" spellcheck="false"><span class="hljs-comment">// &lt;link href="${cdn}/quill.snow.css" rel="stylesheet"&gt;</span>
+<span class="hljs-comment">// &lt;script src="${cdn}/quill.min.js"&gt;&lt;/script&gt;</span>
 
 <span class="hljs-keyword">const</span> quill = <span class="hljs-keyword">new</span> Quill(<span class="hljs-string">'#editor'</span>, {
   modules: {
@@ -66,9 +78,10 @@ const Content = () => (
                 <p><br></p>
 
 `,
-    }}
-  />
-);
+      }}
+    />
+  );
+};
 
 const IndexPage = () => {
   const [activeIndex, setActiveIndex] = useState(1);
@@ -82,14 +95,14 @@ const IndexPage = () => {
         // @ts-expect-error
         href: bucket[name],
         title: name,
-        className: "user-" + name.toLowerCase().replace(/\s/g, ""),
+        className: 'user-' + name.toLowerCase().replace(/\s/g, ''),
       };
-    })
+    }),
   );
 
   useEffect(() => {
     // @ts-expect-error
-    const Font = Quill.import("formats/font");
+    const Font = Quill.import('formats/font');
     Font.whitelist = fonts;
     // @ts-expect-error
     Quill.register(Font, true);
@@ -98,19 +111,19 @@ const IndexPage = () => {
       window.WebFontConfig = {
         google: {
           families: [
-            "Inconsolata::latin",
-            "Ubuntu+Mono::latin",
-            "Slabo+27px::latin",
-            "Roboto+Slab::latin",
+            'Inconsolata::latin',
+            'Ubuntu+Mono::latin',
+            'Slabo+27px::latin',
+            'Roboto+Slab::latin',
           ],
         },
       };
       (function () {
-        var wf = document.createElement("script");
-        wf.src = "https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js";
-        wf.type = "text/javascript";
-        wf.async = "true";
-        var s = document.getElementsByTagName("script")[0];
+        var wf = document.createElement('script');
+        wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
+        wf.type = 'text/javascript';
+        wf.async = 'true';
+        var s = document.getElementsByTagName('script')[0];
         s.parentNode.insertBefore(wf, s);
       })();
     }
@@ -120,7 +133,7 @@ const IndexPage = () => {
 
   useEffect(() => {
     const root = document.querySelector(
-      `#carousel-container :nth-child(${activeIndex + 1}) .ql-editor`
+      `#carousel-container :nth-child(${activeIndex + 1}) .ql-editor`,
     );
     // @ts-expect-error
     const editor = Quill.find(root);
@@ -131,10 +144,10 @@ const IndexPage = () => {
 
     if (!isFirstRenderRef.current) {
       console.log(
-        "Welcome to Quill!\n\nThe editor on this page is available via `quill`. Give the API a try:\n\n\tquill.formatText(11, 4, 'bold', true);\n\nVisit the API documenation page to learn more: https://quilljs.com/docs/api/\n"
+        "Welcome to Quill!\n\nThe editor on this page is available via `quill`. Give the API a try:\n\n\tquill.formatText(11, 4, 'bold', true);\n\nVisit the API documenation page to learn more: https://quilljs.com/docs/api/\n",
       );
     } else {
-      console.info("window.quill is now bound to", editor);
+      console.info('window.quill is now bound to', editor);
     }
 
     isFirstRenderRef.current = false;
@@ -144,14 +157,14 @@ const IndexPage = () => {
     <Default pageType="home">
       <div
         id="above-container"
-        className={classNames({ "demo-active": isDemoActive })}
+        className={classNames({ 'demo-active': isDemoActive })}
       >
         <div className="container">
           <div id="users-container">
             <h2>
               <button
                 className="prev"
-                style={{ visibility: activeIndex === 0 ? "hidden" : undefined }}
+                style={{ visibility: activeIndex === 0 ? 'hidden' : undefined }}
                 onClick={() => setActiveIndex(activeIndex - 1)}
               >
                 <span className="arrow">
@@ -162,7 +175,7 @@ const IndexPage = () => {
               Switch Examples
               <button
                 className="next"
-                style={{ visibility: activeIndex === 2 ? "hidden" : undefined }}
+                style={{ visibility: activeIndex === 2 ? 'hidden' : undefined }}
                 onClick={() => setActiveIndex(activeIndex + 1)}
               >
                 <span className="arrow">
@@ -185,21 +198,21 @@ const IndexPage = () => {
           <div id="laptop-container">
             <div id="camera-container">
               <span
-                className={classNames("camera", { active: activeIndex === 0 })}
+                className={classNames('camera', { active: activeIndex === 0 })}
                 onClick={() => {
                   setActiveIndex(0);
                   setIsDemoActive(true);
                 }}
               ></span>
               <span
-                className={classNames("camera", { active: activeIndex === 1 })}
+                className={classNames('camera', { active: activeIndex === 1 })}
                 onClick={() => {
                   setActiveIndex(1);
                   setIsDemoActive(true);
                 }}
               ></span>
               <span
-                className={classNames("camera", { active: activeIndex === 2 })}
+                className={classNames('camera', { active: activeIndex === 2 })}
                 onClick={() => {
                   setActiveIndex(2);
                   setIsDemoActive(true);
@@ -215,11 +228,11 @@ const IndexPage = () => {
                   <div id="bubble-container">
                     <Editor
                       config={{
-                        bounds: "#bubble-container .ql-container",
+                        bounds: '#bubble-container .ql-container',
                         modules: {
                           syntax: true,
                         },
-                        theme: "bubble",
+                        theme: 'bubble',
                       }}
                       onSelectionChange={() => setIsDemoActive(true)}
                     >
@@ -275,12 +288,12 @@ const IndexPage = () => {
                     </div>
                     <Editor
                       config={{
-                        bounds: "#snow-container .ql-container",
+                        bounds: '#snow-container .ql-container',
                         modules: {
                           syntax: true,
-                          toolbar: "#snow-container .toolbar",
+                          toolbar: '#snow-container .toolbar',
                         },
-                        theme: "snow",
+                        theme: 'snow',
                       }}
                       onSelectionChange={() => setIsDemoActive(true)}
                     >
@@ -292,32 +305,32 @@ const IndexPage = () => {
                   <div id="full-container">
                     <Editor
                       config={{
-                        bounds: "#full-container .ql-container",
+                        bounds: '#full-container .ql-container',
                         modules: {
                           syntax: true,
                           toolbar: [
                             [{ font: fonts }, { size: [] }],
-                            ["bold", "italic", "underline", "strike"],
+                            ['bold', 'italic', 'underline', 'strike'],
                             [{ color: [] }, { background: [] }],
-                            [{ script: "super" }, { script: "sub" }],
+                            [{ script: 'super' }, { script: 'sub' }],
                             [
-                              { header: "1" },
-                              { header: "2" },
-                              "blockquote",
-                              "code-block",
+                              { header: '1' },
+                              { header: '2' },
+                              'blockquote',
+                              'code-block',
                             ],
                             [
-                              { list: "ordered" },
-                              { list: "bullet" },
-                              { indent: "-1" },
-                              { indent: "+1" },
+                              { list: 'ordered' },
+                              { list: 'bullet' },
+                              { indent: '-1' },
+                              { indent: '+1' },
                             ],
-                            [{ direction: "rtl" }, { align: [] }],
-                            ["link", "image", "video", "formula"],
-                            ["clean"],
+                            [{ direction: 'rtl' }, { align: [] }],
+                            ['link', 'image', 'video', 'formula'],
+                            ['clean'],
                           ],
                         },
-                        theme: "snow",
+                        theme: 'snow',
                       }}
                       onSelectionChange={() => setIsDemoActive(true)}
                     >