WYSIWYG

A rich Markdown editor with a live split source/preview. It exposes the authored Markdown on its value, so it is bindable and usable as a form field.

Reach for it when you need:

• Authoring a shift report or work instruction on-screen
• A rich-text field inside a Form

Component name: WYSIWYG · Category: Input

In the palette: Rich Markdown editor (live split source/preview). Exposes the authored markdown on its value — bindable, and usable as a form field.

Properties

Any property can be bound to a tag, another component's property, or a query.

Property	Type	Default	Description
value	string	""	The authored Markdown text. Bindable (two-way) — bind a tag/param to seed or capture the content.
mode	enum	live	live = split source | preview; edit = source only; preview = rendered only. Options: live · edit · preview.
placeholder	string	Write Markdown…	—
title	string	WYSIWYG	—
showTitle	boolean	true	—
titleSize	number	13	—
hideToolbar	boolean	false	Hide the formatting toolbar for a cleaner, compact editor.
disabled	boolean	false	Read-only: renders the markdown as preview, no editing.
style	style	{}	Custom CSS properties

Events

Attach event actions to these in the Event Manager.

Event	Label	Group	Payload
click	Click	Mouse	The DOM event.
dblclick	Double click	Mouse	The DOM event.
contextmenu	Right click	Mouse	The DOM event.
mouseenter	Mouse enter	Mouse	The DOM event.
mouseleave	Mouse leave	Mouse	The DOM event.

Right-click behaves differently in the Designer

contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.

Notes

Pair it with Markdown to display what was authored.