Live demo — this example is server-driven; run the showcase locally for the interactive version.

Rich text editor

An embedded WYSIWYG editor powered by Quill. Wraps a Quill instance with an Alpine.js API for reading/writing HTML, optional hidden-input mirroring for plain form submission, and toolbar presets.

Examples

Basic (Snow theme)

Default snow toolbar with the full set of formatting controls and an initial HTML value.

Hello from quarkus-pha. Try editing this text, applying formatting, or pasting in some content.

Reduced toolbar: bold/italic/underline, lists, and links. Useful for comment fields or short-form inputs.

Bare-bones controls — bold, italic, underline only.

Bubble theme

Floating bubble toolbar — formatting controls appear when text is selected.

Select any portion of this paragraph to see the bubble toolbar appear.

Read-only viewer

Read-only mode renders content but disables editing — handy for previews.

Release notes

This is read-only content rendered through the editor for consistent styling.

Item one
Item two

With hidden form input

When name is set the editor mirrors its HTML to a hidden input so the value travels with a plain form submit (or HTMX request).

Documentation

Rich text editor props

Parameters accepted by {#include components/editors/rich-text-editor id="..." /}. The initial HTML value is the include's {#content}{/content} block; an optional {#footer} slot renders below the editor surface.

Name	Type	Default	Description
`id`	String	— (required)	Derives `{id}-field` on the editor surface element.
`theme`	String	snow	`snow` (fixed toolbar) or `bubble` (floating toolbar on selection).
`toolbar`	String	full	Toolbar preset: `full`, `basic` or `minimal`.
`placeholder`	String	—	Placeholder shown while the editor is empty.
`readOnly`	boolean	false	Renders content without allowing edits.
`height`	String (CSS length)	—	Fixed height for the editing surface.
`name`	String	—	Mirrors the editor HTML to a hidden input with this name for plain form submission.

Usage

Required assets. Load the vendored Quill bundle and theme CSS plus the pha wrapper on the host page: /web/vendor/quill/quill.js, quill.snow.css / quill.bubble.css, /web/css/components/rich-text-editor.css and /web/js/alpine/components/rich-text-editor.js (scripts before Alpine).

Config travels as data-*. The wrapper reads its options in init() rather than interpolating them into x-data — a newline or apostrophe in an attribute value would otherwise break Alpine's expression parsing.

Edit rich-text-editor.html on GitHub