MarkdownEditor

component

A Markdown field: a native textarea with a small toolbar and a Preview tab rendered by the server, exactly as the stored Markdown will be printed. CommonMark with strikethrough; raw HTML, images and unsafe links never reach the page.

In this static copy, the Preview tab is rendered on the server by a Live Component, so it stays empty; the Write tab and its toolbar work. Run the full demo to try it.

Install

php bin/console ux:install markdown-editor \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies: assets/ → assets/
src/ → src/
templates/ → templates/
Recipes: form-theme
Composer: league/commonmark:^2.8
symfony/form
symfony/html-sanitizer
symfony/ux-icons
symfony/ux-live-component:^3.5
symfony/ux-twig-component:^3.5
twig/html-extra:^3.24.0
tales-from-a-dev/twig-tailwind-extra:^1.3.0

Examples (4)

Default

Light

Dark

Code

<div class="w-full max-w-xl p-4">
    <twig:FormField for="markdown-default" label="Release notes">
        <twig:MarkdownEditor id="markdown-default" name="notes" :value="'## Spring release\n\nOur **spring collection** is here: light fabrics, _bright_ colors.\n\n- Free shipping over 50 €\n- Returns within 30 days\n\nSee the [size guide](/sizes).'" />
    </twig:FormField>
</div>

Placeholder and help

Light

Dark

Code

<div class="w-full max-w-xl p-4">
    <twig:FormField for="markdown-placeholder" label="Your message" help="Markdown: **bold**, _italic_, lists, links.">
        <twig:MarkdownEditor id="markdown-placeholder" name="message" placeholder="Write something…" maxChars="500" aria-describedby="markdown-placeholder_help" />
    </twig:FormField>
</div>

Invalid

Light

Dark

Code

<div class="w-full max-w-xl p-4">
    <twig:FormField for="markdown-invalid" label="Summary" error="This value should not be blank.">
        <twig:MarkdownEditor id="markdown-invalid" name="summary" aria-invalid="true" aria-describedby="markdown-invalid_error" />
    </twig:FormField>
</div>

Read only

Light

Dark

Code

<div class="w-full max-w-xl p-4">
    <twig:MarkdownEditor id="markdown-readonly" name="terms" label="Terms" readonly :value="'## Terms\n\nBy ordering, you accept our [terms of sale](/terms).'" />
</div>