Oliver Servín

Integrating Tiptap in a Laravel-Livewire project

Install Javascript dependencies.

npm install -D [email protected] @tiptap/core @tiptap/starter-kit

Install Livewire.

composer require livewire/livewire

Initialize the editor.

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

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
window.setupEditor = function() {
return {
editor: null,
init(element) {
this.editor = new Editor({
element: element,
extensions: [
content: this.content,
onUpdate: ({ editor }) => {
this.content = editor.getHTML()

And compile the assets:

npm run dev

Make a Blade component.

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

content: @entangle($attributes->wire('model')),
x-init="() => init($refs.editor)"
{{ $attributes->whereDoesntStartWith('wire:model') }}
<div x-ref="editor"></div>

Make a Livewire component.

Create a Livewire component for the editor.

php artisan make:livewire editor

Add a `content` property in the component.

namespace App\Http\Livewire;
use Livewire\Component;
class Editor extends Component
public $content;
public function render()
return view('livewire.editor');

Render the editor Blade component in Livewire component.

<x-editor wire:model="content"/>

Interact with API result values as object properties in Laravel

Get relative path with `route()` in Laravel

Chokidar file watcher to auto-run Pest tests

Chaining "Where" conditions using dynamic methods

Model factories with relationships by using magic methods

Show amount to pay in next billing cycle with Laravel Cashier (Stripe)

Tax calculation with Laravel Cashier for Stripe

How to keep in sync your customers details with Stripe in Laravel

Handle Paddle's marketing consent with Laravel

Custom styling the pay button with Laravel Cashier Paddle

Embed Paddle's checkout widget with Laravel Cashier

Weekly auto-reset a Laravel demo app

Remove the personal_access_tokens table on a fresh Laravel App

Deploy Umami analytics with Launcher

Fix Laravel storage:link using Launcher

Launcher: first impressions

Integrating Tiptap in a Laravel-Livewire project

Probando Google Ads con RadioCúbito(Design)

How to run a Ghost blog on Laravel Forge