Laravel Rich Text Editor Component

Pro

WYSIWYG rich text editor with configurable toolbar, HTML and Markdown output modes, and Livewire wire:model support.

A Rich Text Editor built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::rich-text>

Try it live in the docs Get Aura Pro

Installation

composer require bluestarsystem/aura-ui

The Rich Text Editor is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →

Usage

<x-aura::rich-text
    wire:model="body"
    label="Description"
    hint="Supports basic formatting"
/>

See the full API, props and live examples in the Rich Text Editor documentation.

Overview

The Rich Text Editor component provides a WYSIWYG editing surface with a configurable toolbar, suitable for body copy, blog posts, comments, or any long-form field. It binds via wire:model (including .live) and outputs either sanitized HTML or Markdown depending on the format prop. For a lightweight free alternative, see the Editor.

The editor scrubs content to its supported tag set when loading a value and validates link URL schemes (only http, https, mailto, and tel are allowed). Downstream rendering is the consumer's responsibility — see HTML Output & Sanitization below.

Props

Prop	Type	Default	Description
`label`	`string\|null`	`null`	Label text displayed above the editor.
`placeholder`	`string`	`'Write...'`	Placeholder text shown when the editor is empty.
`format`	`'html'\|'markdown'`	`'html'`	Output format for the bound value. `'html'` emits raw HTML; `'markdown'` emits Markdown with inline `<u>` for underline.
`toolbar`	`array`	full essential set	Ordered list of command keys to show in the toolbar. Omit to use the default set.
`min-height`	`string`	`'180px'`	CSS value for the editor area's minimum height (e.g. `'320px'`).
`disabled`	`bool`	`false`	Disables the editor and toolbar.
`error`	`string\|null`	`null`	Validation error message displayed below the editor.
`hint`	`string\|null`	`null`	Helper text displayed below the editor (below the error, if present).
`size`	`string`	`'md'`	Size variant for the editor frame.