shadcn.io is not affiliated with official shadcn/ui
Markdown Preview Comments Block for Radix UI
A markdown comment composer with the source at the start and a live preview at the end, a Syntax strip that inserts a heading, list, code, link or quote example at the cursor, and word and character counts.
Installation
Overview
Show people what their markdown will look like while they type, with this split-pane comment composer for React with Radix UI. A review thread on a setup guide in Hashleigh holds one comment, drawn from its markdown, and under it the editor puts the source in a monospace Textarea at the start and the rendered result at the end, kept in step on every keystroke. A Syntax strip of Buttons (Heading, List, Code, Link, Quote) inserts an example at the cursor, the words and characters are counted under the source, and Badges count the headings, code blocks and list items the preview found. Below md the two panes become a Segment Group that switches between Source and Preview. A small typed parser in the file reads headings, lists, quotes, fenced code, bold, italic, code and links into plain elements, so nothing is injected as HTML, and one Shine Button posts the rendered comment into the thread. Built from Textarea, Field, Segment Group, Button, Badge, Avatar, Kbd, Shine Button and Guides. For docs tools and any discussion that mixes prose with code and lists.
FAQ
How do I fill it with my own thread?
Edit PEOPLE, START and START_SOURCE at the top of the file. A comment is an id, an author id (by), an ISO at and a markdown body; START_SOURCE is what the box holds when the page opens. SNIPPETS lists the examples the Syntax strip inserts. Ages are worked out from AS_OF, never from the clock.
What stays local, and how do I make it real?
Everything. Posting adds the comment to a list in the page, and the status line says nothing was sent. To make it real, send the markdown text from post to your API and store it as text. Render it on the way back with a parser you trust, and sanitize on the server: this demo's parser only builds React elements, but your storage and other clients will not.
What markdown does the preview understand?
Headings with one to three #, bullet and numbered lists, quotes starting with >, fenced code with a language, bold, italic, code and [links](https://example.com). Headings are drawn as styled paragraphs so the page's own heading levels are never disturbed. Anything the parser does not know is shown as plain text, never dropped.
What do the Syntax buttons do?
Each one puts its example on its own lines at the cursor (a blank line is added when the cursor is mid-line), moves the cursor after the example and returns focus to the box. If the example would pass the 1200 character limit, nothing is added and the status line says so.
Is it accessible?
The source box has a visible label, the preview is a labelled region you can reach with Tab and scroll with the arrow keys, and each Syntax button is named for what it inserts. The counts are plain text, the polite status line is present from load, and character limits are spoken only at 20, 10 and 0 left.