diff --git a/examples/with-slate/CustomKeygenEditor/index.js b/examples/with-slate/CustomKeygenEditor/index.js
new file mode 100644
index 00000000..3ac2aeb4
--- /dev/null
+++ b/examples/with-slate/CustomKeygenEditor/index.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import Plain from 'slate-plain-serializer'
+import { KeyUtils } from 'slate'
+import { Editor } from 'slate-react'
+
+class CustomKeygenEditor extends React.Component {
+  constructor (props) {
+    super(props)
+    let key = 0
+    const keygen = () => {
+      key += 1
+      return props.uniqueId + key // custom keys
+    }
+    KeyUtils.setGenerator(keygen)
+    this.initialValue = Plain.deserialize(props.content)
+  }
+  render () {
+    return <Editor placeholder='Enter some plain text...' defaultValue={this.initialValue} style={this.props.style} />
+  }
+}
+
+export default CustomKeygenEditor
diff --git a/examples/with-slate/pages/index.js b/examples/with-slate/pages/index.js
index a117d174..1194f936 100644
--- a/examples/with-slate/pages/index.js
+++ b/examples/with-slate/pages/index.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import Link from 'next/link'
 import Plain from 'slate-plain-serializer'
 import { Editor } from 'slate-react'
 import { KeyUtils } from 'slate'
@@ -21,11 +22,16 @@ class Index extends React.Component {
 
   render () {
     return (
-      <Editor
-        placeholder='Enter some plain text...'
-        value={this.state.value}
-        onChange={this.onChange}
-      />
+      <React.Fragment>
+        <Link href='/multiple'>
+          <a>Go to multiple</a>
+        </Link>
+        <Editor
+          placeholder='Enter some plain text...'
+          value={this.state.value}
+          onChange={this.onChange}
+        />
+      </React.Fragment>
     )
   }
 
diff --git a/examples/with-slate/pages/multiple.js b/examples/with-slate/pages/multiple.js
new file mode 100644
index 00000000..1ef75155
--- /dev/null
+++ b/examples/with-slate/pages/multiple.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import Link from 'next/link'
+import CustomKeygenEditor from './CustomKeygenEditor'
+
+const content = {
+  'first-editor': 'This example shows how to have multiple instances of the editor.',
+  'second-editor': 'Without a custom key generator, you could not focus here.'
+}
+
+class MultipleEditors extends React.Component {
+  render () {
+    return (
+      <React.Fragment>
+        <Link href='/'>
+          <a>Go to Home</a>
+        </Link>
+        {Object.keys(content).map((key, idx) => (
+          <CustomKeygenEditor key={idx} uniqueId={key} content={content[key]} style={{ margin: 20 }} />
+        ))}
+      </React.Fragment>
+    )
+  }
+}
+
+export default MultipleEditors