Phara UI v2.x
Login

Editor

A rich text editor built on contenteditable with a full formatting toolbar — headings, bold, italic, underline, strikethrough, subscript, superscript, highlight, inline code, links, alignment, lists, blockquote, undo/redo, copy all, and paste without formatting.

Basic

Drop in the editor with a name attribute and it works as a plain HTML form field. The hidden input holds the full HTML output.

Blade 
<x-ui::editor name="content" />
Livewire

Bind with wire:model. The editor dispatches input and change events on every keystroke so the Livewire property stays in sync.

Server value — 0 characters

Empty
PHP 
// Livewire component
public string $content = '';

// Template
<x-ui::editor
    name="content"
    wire:model="content"
    placeholder="Write something..."
/>

<p>Characters: {{ strlen(strip_tags($content)) }}</p>
Custom Height

Control the minimum editor height with min-height. The editor always grows to fit its content.

Compact — min-height="8rem"

Tall — min-height="28rem"

Blade 
{{-- Short editor --}}
<x-ui::editor name="excerpt" min-height="8rem" />

{{-- Tall editor --}}
<x-ui::editor name="article" min-height="32rem" />
Initial Content

Pass existing HTML via the :value prop to pre-populate the editor — ideal for editing existing records.

Blade 
<x-ui::editor
    name="body"
    :value="$post->body"
/>
In a Form

Pair the editor with other inputs inside a Livewire form. Validation errors from $errors are displayed automatically.

PHP 
// Livewire component
public string $postTitle = '';
public string $postBody  = '';

public function save(): void
{
    $this->validate([
        'postTitle' => 'required|min:3',
        'postBody'  => 'required|min:10',
    ]);

    Post::create([
        'title' => $this->postTitle,
        'body'  => $this->postBody,
    ]);
}

// Template
<form wire:submit="save" class="space-y-4">
    <x-ui::input
        wire:model="postTitle"
        name="postTitle"
        placeholder="Post title"
    />
    <x-ui::editor
        name="postBody"
        wire:model="postBody"
        placeholder="Write your post..."
    />
    <x-ui::button type="submit">Publish</x-ui::button>
</form>
Disabled

Add the disabled attribute to render the editor as read-only. The toolbar and content area become non-interactive.

Blade 
<x-ui::editor name="content" disabled :value="$post->body" />