Forms

MarkdownEditor

Markdown editor with toolbar shortcuts and optional live preview. Stores plain Markdown text.

On this page

Basic Usage
With Preview Tab
Side-by-Side Preview
Without Preview
Character Limit
Toolbar Shortcuts
Preview Rendering
Methods

Markdown editor with toolbar shortcuts and optional live preview. Stores plain Markdown text.

use NyonCode\WireForms\Components\MarkdownEditor;

Basic Usage

MarkdownEditor::make('description')
    ->minHeight(300)

With Preview Tab

MarkdownEditor::make('content')
    ->withPreview()    // default — adds a Write / Preview tab switcher

Side-by-Side Preview

MarkdownEditor::make('article')
    ->livePreview()    // editor and preview rendered side by side

Without Preview

MarkdownEditor::make('notes')
    ->withPreview(false)

Character Limit

MarkdownEditor::make('bio')
    ->maxLength(500)   // shows a counter and enforces the limit

The toolbar provides keyboard-accessible buttons for:

Button	Output
B	`bold`
I	`italic`
S	`~~strikethrough~~`
`</>`	`inline code`
H	`## Heading`
List	`- item`
Quote	`> blockquote`

Preview Rendering

The built-in preview handles: headings (#, ##, ###), bold/italic/strikethrough, inline code, links, blockquotes, and unordered/ordered lists. For full GFM rendering, post-process the stored Markdown on the server side using a library like CommonMark.

Methods

Method	Type	Description
`withPreview(bool)`	bool	Show Write/Preview tabs (default `true`)
`livePreview(bool)`	bool	Side-by-side editor and preview
`minHeight(int)`	int	Minimum height in pixels (default `200`)
`maxLength(int\|null)`	int	Maximum character count
`placeholder(string\|Closure)`	string	Textarea placeholder
`disabled(bool\|Closure)`	bool	Disable the editor
`readOnly(bool\|Closure)`	bool	Read-only mode
`required()`	—	Mark as required
`live()`	—	Trigger Livewire update on each keystroke
`debounce(int)`	ms	Debounce delay for `live()`

See Common Field API for label, hint, tooltip, and other shared methods.