Laravel Editor Component

Free · MIT

Lightweight free WYSIWYG editor with a basic formatting toolbar (bold, italic, underline, strikethrough, headings, lists, links) and HTML output.

A 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::editor>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::editor
    label="Content"
    name="content"
/>

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

Overview

The Editor is a lightweight, free WYSIWYG component for simple rich text needs — comments, short descriptions, and basic content. It offers a small formatting toolbar (bold, italic, underline, strikethrough, headings, lists, links), stores content as HTML, and integrates with Livewire via wire:model / wire:model.live. For advanced editing, see the Pro Rich Text Editor.

Props

Prop	Type	Default	Description
`label`	`string`	`''`	Label text displayed above the editor.
`name`	`string`	`''`	Input name attribute, also used for `wire:model`.
`toolbar`	`array\|string`	`'bold,italic,underline,link,list-ordered,list-unordered,heading'`	Toolbar configuration. Pass a comma-separated string or a PHP array of toolbar item names.
`placeholder`	`string`	`'Write here...'`	Placeholder text shown in the empty editor.
`minHeight`	`string`	`'150px'`	Minimum height of the editor area.

Toolbar Options

Available toolbar items for custom configuration:

['bold', 'italic', 'underline', 'strikethrough', 'link', 'list-ordered', 'list-unordered', 'heading']

Default Toolbar Preview

:::example <x-aura::editor label="Default Toolbar" placeholder="Type something..." /> :::

Minimal Toolbar Preview

:::example <x-aura::editor label="Minimal Toolbar" placeholder="Quick note..." toolbar="bold,italic,link" /> :::

Custom Toolbar Preview

:::example <x-aura::editor label="Full Toolbar" placeholder="Write your content..." :toolbar="['bold', 'italic', 'underline', 'strikethrough', 'heading', 'list-unordered', 'list-ordered', 'link']" /> :::