MDrip Rendering Stack Summary

A technical brief prepared by Pax for use in the MDrip mobile markdown viewer project.

🧩 Why Render Markdown?

Markdown (.md) files are lightweight text documents formatted with symbols like #, *, and []() to indicate headers, bold, lists, links, etc.

To display these nicely on-screen in your app, you need to convert the Markdown into HTML. This is called rendering.

🔧 Rendering Options Considered

1. marked

• 🛠️ JavaScript library to convert Markdown to HTML.
• ✅ Simple, fast, and well-supported.
• ✅ Great for read-only viewers.
• ❌ Not designed for embedding dynamic components or interactivity.

📦 Use Case

Perfect for MDrip MVP, which is a lightweight markdown reader app.

🧪 Example

import { marked } from 'marked';
const raw = '# Hello\n**Bold text**';
const html = marked(raw);

2. mdsvex

• 🧬 A compiler that lets you use Markdown + Svelte together.
• ✅ Ideal for building interactive blogs or hybrid content with buttons, charts, etc.
• ❌ Overkill for plain markdown viewing.
• ❌ Requires build-time compilation.

📦 Use Case

Useful later if MDrip evolves into an interactive reader, tutorial app, or internal doc system.

✅ Recommendation for MVP

We are proceeding with:

npm install marked

It gives us:

• Markdown → HTML on the fly
• Minimal setup
• Easy to port later to Dart/Flutter

🔁 Other Alternatives (for reference)

Report generated by Pax — QA & Docs Specialist 🛠️🕵️