nmd-react

NMD (New-Markdown) is a next-generation markdown renderer optimized for web environments. It extends standard markdown to support rich UI elements such as Callouts, Tabs, Columns, File Trees, and Progress bars directly from text.

Key Features

• Rich UI Components: Native support for Callouts, Tabs, Simple Grid layouts, Checklists, and code copying.
• File Tree Visualization: Dedicated syntax for displaying project directory structures.
• Mantine UI Powered: Built on Mantine v8 components for a clean and professional design.
• Smart Error Handling: Next.js-inspired error overlays provide immediate feedback on syntax errors.
• Performance Optimized: Parsing results are cached using useMemo to ensure smooth rendering of large documents.

Installation

# Install alongside required peer dependencies
npm install nmd-react react react-dom

Usage

1. Import Styles (App Root)

Import the styles once in your root entry file (e.g., main.tsx or _app.tsx).

import 'nmd-react/style.css';

2. Component Usage

If your project does not use Mantine, use the NMD component which includes the necessary Provider.

import { NMD } from 'nmd-react';

const markdown = `
---
title: Getting Started
---
:::note Information
This is a powerful feature of NMD.
:::

[progress/violet:75]
`;

function App() {
  return <NMD source={markdown} />;
}

If you are already using Mantine, you can use NMDRenderer directly.

NMD Extended Syntax Examples

Callouts

:::note, :::tip, :::warning, :::danger, :::info

Tabs

:::tabs
::tab Overview
This is the overview section.
::tab Details
These are the technical details.
:::

File Tree

:::tree Project Structure
src/
  components/
    Button.tsx
  App.tsx
package.json
:::

License

Proprietary. Copyright (c) 2026 NMD Authors.
All rights reserved. Unauthorized redistribution or modification is strictly prohibited.