React LaTeX Editor

A React component built with React Quill that allows you to import equation images and automatically convert them to LaTeX format using OCR (compatible with pix2tex, Mathpix, and custom OCR APIs).

Features

• 📝 Rich text editing with React Quill
• 📷 Import equation images and convert to LaTeX
• ⌨️ Paste images directly (Ctrl+V / Cmd+V)
• 🎨 Beautiful UI with LaTeX highlighting
• 🔌 Configurable OCR API endpoint
• 📦 Standalone npm package
• 🎯 TypeScript support
• ⚡ Lightweight and performant

Installation

npm install react-latex-ocr-editor

Prerequisites

This package requires an OCR API endpoint that can convert equation images to LaTeX. You can use:

• pix2tex (open-source, recommended)
• Mathpix API (commercial)
• Custom OCR service (any API that matches the expected format)

Setting up pix2tex API

# Install pix2tex
pip install "pix2tex[api]"

# Start the API server
python -m pix2tex.api.run
# Or use uvicorn directly:
# uvicorn app:app --port 8502 --app-dir "$(python -c 'import pix2tex.api; import os; print(os.path.dirname(pix2tex.api.__file__))')"

Basic Usage

import React from 'react';
import LatexEditor from 'react-latex-ocr-editor';
import 'react-latex-ocr-editor/dist/LatexEditor.css';

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

  return (
    <LatexEditor
      value={content}
      onChange={setContent}
      apiUrl="http://localhost:8502/predict/"
    />
  );
}

Using with pix2tex API

<LatexEditor
  value={content}
  onChange={setContent}
  apiUrl="http://localhost:8502/predict/"
  onError={(error) => console.error('OCR Error:', error)}
/>

Using with Mathpix API

<LatexEditor
  value={content}
  onChange={setContent}
  apiUrl="https://api.mathpix.com/v3/text"
  // You'll need to add authentication headers in your API wrapper
/>

Using with Custom OCR Service

<LatexEditor
  value={content}
  onChange={setContent}
  apiUrl="https://your-api.com/ocr/convert"
  timeout={30000} // Custom timeout
/>

Advanced Usage with Ref

import React, { useRef } from 'react';
import LatexEditor, { LatexEditorRef } from 'react-latex-ocr-editor';

function App() {
  const editorRef = useRef<LatexEditorRef>(null);

  const handleExport = () => {
    const content = editorRef.current?.getContent();
    console.log('Editor content:', content);
  };

  const insertLatex = () => {
    editorRef.current?.insertLatex('\\frac{a}{b}');
  };

  return (
    <>
      <LatexEditor
        ref={editorRef}
        onChange={(content) => console.log(content)}
      />
      <button onClick={handleExport}>Export</button>
      <button onClick={insertLatex}>Insert LaTeX</button>
    </>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | '' | The HTML content of the editor | | onChange | (content: string) => void | - | Callback when content changes | | placeholder | string | 'Start typing...' | Placeholder text | | apiUrl | string | 'http://localhost:3000/api/convert' | OCR API endpoint URL. Supports pix2tex (/predict/), Mathpix, or custom endpoints | | onError | (error: string) => void | - | Error callback | | readOnly | boolean | false | Make editor read-only | | theme | 'snow' \| 'bubble' | 'snow' | Quill theme | | timeout | number | 60000 | API request timeout in milliseconds |

Ref Methods

| Method | Description | |--------|-------------| | getContent() | Get the current HTML content | | setContent(content: string) | Set the editor content | | insertLatex(latex: string) | Insert LaTeX at cursor position | | focus() | Focus the editor |

API Requirements

The component expects an API endpoint that:

1. Accepts POST requests with multipart/form-data
2. Has a field named image (or file for pix2tex) containing the image file
3. Returns JSON in this format:

Success response:

{
  "success": true,
  "latex": "\\frac{a}{b}"
}

Error response:

{
  "success": false,
  "error": "Error message"
}

Supported OCR Services

pix2tex

• Endpoint: http://localhost:8502/predict/
• Field name: file
• Response: Returns LaTeX string directly or in { "latex": "..." } format

Mathpix

• Endpoint: https://api.mathpix.com/v3/text
• Field name: image
• Response: { "latex": "..." } or { "latex_simplified": "..." }

Custom API

Any API that follows the above format will work. Just provide the apiUrl prop.

Publishing to npm

1. Update version in package.json:

   "version": "1.0.0"

2. Build the package:

   npm run build

3. Test locally (optional):

   npm pack
   # This creates a .tgz file you can test

4. Login to npm:

   npm login

5. Publish:

   npm publish

6. Verify:

   • Check https://www.npmjs.com/package/react-latex-editor
   • Install in a test project: npm install react-latex-editor

Development

Build the package

npm run build

Development mode with watch

npm run dev

Run the demo

cd demo
npm install
npm start

Styling

The component includes default styles, but you can override them:

.latex-editor-wrapper {
  /* Your custom styles */
}

.ql-latex {
  /* LaTeX highlight styles */
}

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.