PHPackages                             makraz/ux-quill - 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. makraz/ux-quill

ActiveSymfony-bundle

makraz/ux-quill
===============

Symfony UX Bundle to integrate the Quill rich text editor into Symfony forms

v0.1.0(2mo ago)05MITPHPPHP >=8.1.0CI passing

Since Mar 10Pushed 2mo agoCompare

[ Source](https://github.com/makraz/ux-quill)[ Packagist](https://packagist.org/packages/makraz/ux-quill)[ Docs](https://github.com/makraz/ux-quill)[ RSS](/packages/makraz-ux-quill/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (9)Versions (2)Used By (0)

Quill Bundle for Symfony using Symfony UX
=========================================

[](#quill-bundle-for-symfony-using-symfony-ux)

Symfony UX Bundle implementing [Quill](https://quilljs.com/) — a modern WYSIWYG rich text editor that outputs clean HTML.

Also working out of the box with EasyAdmin.

If you need a lightweight rich text editor (with no complex configuration) in a Symfony project, this is what you need.

- [Installation](#installation)
- [Basic Usage](#basic-usage)
- [Toolbar Configuration](#toolbar-configuration)
- [Themes](#themes)
- [Editor Options](#editor-options)
- [EasyAdmin Integration](#easyadmin-integration)
- [Data Format](#data-format)
- [JavaScript Events](#javascript-events)

Installation
------------

[](#installation)

### Step 1: Require the bundle

[](#step-1-require-the-bundle)

```
composer require makraz/ux-quill
```

If you are using the **AssetMapper** component, install the Quill package:

```
php bin/console importmap:require quill
```

### Step 2: JavaScript dependencies (Webpack Encore only)

[](#step-2-javascript-dependencies-webpack-encore-only)

If you are using **Webpack Encore** (skip this step if using AssetMapper):

```
yarn install --force && yarn watch
```

Or with npm:

```
npm install --force && npm run watch
```

That's it. You can now use `QuillType` in your Symfony forms.

Basic Usage
-----------

[](#basic-usage)

In a form, use `QuillType`. It works like a classic form type with additional options:

```
use Makraz\QuillBundle\Form\QuillType;

public function buildForm(FormBuilderInterface $builder, array $options): void
{
    $builder
        ->add('content', QuillType::class)
    ;
}
```

By default, the editor comes with a toolbar including headers, bold, italic, underline, strike, lists, blockquote, code block, link, image, and a clean button.

You can add as many Quill fields on a single page as you need, just like any normal form field.

Toolbar Configuration
---------------------

[](#toolbar-configuration)

The toolbar is configured as a nested array where each sub-array represents a button group:

```
$builder->add('content', QuillType::class, [
    'quill_options' => [
        'toolbar' => [
            [['header' => [1, 2, 3, false]]],
            ['bold', 'italic', 'underline', 'strike'],
            [['list' => 'ordered'], ['list' => 'bullet']],
            ['blockquote', 'code-block'],
            [['color' => []], ['background' => []]],
            [['align' => []]],
            ['link', 'image', 'video'],
            ['clean'],
        ],
    ],
]);
```

### Available Toolbar Formats

[](#available-toolbar-formats)

**Inline formats:**

FormatDescription`'bold'`Bold text`'italic'`Italic text`'underline'`Underlined text`'strike'`Strikethrough text`['color' => []]`Text color picker`['background' => []]`Background color picker`['font' => []]`Font family selector`['size' => ['small', false, 'large', 'huge']]`Font size selector`'link'`Hyperlink`'code'`Inline code**Block formats:**

FormatDescription`['header' => 1]`Heading level 1 button`['header' => 2]`Heading level 2 button`['header' => [1, 2, 3, false]]`Heading dropdown`'blockquote'`Blockquote`'code-block'`Code block`['list' => 'ordered']`Ordered list`['list' => 'bullet']`Bullet list`['indent' => '-1']`Decrease indent`['indent' => '+1']`Increase indent`['align' => []]`Text alignment dropdown`['direction' => 'rtl']`Text direction (RTL)**Embeds:**

FormatDescription`'image'`Image embed`'video'`Video embed`'formula'`Formula (requires KaTeX)**Utility:**

FormatDescription`'clean'`Remove all formatting### Toolbar Presets

[](#toolbar-presets)

**Minimal toolbar:**

```
'toolbar' => [
    ['bold', 'italic', 'underline'],
    ['link'],
    ['clean'],
],
```

**Full toolbar:**

```
'toolbar' => [
    [['header' => [1, 2, 3, 4, 5, 6, false]]],
    ['bold', 'italic', 'underline', 'strike'],
    [['color' => []], ['background' => []]],
    [['list' => 'ordered'], ['list' => 'bullet']],
    [['indent' => '-1'], ['indent' => '+1']],
    [['align' => []]],
    ['blockquote', 'code-block'],
    ['link', 'image', 'video'],
    ['clean'],
],
```

**Disable toolbar entirely:**

```
'toolbar' => false,
```

Themes
------

[](#themes)

Quill comes with two built-in themes:

### Snow (default)

[](#snow-default)

A traditional toolbar-based theme. The toolbar sits above the content area.

```
$builder->add('content', QuillType::class, [
    'quill_options' => [
        'theme' => 'snow',
    ],
]);
```

### Bubble

[](#bubble)

A tooltip-based theme. The formatting toolbar appears as a floating bubble when text is selected.

```
$builder->add('content', QuillType::class, [
    'quill_options' => [
        'theme' => 'bubble',
    ],
]);
```

Editor Options
--------------

[](#editor-options)

Use the `quill_options` parameter to configure global editor behavior:

```
$builder->add('content', QuillType::class, [
    'quill_options' => [
        'theme' => 'snow',
        'placeholder' => 'Start writing your article...',
        'readOnly' => false,
        'minHeight' => 300,
        'toolbar' => [
            [['header' => [1, 2, 3, false]]],
            ['bold', 'italic', 'underline'],
            [['list' => 'ordered'], ['list' => 'bullet']],
            ['link', 'image'],
            ['clean'],
        ],
    ],
]);
```

OptionTypeDefaultDescription`theme``string``'snow'`Editor theme: `'snow'` (toolbar) or `'bubble'` (tooltip)`placeholder``string``'Start writing...'`Placeholder text shown in an empty editor`readOnly``bool``false`Set the editor to read-only mode`toolbar``array|bool|string`*(default toolbar)*Toolbar configuration — array of button groups, `false` to disable, or a CSS selector string for a custom toolbar element`minHeight``int|string|null``null`Minimum height of the editor — integer for pixels, string for CSS values (e.g. `'20rem'`, `'50vh'`)EasyAdmin Integration
---------------------

[](#easyadmin-integration)

The bundle provides a dedicated `QuillAdminField` for seamless EasyAdmin integration:

```
use Makraz\QuillBundle\Form\QuillAdminField;

public function configureFields(string $pageName): iterable
{
    yield QuillAdminField::new('content');
}
```

To customize the options, use `setFormTypeOptions`:

```
yield QuillAdminField::new('content')
    ->setFormTypeOptions([
        'quill_options' => [
            'theme' => 'snow',
            'placeholder' => 'Write your content here...',
            'minHeight' => 400,
            'toolbar' => [
                [['header' => [1, 2, 3, false]]],
                ['bold', 'italic', 'underline', 'strike'],
                [['list' => 'ordered'], ['list' => 'bullet']],
                ['blockquote', 'code-block'],
                ['link', 'image'],
                ['clean'],
            ],
        ],
    ])
;
```

The field automatically registers the Twig form theme and works with both AssetMapper and Webpack Encore.

Data Format
-----------

[](#data-format)

Quill outputs HTML. The value stored in your entity will be an HTML string:

```
Hello World
This is a paragraph with bold and italic text.

    Item 1
    Item 2
    Item 3

```

When the editor is empty, the stored value is an empty string (the Stimulus controller normalizes Quill's default `` to `''`).

### Rendering in Twig

[](#rendering-in-twig)

To display Quill content in your templates, render the HTML directly:

```
{{ myEntity.content|raw }}
```

Since Quill outputs standard HTML, no parsing or conversion is needed.

JavaScript Events
-----------------

[](#javascript-events)

The Stimulus controller dispatches events you can listen to for custom behavior:

```
// Fired before the editor initializes — modify config here
document.addEventListener('quill:options', (event) => {
    const config = event.detail;
    // Add custom modules, modify toolbar, etc.
    config.modules.history = { maxStack: 100 };
});

// Fired when the editor is ready
document.addEventListener('quill:connect', (event) => {
    const quillInstance = event.detail;
    console.log('Quill is ready!', quillInstance);
});

// Fired on every content change
document.addEventListener('quill:change', (event) => {
    const { html } = event.detail;
    console.log('Content changed:', html);
});
```

EventDetailDescription`quill:options``QuillConfig`Dispatched before initialization. Modify the config object to add modules or change settings.`quill:connect``Quill`Dispatched when the editor is fully initialized and ready.`quill:change``{ html: string }`Dispatched whenever the editor content changes.Symfony Live Component Compatibility
------------------------------------

[](#symfony-live-component-compatibility)

The editor is wrapped in a `data-live-ignore` container, so it works correctly with Symfony Live Components without being destroyed on re-render.

Requirements
------------

[](#requirements)

- PHP >= 8.1
- Symfony 6.4, 7.x, or 8.x
- `symfony/stimulus-bundle` >= 2.9.1

License
-------

[](#license)

MIT

###  Health Score

34

—

LowBetter than 77% of packages

Maintenance88

Actively maintained with recent releases

Popularity5

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity32

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

61d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/3ad832e0fa9721fe45d66266b74e95ddc82bfe37568a8a8e0a2afb4615a23531?d=identicon)[makraz](/maintainers/makraz)

---

Top Contributors

[![makraz](https://avatars.githubusercontent.com/u/19323431?v=4)](https://github.com/makraz "makraz (1 commits)")

---

Tags

easyadminphpquillquilljsstimulusstimulus-jsstimulusjssymfonysymfony-bundlesymfony-formsymfony-uxwysiwygwysiwyg-editorsymfony-uxwysiwygeasyadminrich-text-editorquillquilljssymfony-formsymfony wysiwygsymfony quillsymfony ux bundleeasyadmin wysiwyg

###  Code Quality

TestsPHPUnit

Code StylePHP CS Fixer

### Embed Badge

![Health badge](/badges/makraz-ux-quill/health.svg)

```
[![Health](https://phpackages.com/badges/makraz-ux-quill/health.svg)](https://phpackages.com/packages/makraz-ux-quill)
```

###  Alternatives

[ehyiah/ux-quill

Symfony UX Bundle to use Quill JS wysiwyg text editor with full and easy customisation

5868.1k2](/packages/ehyiah-ux-quill)[sylius/sylius

E-Commerce platform for PHP, based on Symfony framework.

8.4k5.6M648](/packages/sylius-sylius)[helios-ag/fm-elfinder-bundle

ElFinder bundle, adds ElFinder file manager to your Symfony project

2814.8M27](/packages/helios-ag-fm-elfinder-bundle)[symfony/ux-turbo

Hotwire Turbo integration for Symfony

3906.8M47](/packages/symfony-ux-turbo)[tinymce/tinymce

Web based JavaScript HTML WYSIWYG editor control.

1697.5M105](/packages/tinymce-tinymce)[symfony/ux-live-component

Live components for Symfony

1635.6M71](/packages/symfony-ux-live-component)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)