Gathering detailed insights and metrics for @opral/markdown-wc
Gathering detailed insights and metrics for @opral/markdown-wc
Installations
npm install @opral/markdown-wcDeveloper Guide
BETA
Typescript
No
Module System
ESM
Node Version
22.13.1
NPM Version
10.9.2
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
2
Package Meta Information
Latest Version
0.5.0
Package Id
@opral/markdown-wc@0.5.0
Unpacked Size
7.05 MB
Size
1.47 MB
File Count
49
NPM Version
10.9.2
Node Version
22.13.1
Published on
Feb 25, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
17
Dev Dependencies
6
imports:
- ./dist/walking-dinosaur.js
- https://cdn.jsdelivr.net/npm/@opral/markdown-wc-doc-elements/dist/doc-video.js
Opral Markdown WC
Enables writing documentation with web components in markdown.
1--- 2imports: 3 - https://cdn.jsdelivr.net/npm/@opral/markdown-wc/dist/walking-dinosaur.js 4--- 5 6# Opral Markdown WC 7 8Enables writing documentation with web components in markdown. 9 10<walking-dinosaur></walking-dinosaur> 11<doc-video src="https://youtu.be/IMjJ1jvKsZU"></doc-video>
Why
- Enables writing documentation with components in markdown
- Interoperable with existing markdown parsers
- Doesn't depend on a framework like React MDX or Svelte MDsveX
- Doesn't introduce custom syntax like Markdoc
Comparison
| Feature | Markdown | @opral/markdown-wc | React MDX | Svelte MDsveX | Markdoc |
|---|---|---|---|---|---|
| Components in markdown | ❌ | ✅ | ✅ | ✅ | ✅ |
| Framework agnostic | ✅ | ✅ | ❌ | ❌ | ✅ |
| Portable | ✅ | ✅ | ❌ | ❌ | ❌ |
| No custom syntax | ✅ | ✅ | ❌ | ❌ | ❌ |
Usage in browser
The <markdown-wc-embed> element can be used to embed markdown-wc in a webpage.
1 <script type="module" src="https://cdn.jsdelivr.net/npm/@opral/markdown-wc/dist/markdown-wc-embed.js"></script> 2 <body> 3 <markdown-wc-embed src="https://my-markdown-url.com/markdown.md"></markdown-wc-embed> 4 </body>
Usage in another markdown file
The <markdown-wc-embed> element can be used to embed markdown-wc in markdown-wc.
1--- 2imports: 3 - https://cdn.jsdelivr.net/npm/@opral/markdown-wc/dist/markdown-wc-embed.js 4--- 5 6# Hello World 7 8This is a markdown file that embeds another markdown file 🤯 9 10<markdown-wc-embed src="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/packages/markdown-wc/README.md"></markdown-wc-embed>
Usage as libary
Enables SSR and more control over the rendering process.
1import { parse } from '@opral/markdown-wc'; 2 3const markdown = ` 4 5# Hello World 6 7// This is a web component 8<doc-card> 9 <h1>Card Title</h1> 10 <p>Card content</p> 11</doc-card> 12`; 13 14// Parse markdown 15const parsed = parse(markdown); 16 17// Register web components 18for (const url of parsed.frontmatter.imports ?? []) { 19 // optionally sanitize the imported imported here 20 // by, for example, only trusting a specific domain 21 await import(url) 22} 23 24// render HTML 25render(parsed.html);
Limitations
- sanitzation of markdown as well as custom elements is not implemented atm
- SSR is DIY atm (use the
parsefunction and SSR the markdown with lit for example)
FAQ
Why not use React MDX or Svelte MDsveX?
React MDX and Svelte MDsveX are great tools but they introduce a dependency on a specific framework which is a no-go for portability.
Why not use a <script> tag to import the web components?
Markdown parsers don't remove the <script> tag from the output. This means that the script tag would be rendered in the final HTML. To increase interoperability, frontmatter is used to define imports.
No vulnerabilities found.
No security vulnerabilities found.