diff --git a/docs/src/editor/online-editor.tsx b/docs/src/editor/online-editor.tsx
index a0abf79..f0d421b 100644
--- a/docs/src/editor/online-editor.tsx
+++ b/docs/src/editor/online-editor.tsx
@@ -197,3 +197,60 @@ export function OnlineEditorInput(props: ComponentProps<'div'>) {
 export function OnlineEditorOutput(props: ComponentProps<'div'>) {
   return <div {...props} ref={useOnlineEditorCtrl().outputRef} />
 }
+
+export function OnlineEditorPageContent() {
+  let initCode = `\
+// ↓ ↓ ↓ Add support code if needed.  ↑ ↑ ↑ Do not delete \`import ...\` ↑
+
+// ↑ ↑ ↑ Add support code if needed.  ↓ ↓ ↓ Do not delete the \`rules\` variable ↓
+let rules = [
+  // ↓ ↓ ↓ Add rules and/or layers.   ↑ ↑ ↑ Do not delete the \`rules\` variable  ↑
+
+  rule('Playground').manipulators([
+    map('⇪').toHyper().toIfAlone('⎋'),
+    { escape: toKey('caps_lock') },
+  ]),
+  
+  // ↑ ↑ ↑ Add rules and/or layers.   ↓ ↓ ↓ Do not delete \`]\` below ↓
+]\n`
+  return (
+    <OnlineEditorProvider code={initCode}>
+      <OnlineEditorPageHeader />
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr',
+          flex: 1,
+        }}>
+        <OnlineEditorInput />
+        <OnlineEditorOutput />
+      </div>
+    </OnlineEditorProvider>
+  )
+}
+
+function OnlineEditorPageHeader() {
+  let ctrl = useOnlineEditorCtrl()
+  function handleCopyJson() {
+    let text = ctrl.editors.output?.getValue()
+    if (text) {
+      void navigator.clipboard.writeText(text)
+    }
+  }
+  return (
+    <div
+      style={{
+        padding: '1rem',
+        display: 'flex',
+        justifyContent: 'flex-end',
+        gap: '1rem',
+      }}>
+      <a
+        href="https://karabiner-elements.pqrs.org/docs/manual/configuration/configure-complex-modifications/#create-your-own-rules"
+        target="_blank">
+        ? Import to Karabiner-Elements
+      </a>
+      <button onClick={handleCopyJson}>Copy JSON</button>
+    </div>
+  )
+}
diff --git a/docs/src/pages/editor.tsx b/docs/src/pages/editor.tsx
index 987c7de..f1e2ca0 100644
--- a/docs/src/pages/editor.tsx
+++ b/docs/src/pages/editor.tsx
@@ -1,63 +1,16 @@
-import {
-  OnlineEditorInput,
-  OnlineEditorOutput,
-  OnlineEditorProvider,
-  useOnlineEditorCtrl,
-} from '@site/src/editor/online-editor'
+import BrowserOnly from '@docusaurus/BrowserOnly'
 import Layout from '@theme/Layout'
 
-let initCode = `\
-// ↓ ↓ ↓ Add support code if needed.  ↑ ↑ ↑ Do not delete \`import ...\` ↑
-
-// ↑ ↑ ↑ Add support code if needed.  ↓ ↓ ↓ Do not delete the \`rules\` variable ↓
-let rules = [
-  // ↓ ↓ ↓ Add rules and/or layers.   ↑ ↑ ↑ Do not delete the \`rules\` variable  ↑
-
-  rule('Playground').manipulators([
-    map('⇪').toHyper().toIfAlone('⎋'),
-    { escape: toKey('caps_lock') },
-  ]),
-  
-  // ↑ ↑ ↑ Add rules and/or layers.   ↓ ↓ ↓ Do not delete \`]\` below ↓
-]\n`
-
 export default function EditorPage() {
   return (
     <Layout title="Online Editor">
-      <OnlineEditorProvider code={initCode}>
-        <OnlineEditorHeader />
-        <div
-          style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', flex: 1 }}>
-          <OnlineEditorInput />
-          <OnlineEditorOutput />
-        </div>
-      </OnlineEditorProvider>
+      <BrowserOnly>
+        {() => {
+          let OnlineEditorPageContent =
+            require('@site/src/editor/online-editor').OnlineEditorPageContent
+          return <OnlineEditorPageContent />
+        }}
+      </BrowserOnly>
     </Layout>
   )
 }
-
-function OnlineEditorHeader() {
-  let ctrl = useOnlineEditorCtrl()
-  function handleCopyJson() {
-    let text = ctrl.editors.output?.getValue()
-    if (text) {
-      void navigator.clipboard.writeText(text)
-    }
-  }
-  return (
-    <div
-      style={{
-        padding: '1rem',
-        display: 'flex',
-        justifyContent: 'flex-end',
-        gap: '1rem',
-      }}>
-      <a
-        href="https://karabiner-elements.pqrs.org/docs/manual/configuration/configure-complex-modifications/#create-your-own-rules"
-        target="_blank">
-        ? Import to Karabiner-Elements
-      </a>
-      <button onClick={handleCopyJson}>Copy JSON</button>
-    </div>
-  )
-}