dudelisius/livewire-tiptap

Easily integrate the Tiptap editor into your livewire projects

0.1.0-alpha.1 2025-06-25 08:00 UTC

Requires

• php: ^8.3
• illuminate/contracts: ^10.0||^11.0||^12.0
• livewire/livewire: ^3.6
• secondnetwork/blade-tabler-icons: ^3.34
• spatie/laravel-package-tools: ^1.16

Requires (Dev)

• larastan/larastan: ^3.5
• laravel/pint: ^1.14
• nunomaduro/collision: ^8.1.1||^7.10.0
• orchestra/testbench: ^10.0.0||^9.0.0||^8.22.0
• pestphp/pest: ^3.0
• pestphp/pest-plugin-arch: ^3.0
• pestphp/pest-plugin-laravel: ^3.0
• pestphp/pest-plugin-type-coverage: ^3.5
• phpstan/extension-installer: ^1.3||^2.0
• phpstan/phpstan-deprecation-rules: ^1.1||^2.0
• phpstan/phpstan-phpunit: ^1.3||^2.0

MIT

• Rick de Graaf

• laravel
• dudelisius
• livewire-tiptap

README

Easily integrate the Tiptap rich-text editor into your Laravel Livewire projects with full customization options.

Installation

Install via Composer:

composer require dudelisius/livewire-tiptap

Publish config and assets:

php artisan vendor:publish --tag=livewire-tiptap-config
php artisan vendor:publish --tag=livewire-tiptap-assets

Configuration

See config/livewire-tiptap.php for all options. The defaults provide sensible presets, but you can override:

• toolbar: define button tokens, groups (|), and spacers (~).
• use_default_classes: toggle Tailwind defaults on/off.
• classes: customize or target elements via fallback CSS class names.
• icons: map tokens to Blade component aliases (Tabler, Heroicons, custom SVG).
• extensions: configure Tiptap extensions like Link. Link docs

Usage

Include styles and scripts in your layout:

@livewireTiptapStyles
@livewireStyles

<livewire-tiptap:editor wire:model="content" />

@livewireScripts
@livewireTiptapScripts

Overriding the toolbar on demand

<livewire-tiptap:editor
    wire:model="content"
    toolbar="bold italic | link unlink | undo redo"
/>

Disabling default classes

In your published config:

'use_default_classes' => false,

All elements keep their fallback CSS class names, so you can style them in your own stylesheet.

Advanced

Extension Overrides

Pass extension settings directly:

<livewire-tiptap:editor
   wire:model="content"
   :extensions="[
       'link' => ['openOnClick' => false]
   ]"
/>

Contributing & Testing

Please submit PRs and make sure it passes the Quality Assurance tests:

composer qa