Nexo MDX Editor

Overview

Nexo MDX is a React-based Markdown editor built to solve the styling fragmentation in rich text editors. Unlike traditional editors that force their own styles, Nexo adopts a "Headless UI" philosophy, allowing developers to control the look and feel completely using their own utility classes.

Key Technical Capabilities

• Native Accessibility: Built on top of native textarea elements to ensure full screen-reader compatibility and correct form submission behavior without hydration mismatches.
• Plugin Architecture: Supports Remark and Rehype plugins, allowing developers to extend functionality (e.g., adding mathematical formulas or code highlighting) without forking the core library.
• CSS Module Injection: Features a unique styling engine where developers can override internal component styles using global CSS variables or direct class targeting (e.g., .nexo-mdx-editor .toolbar).

Implementation

import React, { useState } from 'react';
import MdxEditor from 'nexo-mdx';

export function Editor() {
  const [mdValue, setMdValue] = useState('');

  return (
    <MdxEditor
      value={mdValue}
      onChange={(value, _) => setMdValue(value)}
      className="border-zinc-800"
    />
  );
}