---
title: Alpine WYSIWYG
---
# Alpine.js
## toc
## Introduction
The following guide describes how to integrate tiptap with your [Alpine.js](https://github.com/alpinejs/alpine) project.
TODO
## CodeSandbox
https://codesandbox.io/s/alpine-tiptap-2ro5e?file=/index.html:0-1419
## index.html
```html
Parcel Sandbox
(view console for editor output)
```
## index.js
```js
import { Editor as TipTap } from "@tiptap/core"
import { defaultExtensions } from "@tiptap/starter-kit"
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,
extensions: defaultExtensions(),
content: this.content,
editorProps: {
attributes: {
class: "prose-sm py-4 focus:outline-none"
}
}
})
editor.on("update", () => {
this.content = this.editor.getHTML()
})
editor.on("focus", () => {
this.inFocus = true
})
editor.on("selection", () => {
this.updatedAt = Date.now()
})
this.editor = editor
}
}
}
```