diff --git a/docs/src/docPages/installation/alpine.md b/docs/src/docPages/installation/alpine.md
index bf6ed83b..352bc492 100644
--- a/docs/src/docPages/installation/alpine.md
+++ b/docs/src/docPages/installation/alpine.md
@@ -11,105 +11,73 @@ The following guide describes how to integrate tiptap with your [Alpine.js](http
 
 TODO
 
-## CodeSandbox
-https://codesandbox.io/s/alpine-tiptap-2ro5e?file=/index.html:0-1419
-
 ## index.html
 ```html
 <!DOCTYPE html>
-<html>
-  <head>
-    <title>Parcel Sandbox</title>
-    <meta charset="UTF-8" />
-    <link
-      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
-      rel="stylesheet"
-    />
-    <script
-      src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js"
-      defer
-    ></script>
-  </head>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+</head>
+<body>
+  <div x-data="setupEditor('<p>Hello World! :-)</p>')" x-init="() => init($refs.element)">
 
-  <body>
-    <div
-      x-data="setupEditor('<p>My content goes here</p>')"
-      x-init="() => init($refs.editor)"
-      x-on:click.away="inFocus = false"
-    >
-      <template x-if="editor">
-        <nav class="space-x-1">
-          <button
-            class="bg-gray-200 rounded px-2 py-1"
-            x-bind:class="{ 'bg-gray-600 text-white': editor.isActive('bold') }"
-            @click="editor.chain().focus().toggleBold().run()"
-          >
-            Bold
-          </button>
-          <button
-            class="bg-gray-200 rounded px-2 py-1"
-            x-bind:class="{ 'bg-gray-600 text-white': editor.isActive('italic') }"
-            @click="editor.chain().focus().toggleItalic().run()"
-          >
-            Italic
-          </button>
-        </nav>
-      </template>
-      <div x-ref="editor"></div>
-      <button
-        class="bg-indigo-500 text-white rounded px-3 py-1"
-        x-on:click="console.log(content)"
-      >
-        Submit
-      </button>
-      (view console for editor output)
-    </div>
+    <template x-if="editor">
+      <div class="menu">
+        <button
+          @click="editor.chain().toggleHeading({ level: 1 }).focus().run()"
+          :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+        >
+          H1
+        </button>
+        <button
+          @click="editor.chain().toggleBold().focus().run()"
+          :class="{ 'is-active': editor.isActive('bold') }"
+        >
+          Bold
+        </button>
+        <button
+          @click="editor.chain().toggleItalic().focus().run()"
+          :class="{ 'is-active': editor.isActive('italic') }"
+        >
+          Italic
+        </button>
+      </div>
+    </template>
 
-    <script src="src/index.js"></script>
-  </body>
+    <div x-ref="element"></div>
+  </div>
+
+  <script type="module" src="/main.js"></script>
+
+  <style>
+    body { margin: 2rem; font-family: sans-serif; }
+    button.is-active { background: black; color: white; }
+    .ProseMirror { padding: 0.5rem 1rem; margin: 1rem 0; border: 1px solid #ccc; }
+  </style>
+</body>
 </html>
 ```
 
-## index.js
+## main.js
 ```js
-import { Editor as TipTap } from "@tiptap/core"
-import { defaultExtensions } from "@tiptap/starter-kit"
+import alpinejs from 'https://cdn.skypack.dev/alpinejs'
+import { Editor } from 'https://cdn.skypack.dev/@tiptap/core?min'
+import { defaultExtensions } from 'https://cdn.skypack.dev/@tiptap/starter-kit?min'
 
-window.setupEditor = function (content) {
+window.setupEditor = function(content) {
   return {
-    content: content,
-    inFocus: false,
-    // updatedAt is to force Alpine to
-    // rerender on selection change
-    updatedAt: Date.now(),
     editor: null,
-
-    init(el) {
-      let editor = new TipTap({
-        element: el,
+    content: content,
+    init(element) {
+      this.editor = new Editor({
+        element: element,
         extensions: defaultExtensions(),
         content: this.content,
-        editorProps: {
-          attributes: {
-            class: "prose-sm py-4 focus:outline-none"
-          }
-        }
+        onUpdate: ({ editor }) => {
+          this.content = editor.getHTML()
+        },
       })
-
-      editor.on("update", () => {
-        this.content = this.editor.getHTML()
-      })
-
-      editor.on("focus", () => {
-        this.inFocus = true
-      })
-
-      editor.on("selection", () => {
-        this.updatedAt = Date.now()
-      })
-
-      this.editor = editor
-    }
+    },
   }
 }
 ```
