1.0.0
on npm
Custom element · Markdown · v1.0.0
md-spawn
Renders Markdown in the browser from one custom element — no build step, sanitised by default, with syntax highlighting included.
npm install md-spawn
1
module script, no build step
MIT
license
What it is
Drop in <md-spawn>, load one module script, and the element renders remote or inline Markdown. The script registers the element itself; there is no framework to adopt and no bundler step to add.
Specification
| Property | Value |
|---|---|
| Element | <md-spawn>, registered by the module script |
| Source | src attribute, or Markdown written inline in the tag |
| Relative URLs | Resolved against the document, so ./doc.md works under a rewritten page URL |
| Fetch failure | Falls back to the inline content if the tag has any |
| Isolation | shadow attribute renders into an open shadow root; the mode is fixed on first render |
| Deferred render | loading="lazy" waits until the element is near the viewport |
| Sanitisation | DOMPurify by default; the unsafe attribute turns it off |
| Dependencies | marked, DOMPurify, highlight.js |
| License | MIT |
Recorded session
This package has no CLI to record. The checkable act is the markup below: paste it into an HTML file, open it, and the element renders itself.
How it works
Two attributes carry the whole security posture, so they are the two documented here.
Usage
One tag, one script
The smallest complete example, and the inline form.
Remote
Point it at a file
The element fetches the Markdown and renders it. Relative paths resolve against the document, so a path like ./doc.md keeps working when the page URL is rewritten.
<md-spawn src="./README.md"></md-spawn> <script type="module" src="./dist/index.js"></script>
Inline
Or write the Markdown in the tag
With no src, the text inside the element is treated as Markdown. If a src is present and the fetch fails, the inline content is used instead.
<md-spawn> # Hello **Markdown** here. </md-spawn>
Safety
Sanitised unless you say otherwise
The default strips dangerous HTML; turning that off is an explicit attribute.
Default
DOMPurify runs on every render
Scripts and dangerous HTML are stripped from the rendered output. Markdown from a source you do not control is the case this default is for.
<md-spawn src="./untrusted.md"></md-spawn>
Opt out
unsafe disables it, and says so
The attribute is named for what it costs. Use it only with Markdown you trust; it is an XSS exposure by construction.
<md-spawn src="./trusted.md" unsafe></md-spawn>
Limits
What this does not do, and where it should not be trusted. These stay on the page whatever else changes.
It runs in the browser only. There is no server-side render path, so a crawler that does not execute JavaScript sees the empty tag.
The unsafe attribute removes sanitisation entirely. With it set, any HTML in the Markdown executes — treat it as running the source's code.
Rendering, highlighting and sanitisation come from marked, highlight.js and DOMPurify. Their parsing behaviour is this element's behaviour.
The shadow mode is fixed at the first render. Changing the attribute afterwards does not move already-rendered content in or out of the shadow root.
The single module script is 1,881,217 bytes: the Markdown parser, the sanitiser and a syntax highlighter with its language grammars are inlined. One request, one large file.
Links
Defects in this package are issues in its own repository.
Author approval — 2026-08-23, hash e2a00a77