lara-pack/livewire-quill

Livewire Component : Quill

Maintainers

Package info

github.com/bhagaskara/lara-pack-livewire-quill

Language:Blade

pkg:composer/lara-pack/livewire-quill

Statistics

Installs: 28

Dependents: 0

Suggesters: 0

Stars: 0

Open Issues: 0

Security

Advisories: 0

Aikido package health analysis

v1.0.4 2025-08-19 11:10 UTC

Requires

MIT f0140d1fbff4dd964e7b8e61523741f31aa28170

  • Bhagaskara <bhagaskaraliancer.woop@gmail.com>

This package is auto-updated.

Last update: 2026-03-24 07:10:43 UTC

README

Lara-Pack Livewire Quill is a Livewire 3 & 4 component that simplifies the integration of the Quill.js rich text editor into your Laravel application.

Installation

Add this package to your Laravel application using Composer:

composer require lara-pack/livewire-quill

Note: Adjust the command above according to your repository or local installation of this package.

Preparation (Quill.js Assets)

Since this component depends on the Quill.js library, ensure you have included Quill's default CSS and JavaScript in your application's main layout (e.g., in resources/views/layouts/app.blade.php).

<head>
  <!-- ... other tags ... -->

  <!-- Theme included stylesheets -->
  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
  <!-- If you want to use the 'bubble' theme, add: -->
  <!-- <link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet"> -->
</head>
<body>
  <!-- ... body content ... -->

  <!-- Main Quill library -->
  <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
</body>

Usage

Use the <livewire:...> tag in your Blade files or Livewire component views. You can perform direct data binding using wire:model thanks to Livewire 3's #[Modelable] feature.

Basic Example

<livewire:lara-pack.livewire-quill wire:model="description" />

Additional Properties Configuration

You can also configure the editor theme and the update delay (debounce) using the following properties:

  • theme (optional): Quill editor theme ('snow' or 'bubble'). Default: 'snow'
  • debounceTime (optional): Update delay time in milliseconds (ms). Default: 500

Full example:

<livewire:lara-pack.livewire-quill
  wire:model="description"
  theme="bubble"
  debounceTime="1000"
/>

Component Features

  • Supports wire:model (two-way data binding).
  • Can be used for multiple instances on a single page (IDs are generated using UUID).
  • Built-in debounce to optimize server requests while the user is typing.
  • Supports basic toolbar color customization pre-configured in the component script.

License

MIT License