EasyMDE

Beta

Markdown editor component wrapping EasyMDE with HTMX integration. Automatically initializes on page load and after HTMX swaps, syncs content back to the textarea on change.

API Reference

Attribute	Description	Type	Default
`label`	Field label text	string	`""`
`name`	Name attribute for the underlying textarea (for form submission)	string	`""`
`rows`	Number of visible text rows for the underlying textarea	number	`6`
`hint`	Hint text displayed below the editor	string	`""`
`error`	Error message text (single error)	string	`""`
`errors`	List of error messages	list	`[]`
`disabled`	Disables the editor	boolean	`False`
`hx`	HTMX event integration for server-side reactivity	string	`""`

Toolbar buttons: EasyMDE's toolbar buttons include title attributes that are read by screen readers. The editor itself is based on CodeMirror and supports keyboard navigation.

Label association: the label prop renders a <label> element associated with the textarea via matching for / id attributes.

Error messages: validation errors are rendered below the editor. Consider also associating them via aria-describedby on the underlying textarea for maximum screen reader compatibility.

Examples

Usage

<c-easymde label="Description" name="description">
  **Bold text** and *italic text*.
</c-easymde>

Basic EasyMDE

Description

<c-easymde label="Description" name="description">
  **Bold text** and *italic text*.

  - List item 1
  - List item 2
</c-easymde>

With Hint

Notes

Markdown formatting is supported.

<c-easymde label="Notes" hint="Markdown formatting is supported." name="notes" />

With Error

Summary

Description is required.

<c-easymde label="Summary" error="Description is required." name="summary" />

Without Label

<c-easymde name="content">
  Start typing markdown here...
</c-easymde>