Components

Rich Text Editor

A lightweight, dependency-free WYSIWYG editor with a formatting toolbar.

php artisan blatui:add rich-text-editor

<div class="w-full max-w-xl">
    <x-ui.rich-text-editor name="body" placeholder="Write something…" />
</div>

Prefilled

Release notes

This build ships a few highlights worth calling out:

A brand-new rich text editor component.
Toolbar formatting with live active-state highlighting.
The HTML submits via a hidden field, so it just works in forms.

@php
    $content = <<<'HTML'
    <h1>Release notes</h1>
    <p>This build ships a few <strong>highlights</strong> worth calling out:</p>
    <ul>
        <li>A brand-new <em>rich text editor</em> component.</li>
        <li>Toolbar formatting with live active-state highlighting.</li>
        <li>The HTML submits via a hidden field, so it just works in forms.</li>
    </ul>
    HTML;
@endphp

<div class="w-full max-w-xl">
    <x-ui.rich-text-editor name="body" :value="$content" />
</div>

Using with Livewire

wire:model

The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind wire:model for two-way state — same component, no wrappers. Full Livewire guide →

app/Livewire/Demo.php

use Livewire\Component;

class Demo extends Component
{
    public string $body = '';

    public function render()
    {
        return view('livewire.demo');
    }
}

resources/views/livewire/demo.blade.php

<x-ui.rich-text-editor wire:model="body" />

API Reference

Props, slots and exposed methods for <x-ui.rich-text-editor>.

Props

Prop	Type	Default	Description
`name`	`string`	—	Form field name. When set, a hidden <textarea> is rendered that mirrors the editor HTML, so the content submits with the form under this name.
`value`	`string`	`''`	Initial HTML content rendered into the editable area (printed unescaped). Use it to seed an existing document.
`placeholder`	`string`	`'Write something…'`	Placeholder shown while the editor is empty. Also used as the textbox's accessible name.
`id`	`string`	—	Id for the editable region. A random one is generated when omitted.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method	Description
`run(cmd)`	Runs an execCommand (bold, italic, underline, strikeThrough, insertUnorderedList, insertOrderedList) on the current selection, then refreshes toolbar state.
`block(tag)`	Wraps the current block in the given tag via formatBlock (e.g. h1, h2, p).
`link()`	Prompts for a URL and turns the selected text into a link.
`clear()`	Removes inline formatting and unlinks the current selection.
`sync()`	Copies the editor HTML into the hidden form <textarea>. Runs automatically on input and after each command.