Next.js MDX Editor

A modern, lightweight MDX editor component for Next.js applications with real-time preview support.

Features

• Real-time MDX preview
• Syntax highlighting
• Auto-resizing textarea
• Customizable toolbar
• TypeScript support
• Easy integration with Next.js projects

Installation

npm install nextjs-mdx-editor

Usage

import { Editor } from 'nextjs-mdx-editor';

export default function MyPage() {
  const [content, setContent] = useState('');

  return (
    <Editor
      value={content}
      onChange={setContent}
    />
  );
}

Props

| Prop | Type | Description | |------|------|-------------| | value | string | The current content of the editor | | onChange | (value: string) => void | Callback function when content changes | | placeholder | string | Placeholder text for the editor | | className | string | Additional CSS classes for the editor container |

Styling

The editor uses Tailwind CSS for styling. You can customize the appearance by overriding the default styles in your project's Tailwind configuration.

Contributing

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

License

MIT