Markdown Math Editor

A modern, feature-rich markdown editor with LaTeX math support and live preview built with React and TypeScript.

Features

• ✨ Split-pane editor - Edit markdown on the left, see live preview on the right
• 🔢 LaTeX Math Support - Insert and render mathematical equations using LaTeX syntax
• 🎨 Modern UI - Beautiful, clean interface built with Tailwind CSS and shadcn/ui
• 📝 Rich Toolbar - Format text with bold, italic, headings, lists, code blocks, tables, and more
• ⚡ Real-time Preview - See your markdown rendered instantly as you type
• 🎯 TypeScript - Fully typed for better developer experience

Installation

npm install @your-org/markdown-math-editor
# or
yarn add @your-org/markdown-math-editor
# or
pnpm add @your-org/markdown-math-editor

Usage

1. MarkdownEditor Component

Use the editor component to allow users to edit markdown content:

import { MarkdownEditor } from '@your-org/markdown-math-editor';
import '@your-org/markdown-math-editor/styles';

function App() {
  const [content, setContent] = useState('');

  return (
    <MarkdownEditor
      value={content}
      onChange={setContent}
      title="My Editor"
      className="h-screen"
    />
  );
}

2. RenderInline Component

Use the render component to display markdown content:

import { RenderInline } from '@your-org/markdown-math-editor';
import '@your-org/markdown-math-editor/styles';

function Preview({ markdown }: { markdown: string }) {
  return (
    <div>
      <RenderInline content={markdown} />
    </div>
  );
}

API Reference

MarkdownEditor Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | '' | The markdown content to edit | | onChange | (value: string) => void | - | Callback fired when content changes | | title | string | 'Markdown Editor' | Optional title displayed at the top | | className | string | - | Additional CSS classes |

RenderInline Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | string | '' | The markdown content to render | | style | React.CSSProperties | - | Optional inline styles | | className | string | - | Additional CSS classes |

Examples

Basic Editor

import { useState } from 'react';
import { MarkdownEditor } from '@your-org/markdown-math-editor';

function MyEditor() {
  const [markdown, setMarkdown] = useState('# Hello World\n\nThis is **bold** text.');

  return (
    <MarkdownEditor
      value={markdown}
      onChange={setMarkdown}
    />
  );
}

Display Only (Read-only)

import { RenderInline } from '@your-org/markdown-math-editor';

function Article({ content }: { content: string }) {
  return (
    <article>
      <RenderInline content={content} />
    </article>
  );
}

With Math Support

The editor supports LaTeX math expressions:

# Math Example

Inline math: \\(E = mc^2\\)

Display math:
\\[
\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}
\\]

Styling

The package uses Tailwind CSS. Make sure to include the styles:

import '@your-org/markdown-math-editor/styles';

Or import the CSS file in your main entry:

import '@your-org/markdown-math-editor/dist/index.css';

Requirements

• React 18+ or React 19+
• Tailwind CSS (for styling)
• shadcn/ui components installed (Button, Input, Label, Textarea)
• Guppy Math Editor files (see setup below)

Guppy Math Editor Setup

The math editor requires Guppy files to be available. Copy the guppy folder to your public directory:

public/
  guppy/
    guppy.min.js
    guppy_osk.min.js
    guppy-default.min.css
    guppy-default-osk.min.css
    sym/
      symbols.json
    (other guppy files)

Include in your HTML:

<link rel="stylesheet" href="/guppy/guppy-default.min.css" />
<link rel="stylesheet" href="/guppy/guppy-default-osk.min.css" />
<script src="/guppy/guppy.min.js"></script>
<script src="/guppy/guppy_osk.min.js"></script>

Note: Guppy files are not included in this package. You can download them from Guppy's repository or copy from your existing project.

License

MIT