A Web component for rendering Markdown to HTML.

• ⚡ Insane fast rendering using md4w (written in Zig)
• ✨ Declarative usage
• 💡 Lightweight
• 📘 ESM modules

npm install md4wc md4c
# or pnpm install md4wc md4c

Register the MarkdownContent and optionally MarkdownContext.

import { MarkdownContent } from "md4wc";
customElements.define("md-content", new MarkdownContent());

Or you can use the static helper

import { MarkdownContent } from "md4wc";
class YourComponent extends MarkdownContent {
  static {
    this.register("md-content", YourComponent);
  }
}

export default MarkdownContextComponent;

Declare your markup and pass the WASM module path as href. This will initialize the md4c module under to hood. But you can do the same thing manually using import { init } from "md4w.

<md-context href="/path/to/md4w.wasm">
  <md-content></md-content>
</md-context>

const md = this.querySelector("md-content");
md.dispatchEvent(new CustomEvent("render", { detail: "Markdown content" }));

• https://developer.mozilla.org/en-US/docs/Web/API/Web_components