← All Projects

MDX Editor

A browser-based Markdown editor with live MDX preview, syntax highlighting, and frontmatter management. Built with CodeMirror 6 and React.

ReactMDXEditor

Why

I wanted a writing environment optimized for MDX blog posts — with live preview of components, automatic frontmatter validation, and a clean dark interface that stays out of the way.

Features

• Split-pane layout: editor on the left, rendered preview on the right
• Custom MDX components rendered in the preview
• Frontmatter panel for title, date, tags, and excerpt
• Drag-and-drop image upload with automatic Markdown insertion

Stack

CodeMirror 6 for the editing surface, next-mdx-remote for preview rendering, and React for the UI. The entire editor is a single-page app with no backend required.