PHPackages                             jaikumar0101/livewire-editor-input - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. jaikumar0101/livewire-editor-input

ActiveLibrary[Templating & Views](/categories/templating)

jaikumar0101/livewire-editor-input
==================================

Premium Laravel Livewire WYSIWYG Editor Package with Alpine.js - CKEditor 4, CKEditor 5, and TipTap support

v1.0.7(4mo ago)17MITPHPPHP ^8.1|^8.2|^8.3CI passing

Since Feb 15Pushed 4mo agoCompare

[ Source](https://github.com/Jaikumar0101/laravel-livewire-editor-input)[ Packagist](https://packagist.org/packages/jaikumar0101/livewire-editor-input)[ RSS](/packages/jaikumar0101-livewire-editor-input/feed)WikiDiscussions main Synced today

READMEChangelog (3)Dependencies (5)Versions (9)Used By (0)

Laravel Livewire Editor Package 🚀
=================================

[](#laravel-livewire-editor-package-)

[![Latest Version](https://camo.githubusercontent.com/e4126766cdb969de417debfa9a9c112210a492d985f279433dbcec925db9a87a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6a61696b756d6172303130312f6c697665776972652d656469746f722d696e7075742e737667)](https://packagist.org/packages/jaikumar0101/livewire-editor-input)[![License](https://camo.githubusercontent.com/28a3dafc7f74d0adb81d4cb143c52a4915807357b9e7cf121108eb886702a466/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6a61696b756d6172303130312f6c697665776972652d656469746f722d696e7075742e737667)](https://packagist.org/packages/jaikumar0101/livewire-editor-input)

A **premium**, **production-ready** Laravel package providing powerful WYSIWYG editor components for Livewire 3, powered by Alpine.js. Choose from CKEditor 4, CKEditor 5, or TipTap with extensive customization options.

✨ Features
----------

[](#-features)

- 🎨 **Three Powerful Editors**: CKEditor 4, CKEditor 5, and TipTap
- ⚡ **Alpine.js Powered**: Reactive, lightweight, and fast
- 🔧 **Highly Configurable**: Extensive plugin and toolbar customization
- 📦 **Easy Installation**: Simple setup with sensible defaults
- 🎯 **Livewire 3 Native**: Built specifically for Livewire 3
- 🌙 **Dark Mode Support**: Built-in dark theme
- 💾 **Auto-Save**: Optional auto-save functionality
- 📊 **Word/Character Counter**: Track content length
- 🎨 **Custom Themes**: Define your own color schemes
- 🖼️ **Image Upload**: Configurable image upload support
- 📱 **Responsive**: Works beautifully on all devices
- 🔒 **Read-Only Mode**: Toggle edit mode programmatically
- 🎬 **Event System**: Rich event hooks and listeners

📋 Requirements
--------------

[](#-requirements)

- PHP 8.1 or higher
- Laravel 10.x or 11.x
- Livewire 3.x
- Alpine.js 3.x (included via CDN by default)

📦 Installation
--------------

[](#-installation)

Install via Composer:

```
composer require jaikumar0101/livewire-editor-input
```

### Publish Assets

[](#publish-assets)

Publish the package assets:

```
php artisan vendor:publish --tag=livewire-editor-assets
```

Publish configuration file (optional):

```
php artisan vendor:publish --tag=livewire-editor-config
```

Publish views for customization (optional):

```
php artisan vendor:publish --tag=livewire-editor-views
```

Or publish everything at once:

```
php artisan vendor:publish --tag=livewire-editor
```

🚀 Quick Start
-------------

[](#-quick-start)

> **⚠️ Important:** These are **Livewire components**, not Blade components. Use `` syntax, **NOT** ``.

### 1. Add Assets to Your Layout

[](#1-add-assets-to-your-layout)

> **🚨 CRITICAL:** You MUST add `@livewireEditorAssets` in your layout's `` section.

```

    {{-- Load CKEditor 5 only --}}
    @livewireEditorAssets('ckeditor5')

    {{-- Or load all editors --}}
    @livewireEditorAssets

    @livewireStyles

    {{ $slot }}

    @livewireScripts

```

### 2. Use in Your Livewire Components

[](#2-use-in-your-livewire-components)

**In Your View:**

```

    Content

    @error('content')
        {{ $message }}
    @enderror

```

**In Your Livewire Component:**

```