diff --git a/examples/with-slate/components/NextEditor.js b/examples/with-slate/components/NextEditor.js
deleted file mode 100644
index 8d51aee357fca..0000000000000
--- a/examples/with-slate/components/NextEditor.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { useState } from 'react'
-import Plain from 'slate-plain-serializer'
-import { Editor } from 'slate-react'
-import useCustomKeygen from '../lib/useCustomKeygen'
-
-const NextEditor = ({ slateKey, defaultValue, ...props }) => {
-  useCustomKeygen(slateKey)
-  const [state, setState] = useState(() => Plain.deserialize(defaultValue))
-
-  return (
-    <Editor
-      placeholder="Enter some plain text..."
-      value={state}
-      onChange={({ value }) => setState(value)}
-    />
-  )
-}
-
-export default NextEditor
diff --git a/examples/with-slate/lib/useCustomKeygen.js b/examples/with-slate/lib/useCustomKeygen.js
deleted file mode 100644
index e706ddbc01ee9..0000000000000
--- a/examples/with-slate/lib/useCustomKeygen.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useRef } from 'react'
-import { KeyUtils } from 'slate'
-
-const useCustomKeygen = (uniqueKey) => {
-  const ref = useRef(null)
-  if (!ref.current || ref.current !== uniqueKey) {
-    let n = 0
-    const keygen = () => `${uniqueKey}${n++}`
-    KeyUtils.setGenerator(keygen)
-    ref.current = uniqueKey
-  }
-}
-
-export default useCustomKeygen
diff --git a/examples/with-slate/package.json b/examples/with-slate/package.json
index ca09f34d27cff..a9493334f9dfd 100644
--- a/examples/with-slate/package.json
+++ b/examples/with-slate/package.json
@@ -7,13 +7,12 @@
     "start": "next start"
   },
   "dependencies": {
-    "immutable": "^3.8.2",
     "next": "latest",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
-    "slate": "^0.37.0",
-    "slate-plain-serializer": "^0.5.27",
-    "slate-react": "^0.15.0"
+    "slate": "^0.58.4",
+    "slate-history": "0.58.4",
+    "slate-react": "^0.58.4"
   },
   "license": "MIT"
 }
diff --git a/examples/with-slate/pages/index.js b/examples/with-slate/pages/index.js
index ceb35a9538aa3..edebb65af8818 100644
--- a/examples/with-slate/pages/index.js
+++ b/examples/with-slate/pages/index.js
@@ -1,19 +1,24 @@
-import Link from 'next/link'
-import NextEditor from '../components/NextEditor'
+import React, { useState, useMemo } from 'react'
+import { createEditor } from 'slate'
+import { Slate, Editable, withReact } from 'slate-react'
+import { withHistory } from 'slate-history'
 
-const IndexPage = (props) => {
+const IndexPage = () => {
+  const [value, setValue] = useState(initialValue)
+  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   return (
-    <>
-      <Link href="/multiple">
-        <a>Go to multiple</a>
-      </Link>
-      <hr />
-      <NextEditor
-        slateKey="someUniqueKey"
-        defaultValue="This is editable plain text, just like a <textarea>!"
-      />
-    </>
+    <Slate editor={editor} value={value} onChange={(value) => setValue(value)}>
+      <Editable placeholder="Enter some plain text..." />
+    </Slate>
   )
 }
 
+const initialValue = [
+  {
+    children: [
+      { text: 'This is editable plain text, just like a <textarea>!' },
+    ],
+  },
+]
+
 export default IndexPage
diff --git a/examples/with-slate/pages/multiple.js b/examples/with-slate/pages/multiple.js
deleted file mode 100644
index c0e60de637d76..0000000000000
--- a/examples/with-slate/pages/multiple.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Link from 'next/link'
-import Editor from '../components/NextEditor'
-
-const MultipleEditors = () => {
-  return (
-    <>
-      <Link href="/">
-        <a>Go to Home</a>
-      </Link>
-      <hr />
-      <Editor slateKey="foo" defaultValue="Foo" />
-      <hr />
-      <Editor slateKey="bar" defaultValue="Bar" />
-    </>
-  )
-}
-
-export default MultipleEditors