codeNoirMD

NoirMD Markdown Renderer

A framework-agnostic markdown parser with React, Vue, and Vanilla JS renderers. Custom directives, Tailwind styling, and syntax highlighting.

play_arrowTry Playgroundmenu_bookRead Docs

Live Demo

codeMarkdown Source
# Hello **NoirMD**

A framework-agnostic markdown renderer with custom directives.

:::note {title="Quick Start"}
Install the package and start rendering markdown in any framework.
:::
play_arrowReact Preview

Hello NoirMD

A framework-agnostic markdown renderer with custom directives.

Quick Start

Install the package and start rendering markdown in any framework.

Why NoirMD?

code

Framework Agnostic

Use with React, Vue, Vanilla JS, or any framework. Same core parser, different renderers.

palette

Custom Directives

16 directive types for admonitions, cards, modals, buttons, and more.

style

Tailwind CSS

Built-in Tailwind v4 CDN integration with JIT compilation.

terminal

Syntax Highlighting

Highlight.js with 20+ languages out of the box.

Quick Start

reactReact

import { NRpreviewer } from '@noirmd/previewer/react';
import '@noirmd/previewer/markdown.css';

<NRpreviewer content="# Hello **World**" />

vueVue

import { NRpreviewer } from '@noirmd/previewer/vue';
import '@noirmd/previewer/markdown.css';

<NRpreviewer content="# Hello **World**" />

javascriptVanilla

import { renderMarkdownString } from '@noirmd/previewer/vanilla';
import '@noirmd/previewer/vanilla/vanilla.css';

const el = renderMarkdownString('# Hello **World**');
document.body.appendChild(el);