ars-markdown

Renders Markdown source as HTML inside Shadow DOM.

← Back to Demo Page

About

A self-contained Markdown renderer with a built-in parser — no external dependencies. Supports headings, bold, italic, inline code, code blocks, links, ordered and unordered lists, and horizontal rules. Set the source attribute or property to update the rendered output.

Static Markdown

<ars-markdown source="# Hello World\n\nThis is **bold** text."></ars-markdown>

Live Editor

Edit the markdown below and see the rendered output update in real-time.

Preview:

Code Blocks

All Heading Levels

Theme Toggle

Usage

<ars-markdown source="# Title\n\nParagraph text."></ars-markdown> <script type="module"> import { ArsMarkdown } from 'ars-web-components'; const md = document.querySelector('ars-markdown'); md.source = '# Updated\n\nNew content.'; </script>