Examples Overview

This section contains practical pages that demonstrate MRender features in isolation.

Why this section exists

• To help new users apply one feature at a time.
• To provide copy-paste snippets for real pages.
• To make debugging faster by narrowing scope to one feature.

Learning path

1. Start with layout examples (TOC Disabled, TOC Disabled + Wide Content).
2. Continue with metadata example (SEO Overrides).
3. Add source attribution pattern (Origin Link).
4. Move to dynamic rendering (ng-component Demo).
5. Continue with rich markdown composition (Code Group and Alerts).
6. Review discovery and filtering patterns (Preview Group Filters).
7. Finish with full code capabilities (Code Features Playground).

Included examples

• TOC Disabled: hide right-side table of contents.
• TOC Disabled + Wide Content: hide TOC and expand content width.
• SEO Overrides: override title, description, Open Graph and Twitter metadata.
• Origin Link: render source attribution block from frontmatter.
• ng-component Demo: render Angular component preview and iframe preview.
• Code Group and Alerts: tabbed code samples and contextual alert blocks.
• Preview Group Filters: auto-generated top filters and date sorting for preview cards.
• Code Features Playground: all code-related features including focus/blur and preview modes.

Quick verification checklist

1. Open TOC Disabled and confirm that on-page navigation is hidden.
2. Open TOC Disabled + Wide Content and confirm content uses extra horizontal space.
3. Open SEO Overrides and check title/description/Open Graph tags in DevTools.
4. Open Origin Link and verify source card near the article end.
5. Open ng-component Demo and verify Angular preview and URL iframe mode.
6. Open Code Group and Alerts and verify tabs and alert containers.
7. Open Preview Group Filters and verify auto-generated categories and sorting.
8. Open Code Features Playground and verify focus/blur markers and fullscreen behavior.

Recommended way to use examples in your project

1. Copy frontmatter and container syntax from an example page.
2. Replace values with your real content and URLs.
3. Build and prerender.
4. Verify visual behavior and metadata in browser.