Build live Markdown preview app

[ibuzzardo]

Overview

Build a live Markdown preview web application using Next.js 15 App Router. Users type Markdown on the left panel and see a styled HTML preview update in real-time on the right panel.

Requirements

• Next.js 15 App Router with TypeScript (strict mode)
• Single-page application with two-panel layout (editor left, preview right)
• Live preview updates as user types (debounced 200ms)
• Markdown parsing with remark + rehype (remark-parse, remark-gfm, rehype-stringify, rehype-sanitize)
• Supports: headings, bold, italic, links, images, code blocks with syntax highlighting, tables (GFM), blockquotes, lists
• Dark theme with Tailwind CSS
• Default sample markdown on first load showing all supported features
• Copy HTML button that copies rendered HTML to clipboard
• Mobile responsive — stacks panels vertically on small screens
• GET /api/health returns { status: "ok" }

File Structure

src/
├── app/
│   ├── layout.tsx         # Root layout with dark theme, metadata
│   ├── page.tsx           # Main page — imports MarkdownEditor (client component)
│   ├── globals.css        # Tailwind base + prose overrides for preview
│   └── api/
│       └── health/
│           └── route.ts   # Health check endpoint
├── components/
│   ├── MarkdownEditor.tsx  # 'use client' — textarea + live preview + copy button
│   └── SampleMarkdown.ts   # Default markdown string constant
├── lib/
│   └── markdown.ts         # remark/rehype pipeline: markdown string → sanitized HTML string
package.json
tsconfig.json
next.config.js
tailwind.config.ts
postcss.config.js
.gitignore
README.md

Dependencies

• next@15 — Framework
• react@19, react-dom@19 — UI
• typescript@5 — Types
• tailwindcss@3, postcss, autoprefixer — Styling
• unified@11, remark-parse@11, remark-gfm@4, remark-rehype@11, rehype-stringify@10, rehype-sanitize@6 — Markdown pipeline
• @tailwindcss/typography — Prose styling for preview

Acceptance Criteria

• npm install && npm run dev starts without errors
• Typing markdown in left panel shows styled HTML in right panel in real-time
• All GFM features render correctly (tables, task lists, strikethrough)
• Code blocks have syntax highlighting or at least monospace styling
• Copy HTML button copies the rendered HTML to clipboard
• Dark theme throughout — no white backgrounds
• Responsive layout — panels stack vertically on mobile
• GET /api/health returns { status: "ok" }
• TypeScript compiles with strict: true, no errors

Edge Cases

• Empty input → show placeholder text in preview
• Very long markdown → no performance lag (debounce handles this)
• Malicious HTML in markdown → rehype-sanitize strips it
• No JavaScript → show "JavaScript required" message