npm package: @hebbar/md-viewer
Description: A highly customizable React Markdown viewer
Latest version: 1.1.1

![npm](https://img.shields.io/npm/v/@hebbar/md-viewer?color=red&label=npm%20package)

# @hebbar/md-viewer

A React Markdown viewer that works immediately. No complex setup, no extra plugins, just a simple component that looks professional out of the box.

## Why I Built This

Most React Markdown libraries are a headache to set up. You usually get unstyled text and then spend hours installing extra plugins just to get basic features like tables or code highlighting to work.

I got tired of wasting time making documentation look "not broken." I built `@hebbar/md-viewer` to solve this. It includes everything you need by default, and you can style it using simple React props.

---

## Features

* **Standard GFM:** Tables, tasklists, and links work by default. No extra plugins required.
* **Ready-to-use Syntax Highlighting:** Code blocks are styled immediately using built-in `highlight.js`.
* **Direct Styling:** Change fonts, colors, sizes, and backgrounds directly through React props.
* **Fast & Lightweight:** Small bundle size that works with both ESM and CommonJS projects.
* **Smart Headers:** Automatically adds IDs to headings for easy deep-linking.

---

## Demo Preview

Below is a demonstration of the viewer in action, rendering complex blocks and layouts:

<video width="100%" height="auto" controls autoplay loop muted style="border-radius: 8px; border: 1px solid #22d3ee;">
  <source src="https://github.com/user-attachments/assets/2245b4b2-dad5-40ba-afb7-0cb764c91a12" type="video/mp4">
  Your browser does not support the video tag. or go to https://github.com/user-attachments/assets/2245b4b2-dad5-40ba-afb7-0cb764c91a12
</video>
 
 ---

## Rapid Start

```bash
npm install @hebbar/md-viewer

```

## How to Use
### Render from a File Path (Server-Side)

```tsx

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom/client';
import MDViewer from "@hebbar/md-viewer";

const App = () => {
  const [md, setMd] = useState("Loading...");

  useEffect(() => {
    fetch('/examples/sample.md') 
      .then(res => res.text())
      .then(text => setMd(text))
      .catch(err => setMd("# Error loading file"));
  }, []);

  return <MDViewer content={md} />;
};

ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

```

---

## Props & Attribute Reference

| Attribute | Input Type | Description | Required? |
| ------------- | ------------- | ------------- | ------------- |
| filePath | string | The path to the .md file (e.g., "app/docs/intro.md"). Reads from the project root. | No* |
| content | string | Raw markdown text string. Used if filePath is not provided. | No* |
| className | string | Custom CSS classes to apply to the outer container for specific layout tweaks. | No |
---

## Project Roadmap & Status

### Current Updates (Stable)

| Feature | Details |
| ------------- | ------------- |
| File Path Rendering | Implemented fs and path logic to load local .md files directly into React. |
| Testing Suite | Full Vitest & React Testing Library integration added to src/. |
| Metadata Parsing | Automatic extraction of titles and descriptions using gray-matter. |
| Validation | Unit tests added to verify HTML tag conversion (H1, tables, code blocks). |

### Future Updates (Planned)

| Feature | Details |
| ------------- | ------------- |
| Glassmorphism | A toggle to enable/disable high-end glass-blur effects. |
| Advanced Media | Video & Image controls (resize, mute/unmute, autoplay settings). |
| Theme Engine | Native support for Light, Dark, and Cyberpunk high-contrast modes. |
| Custom Styling | Component-level font family controls and footer styling. |


---

## License

MIT © [G V Amaresh]()