MRender: Markdown Renderer for Angular

MRender is an Angular library for rendering Markdown-based documentation with SSR support, built-in Angular components, customizable UI, and extended syntax.

🚀 Features

• Render .md files in Angular apps
• Extended syntax: ng-component, code-group, preview-group, alert blocks (tip, info, danger, etc.)
• Fully SSR-compatible
• Embed Angular components inside markdown
• Provider-based configuration for homepage and documentation
• Lazy loading of examples
• Built-in Table of Contents, SEO and meta support

📦 Installation

npm install @foblex/m-render

🧩 Usage

Homepage Configuration

import {
  provideBackground, provideComponents,
  provideHero, provideHomeButtons, provideHomeFeatures,
  provideHomeFooter, provideImage, provideLogo, provideTitle
} from '@foblex/m-render';

export const HOME_CONFIGURATION = {
  providers: [
    provideLogo('./logo.svg'),
    provideTitle('Foblex Flow'),
    provideHero({
      headline: 'Foblex Flow',
      tagline1: 'Built with Angular',
      tagline2: 'Flow-Chart Library',
      subDescription: 'Supports Angular 12+, SSR, and Composition API.',
    }),
    provideBackground(HomePageBackgroundComponent),
    provideImage(HomePageImageComponent),
    provideHomeButtons([...]),
    provideHomeFeatures([...]),
    provideHomeFooter({ text: 'MIT License | Copyright © 2022 - Present' }),
  ],
};

Documentation Configuration

import {
  provideDirectory, provideNavigation, provideComponents,
  provideTableOfContent, provideHeader, provideFooterNavigation,
  provideMeta
} from '@foblex/m-render';

export const DOCUMENTATION_CONFIGURATION = {
  providers: [
    provideDirectory('./markdown/guides/'),
    provideNavigation(...),
    provideComponents([...]),
    provideTableOfContent({ title: 'In this article', range: { start: 2, end: 6 } }),
    provideHeader(...),
    provideFooterNavigation(...),
    provideMeta({ ... }),
  ],
};

Route Setup

import { provideDocumentation, provideHomePage } from '@foblex/m-render';

export const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('@foblex/m-render').then((m) =>
      m.HOME_ROUTES.map((route) => ({
        ...route,
        providers: [provideHomePage(HOME_CONFIGURATION)],
      }))
    ),
  },
  {
    path: 'docs',
    loadChildren: () => import('@foblex/m-render').then((m) =>
      m.DOCUMENTATION_ROUTES.map((route) => ({
        ...route,
        providers: [provideDocumentation(DOCUMENTATION_CONFIGURATION)],
      }))
    ),
  },
];

✨ Markdown Extensions

ng-component

Render Angular components or external URLs (via iframe) with optional height and linked source code:

::: ng-component <component-selector></component-selector> [height]="YOUR EXAMPLE HEIGHT"
[component.ts] <<< /assets/component.ts
[component.html] <<< /assets/component.html
:::

::: ng-component [url]="https://example.com" [height]="60vh"
[component.ts] <<< /assets/component.ts
:::

ng-component supports full-screen mode out of the box for both Angular previews and iframe previews.

code-group

Group multiple code snippets into tabs:

::: code-group
```ts [Component]
console.log('Component code');
```

```html [Template]
<div>Hello</div>
```
:::

preview-group

Display preview groups with filters:

::: preview-group
[Nodes]
[Connectors]
[Connections]
:::

Alerts

Use tip, danger, info, etc.:

::: tip Title
This is a tip block
:::

🧑‍💻 Contributing

Open for contributions, feedback and PRs.

GitHub: https://github.com/Foblex/m-render

🧾 License

MIT

Inspiration

The design and layout of MRender were heavily inspired by VitePress, an open-source static site generator for Vue by Evan You.
MRender is a complete reimplementation in Angular, but its UI and structure intentionally follow VitePress for familiarity and clarity.