diff --git a/docs/walkthroughs/01-installing-slate.md b/docs/walkthroughs/01-installing-slate.md
index 721f4924c..df78cdfab 100644
--- a/docs/walkthroughs/01-installing-slate.md
+++ b/docs/walkthroughs/01-installing-slate.md
@@ -71,7 +71,12 @@ Next up is to render a `<Slate>` context provider.
 The provider component keeps track of your Slate editor, its plugins, its value, its selection, and any changes that occur. It **must** be rendered above any `<Editable>` components. But it can also provide the editor state to other components like toolbars, menus, etc. using the `useSlate` hook.
 
 ```jsx
-const initialValue = []
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: 'A line of text in a paragraph.' }],
+  },
+]
 
 const App = () => {
   const [editor] = useState(() => withReact(createEditor()))
@@ -88,10 +93,15 @@ This is a slightly different mental model than things like `<input>` or `<textar
 
 By having a shared context, those other components can execute commands, query the editor's state, etc.
 
-Okay, so the next step is to render the `<Editable>` component itself:
+The next step is to render the `<Editable>` component itself. The component acts like `contenteditable`; anywhere you render it will render an editable richtext document for the nearest editor context.
 
 ```jsx
-const initialValue = []
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: 'A line of text in a paragraph.' }],
+  },
+]
 
 const App = () => {
   const [editor] = useState(() => withReact(createEditor()))
@@ -104,32 +114,6 @@ const App = () => {
 }
 ```
 
-The `<Editable>` component acts like `contenteditable`. Anywhere you render it will render an editable richtext document for the nearest editor context.
-
-There's only one last step. So far we've been using an empty `[]` array as the initial value of the editor, so it has no content. Let's fix that by defining an initial value.
-
-The value is just plain JSON. Here's one containing a single paragraph block with some text in it:
-
-```jsx
-// Add the initial value.
-const initialValue = [
-  {
-    type: 'paragraph',
-    children: [{ text: 'A line of text in a paragraph.' }],
-  },
-]
-
-const App = () => {
-  const [editor] = useState(() => withReact(createEditor()))
-
-  return (
-    <Slate editor={editor} value={initialValue}>
-      <Editable />
-    </Slate>
-  )
-}
-```
-
 There you have it!
 
 That's the most basic example of Slate. If you render that onto the page, you should see a paragraph with the text `A line of text in a paragraph.` And when you type, you should see the text change!