@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:

Rapid Start

npm install @hebbar/md-viewer

How to Use

Render from a File Path (Server-Side)

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