Components

Markdown Editor

A Markdown textarea with a live preview, formatting toolbar and Write/Preview tabs.

php artisan blatui:add markdown-editor

{{-- Empty editor — start typing in Write, flip to Preview to see rendered HTML. --}}
<div class="w-full max-w-xl">
    <x-ui.markdown-editor name="content" />
</div>

Prefilled

{{-- Seeded with a markdown sample exercising headings, lists, bold, code and a link. --}}
@php
    $sample = <<<'MD'
    # Release notes

    BlatUI **v1.13** ships a brand-new `markdown-editor` component.

    ## Highlights

    - Live HTML *preview* as you type
    - Selection-aware toolbar (bold, italic, code, link)
    - Fully keyboard accessible

    ## Quick start

    ```
    <x-ui.markdown-editor name="content" />
    ```

    > HTML is escaped before rendering, so input is safe.

    Read the [documentation](https://blatui.com/docs) for the full list.
    MD;
@endphp

<div class="w-full max-w-xl">
    <x-ui.markdown-editor name="content" :value="$sample" :rows="12" />
</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 $content = '';

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

resources/views/livewire/demo.blade.php

<x-ui.markdown-editor wire:model="content" />

API Reference

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

Props

Prop	Type	Default	Description
`name`	`string`	—	Form field name for the underlying <textarea>. When set, the markdown source submits with the form under this name.
`value`	`string`	`''`	Initial markdown source that seeds the editor.
`placeholder`	`string`	`'Write markdown…'`	Placeholder shown in the Write textarea while it is empty.
`rows`	`int`	`8`	Initial height of the Write textarea in rows. The textarea remains vertically resizable.
`id`	`string`	—	Base id used to wire the tabs, panels and textarea label. 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
`bold()`	Wraps the selection in ** for bold.
`italic()`	Wraps the selection in * for italics.
`code()`	Wraps the selection in backticks for inline code.
`insertLink()`	Inserts a [text](url) link around the selection and selects the url placeholder.
`ul()`	Prefixes each selected line with "- " to make a bulleted list.
`ol()`	Numbers each selected line ("1. ", "2. "…) to make an ordered list.
`quote()`	Prefixes each selected line with "> " to make a blockquote.