react-latex-editor

React Rich Text with Math

A powerful React rich text editor with mathematical equation support, built on TipTap with MathLive integration. This package provides a comprehensive WYSIWYG editor that supports mathematical equations, tables, images, and more.

📖 Documentation • 🚀 Quick Start • 🎯 Examples • 🔧 API Reference • 🎨 Customization

✨ Features

• 🎨 Rich Text Editing: Full-featured WYSIWYG editor based on TipTap
• 🧮 Mathematical Equations: Inline and block math support with MathLive
• 📊 Tables: Create and edit tables with resizable columns
• 🖼️ Images: Insert and resize images with alignment options
• 🎥 YouTube Videos: Embed and resize YouTube videos
• 🎨 Text Formatting: Bold, italic, underline, strikethrough, colors, and more
• 📝 Code Blocks: Syntax highlighting with lowlight
• 📋 Lists: Bullet points, numbered lists, and task lists
• 🔗 Links: Insert and edit hyperlinks
• 📏 Text Alignment: Left, center, right alignment
• 🎯 Character Count: Track content length
• 📱 Responsive Design: Works on desktop and mobile devices
• 🔧 TypeScript Support: Full TypeScript definitions included
• ♿ Accessibility: ARIA labels and keyboard navigation support
• 🎨 Customizable: CSS custom properties for easy theming
• ⚡ Performance: Optimized bundle size (~90KB gzipped)

📦 Installation

npm install react-latex-editor

Peer Dependencies

This package requires React 18+ and React DOM 18+ as peer dependencies:

npm install react react-dom

Next.js Compatibility

This package is fully compatible with Next.js (both App Router and Pages Router).

⚠️ Important for Next.js users: Due to server-side rendering (SSR), you need to use client-side only imports. See our comprehensive Next.js guide for:

• ✅ Quick start examples for App Router and Pages Router
• ✅ Solutions for common SSR errors (ReactCurrentDispatcher, window/document undefined)
• ✅ Complete working examples (blog editor, quiz system, etc.)
• ✅ Performance optimization tips
• ✅ TypeScript configuration

Quick Solution:

For App Router (Next.js 13+), use the 'use client' directive:

"use client";

import { Editor, Viewer } from "react-latex-editor";
import "react-latex-editor/styles";

export default function MyEditor() {
  const [content, setContent] = useState("<p>Start typing...</p>");

  return <Editor initialContent={content} onChange={setContent} />;
}

For Pages Router, use dynamic imports:

import dynamic from "next/dynamic";

const Editor = dynamic(
  () => import("react-latex-editor").then((mod) => mod.Editor),
  { ssr: false },
);

For detailed instructions and complete examples, see NEXTJS.md.

🚀 Quick Start

import React, { useRef, useState } from "react";
import { Editor, Viewer, type EditorRef } from "react-latex-editor";
import "react-latex-editor/styles";

const App = () => {
  const [content, setContent] = useState(
    "<p>Start typing your content here...</p>",
  );
  const editorRef = useRef<EditorRef>(null);

  return (
    <div style={{ width: "60%", height: "100vh", margin: "0 auto" }}>
      <Editor
        ref={editorRef}
        initialContent={content}
        onChange={setContent}
        placeholder="Type your content..."
        autoFocus={true}
      />
      <Viewer content={content} />
    </div>
  );
};

export default App;

📖 Documentation

Basic Usage

Editor Component

The main Editor component provides a full-featured rich text editor:

import { Editor, EditorRef } from "react-latex-editor";

interface EditorProps {
  initialContent?: string; // Initial HTML content
  onChange?: (content: string) => void; // Content change callback
  placeholder?: string; // Placeholder text
  readOnly?: boolean; // Read-only mode
  autoFocus?: boolean; // Auto-focus on mount
  className?: string; // Additional CSS classes
  onImageSelectionRequest?: () => void; // Image selection callback
  minHeight?: string; // Minimum height (default: "300px")
  maxHeight?: string; // Maximum height for scrolling
  showCharacterCount?: boolean; // Show character count (default: true)
  showTableControls?: boolean; // Show table controls (default: true)
}

Editor Reference

Access editor methods through the ref:

const editorRef = useRef<EditorRef>(null);

// Get current HTML content
const html = editorRef.current?.getHTML();

// Set content programmatically
editorRef.current?.setContent("<p>New content</p>");

// Add images programmatically
editorRef.current?.addImage(["https://example.com/image.jpg"]);

Viewer Component

Display content in read-only mode with math rendering:

import { Viewer } from "react-latex-editor";

function ContentViewer({ content }: { content: string }) {
  return (
    <Viewer
      content={content}
      className="my-viewer"
      contentClassName="custom-content"
      enableMath={true}
      mathJaxConfig={{
        inlineMath: [["$", "$"]],
        displayMath: [["$$", "$$"]],
        packages: ["base", "ams"],
      }}
    />
  );
}

Customizing Viewer Styles

The Viewer component supports two ways to apply custom classes:

• className: Applied to the outer wrapper container
• contentClassName: Applied directly to the content div (recommended for text styling)

Using Tailwind CSS:

<Viewer
  content={content}
  contentClassName="text-2xl font-serif leading-relaxed"
/>

Using Custom CSS:

<Viewer content={content} contentClassName="my-custom-content" />

.my-custom-content {
  font-size: 1.5rem;
  font-family: "Georgia", serif;
  line-height: 1.8;
  color: #333;
}

/* Style specific elements */
.my-custom-content h1 {
  font-size: 2.5rem;
  color: #1a1a1a;
}

.my-custom-content p {
  margin-bottom: 1.5rem;
}

Common Customization Examples:

