Integrating Tiptap in a Laravel-Livewire project

Install Javascript dependencies.

1npm install -D alpinejs@2 @tiptap/core @tiptap/starter-kit

Install Livewire.

1composer require livewire/livewire

Initialize the editor.

For this example, we will initialize the editor in resources/js/app.js

 1require('./bootstrap');
 2 
 3require('alpinejs');
 4 
 5import { Editor } from '@tiptap/core'
 6import StarterKit from '@tiptap/starter-kit'
 7 
 8window.setupEditor = function() {
 9    return {
10        editor: null,
11        init(element) {
12            this.editor = new Editor({
13                element: element,
14                extensions: [
15                    StarterKit
16                ],
17                content: this.content,
18                onUppublished_at: ({ editor }) => {
19                    this.content = editor.getHTML()
20                }
21            })
22        },
23    }
24}

And compile the assets:

1npm run dev

Make a Blade component.

Create an anonymous Blade component for the editor at resources/views/components/editor.blade.php

 1<div
 2    x-data="{
 3        content: @entangle($attributes->wire('model')),
 4        ...setupEditor()
 5    }"
 6    x-init="() => init($refs.editor)"
 7    wire:ignore
 8    {{ $attributes->whereDoesntStartWith('wire:model') }}
 9>
10  <div x-ref="editor"></div>
11</div>

Make a Livewire component.

Create a Livewire component for the editor.

1php artisan make:livewire editor

Add a `content` property in the component.

 1namespace App\Http\Livewire;
 2 
 3use Livewire\Component;
 4 
 5class Editor extends Component
 6{
 7    public $content;
 8 
 9    public function render()
10    {
11        return view('livewire.editor');
12    }
13}

Render the editor Blade component in Livewire component.

1<div>
2    <x-editor wire:model="content"/>
3</div>