Beginner~5 hours

Real-Time Markdown Editor

reactmarkdowncsssplit-pane

Project Brief

Build a split-pane markdown editor with live preview. The left side is a text editor where users write markdown; the right side renders it in real time. Include a toolbar for common formatting, file export, and theme support.

Requirements

→Split-pane layout: editor on left, preview on right
→Real-time markdown rendering as user types
→Toolbar with buttons for bold, italic, headings, links, code blocks, lists
→Support standard markdown syntax (headings, lists, code, links, images, blockquotes)
→Export as .md file and copy rendered HTML
→Dark/light theme toggle
→Responsive — stack vertically on mobile
→Keyboard shortcuts for common formatting (Ctrl+B for bold, etc.)

Milestones

Create the two-pane layout. Install a markdown parser (like marked or remark). Connect the textarea to the renderer so typing updates the preview in real time.

Start the project to unlock hints and tracking