diff --git a/docs/libraries/slate-react/editable.md b/docs/libraries/slate-react/editable.md
index 514c964fd6..8bbe49a4f8 100644
--- a/docs/libraries/slate-react/editable.md
+++ b/docs/libraries/slate-react/editable.md
@@ -127,7 +127,7 @@ export interface RenderLeafProps {
 
 Example usage:
 
-```typescript
+```jsx
 <Editor
   renderLeaf={({ attributes, children, leaf }) => {
     return (
@@ -165,14 +165,22 @@ An example usage might look like:
 
 ```jsx
 <Editable
-  renderPlaceholder={({ attributes, children }) => (
-    <div {...attributes} style={{ fontStyle: 'italic', color: 'gray' }}>
-      {children}
-    </div>
-  )}
+  placeholder="Enter text here..."
+  renderPlaceholder={({ attributes, children }) => {
+    const styledAttributes = {
+      ...attributes,
+      style: {
+        ...attributes.style,
+        color: 'gray',
+      },
+    };
+    return <div {...styledAttributes}>{children}</div>
+  }}
 />
 ```
 
+Note that the `attributes` prop that comes in will contain a `style` object already. This object contains important styling properties which will make the placeholder behave like a placeholder. As such, it is advisable to extend styles and to focus on things like changing colors, opacity etc. Changing positioning, for example, could cause undesirable behavior.
+
 #### `scrollSelectionIntoView?: (editor: ReactEditor, domRange: DOMRange) => void`
 
 Slate has its own default method to scroll a DOM selection into view that works for most cases; however, if the default behavior isn't working for you, possible due to some complex styling, you may need to override the default behavior by providing a different function here.