// Large text with custom font
<Viewer
  content={content}
  contentClassName="text-xl font-mono"
/>

// Custom spacing and colors
<Viewer
  content={content}
  contentClassName="text-lg leading-loose text-gray-800"
/>

// Combine wrapper and content styling
<Viewer
  content={content}
  className="bg-gray-50 p-8 rounded-lg"
  contentClassName="text-base font-sans"
/>

Advanced Usage

Custom Toolbar

The editor includes a comprehensive toolbar with:

• Text Formatting: Bold, italic, underline, strikethrough
• Headings: H1-H6
• Text Alignment: Left, center, right
• Text Color: Text color and background color
• Lists: Bullet, numbered, task lists
• Tables: Create and edit tables
• Media: Images, YouTube videos
• Mathematical Equations: Inline and block math
• Code Blocks: Syntax highlighting
• Other: Links, blockquotes, horizontal rules

Mathematical Equations

Insert mathematical equations using the math button in the toolbar:

// Inline math: $x^2 + y^2 = z^2$
// Block math: $$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$

The editor supports both inline and block math equations with a comprehensive symbol palette powered by MathLive.

Tables

Create tables with the table button:

• Add/remove rows and columns
• Merge/split cells
• Resize columns
• Align content

Images

Insert images with:

• Drag and drop support
• URL input
• Resize handles
• Alignment options (left, center, right)
• Alt text support

YouTube Videos

Embed YouTube videos with:

• URL input
• Resize handles
• Responsive design

🎯 Examples

Basic Editor

import { Editor } from "react-latex-editor";

function BasicEditor() {
  return (
    <Editor
      placeholder="Start writing your content..."
      onChange={(content) => console.log(content)}
    />
  );
}

Read-only Viewer

import { Viewer } from "react-latex-editor";

function ContentViewer({ content }: { content: string }) {
  return <Viewer content={content} />;
}

Custom Styled Viewer

import { Viewer } from "react-latex-editor";

function CustomStyledViewer({ content }: { content: string }) {
  return (
    <Viewer
      content={content}
      contentClassName="text-xl font-serif text-gray-900"
    />
  );
}

Custom Height Editor

import { Editor } from "react-latex-editor";

function CustomHeightEditor() {
  return (
    <Editor
      minHeight="400px"
      maxHeight="600px"
      placeholder="Content with custom height..."
    />
  );
}

Editor with Image Handler

import { Editor } from "react-latex-editor";

function EditorWithImageHandler() {
  const handleImageRequest = () => {
    // Open your image picker/modal here
    const imageUrl = prompt("Enter image URL:");
    if (imageUrl) {
      // Handle image insertion
    }
  };

  return (
    <Editor
      onImageSelectionRequest={handleImageRequest}
      placeholder="Editor with custom image handling..."
    />
  );
}

Minimal Editor

import { Editor } from "react-latex-editor";

function MinimalEditor() {
  return (
    <Editor
      showCharacterCount={false}
      showTableControls={false}
      placeholder="Minimal editor..."
    />
  );
}

Dark Mode Editor

import { Editor } from "react-latex-editor";

function DarkModeEditor() {
  return (
    <div className="dark-theme">
      <Editor
        placeholder="Dark mode editor..."
        onChange={(content) => console.log(content)}
      />
    </div>
  );
}

Math-Focused Editor

import { Editor } from "react-latex-editor";

function MathEditor() {
  return (
    <Editor
      initialContent="<p>Solve the equation: $x^2 + 5x + 6 = 0$</p>"
      placeholder="Write mathematical content..."
      onChange={(content) => console.log(content)}
    />
  );
}

🎨 Customization

Import Styles

Import the default styles:

import "react-latex-editor/styles";

🔧 API Reference

Editor Props

Prop	Type	Default	Description
initialContent	string	"<p>Start typing something...</p>"	Initial HTML content
onChange	(content: string) => void	-	Content change callback
placeholder	string	"Start typing..."	Placeholder text
readOnly	boolean	false	Read-only mode
autoFocus	boolean	false	Auto-focus on mount
className	string	""	Additional CSS classes
onImageSelectionRequest	() => void	-	Image selection callback
minHeight	string	"300px"	Minimum height
maxHeight	string	-	Maximum height for scrolling
showCharacterCount	boolean	true	Show character count
showTableControls	boolean	true	Show table controls

EditorRef Methods

Method	Parameters	Description
getHTML	-	Get current HTML content
setContent	content: string	Set editor content
addImage	urls: string[]	Add images programmatically

Viewer Props

Prop	Type	Default	Description
content	string	-	HTML content to display
className	string	""	CSS classes for wrapper container
contentClassName	string	""	CSS classes for content div (text styling)
enableMath	boolean	true	Enable MathJax rendering
mathJaxConfig	object	{}	Custom MathJax configuration

🔍 Troubleshooting

Common Issues

• Styles not loading: Make sure to import the styles:

  import "react-latex-editor/styles";
  

• Math equations not rendering: Ensure MathJax is properly configured in the Viewer component.

• TypeScript errors: Make sure you're using React 18+ and have the latest TypeScript definitions.

• Images not uploading: Implement the onImageSelectionRequest callback for custom image handling.

Getting Help

If you encounter any issues:

• Check the examples section
• Review the API reference
• Open an issue on GitHub with a minimal reproduction

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines before submitting pull requests.

• Fork the repository
• Create a feature branch
• Make your changes
• Add tests if applicable
• Submit a pull request

📄 License

MIT License - see the LICENSE file for details.

🆘 Support

• 📖 Documentation
• 🐛 Report Issues
• 💬 Discussions
• ⭐ Star on GitHub

Made with ❤️ by Bablu Mia