Markdown Editor

A write/preview tabbed text area that renders typed Markdown (headings, bold, inline code, links, lists, code blocks) live for comment boxes, note apps, or README editors.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Markdown Editor to your project and fits it to your theme.

import { MarkdownEditor } from "@/components/ui/markdown-editor";

export default function MarkdownEditorDemo() {
  return (
    <div className="flex w-full max-w-xl items-center justify-center bg-background p-6 text-foreground">
      <MarkdownEditor className="w-full" />
    </div>
  );
}