Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

Markdown Preview Prompt AI Block for Radix UI

A monospace markdown field beside the rendered result of headings, fenced code, lists, bold and code, a Preview and Raw switch, badges counting what was found, and live word and token counts.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people see how their markdown reads before it goes to a model, with this prompt preview for React with Radix UI. A monospace Textarea starts with a heading, a fenced ts block and two lists. At the end, a small typed parser in the file turns headings (one to three #), fenced code with its language, bullet and numbered lists, bold and inline code into plain elements, so nothing is injected as HTML. A Toggle Group switches between Preview and Raw, where Raw is the exact string in Syntax Text with line numbers. Badges count what was found, such as "3 headings, 1 code block, 6 list items", and the words and estimated tokens follow every keystroke. The Shine Button sends, the only colored control. For prompt linters, editors and any tool that sends markdown to a model.

FAQ

What runs in the browser?

All of it. The parser, the counts and the token estimate are small functions in the file working on what you typed; nothing is sent ("Request ready. Nothing was sent: this demo has no model."). To make it real, send the raw string in the submit handler, and keep the preview for the writer's benefit.

Which markdown does it understand?

Headings with one to three # signs, fenced code blocks with an optional language, bullet lists (- or *), numbered lists, bold and code. Tables, links, images, quotes and nested lists are shown as plain text on purpose: the preview is a lint, not a full renderer. Add a reader to readAt and a case to BlockView for another block type.

Can the preview inject HTML?

No. Each piece of the text is rendered as a React element with the text as its content, so a typed tag such as a script element is shown as text. Headings are drawn as styled paragraphs, so the preview never adds headings to the page's outline.

How are the tokens counted?

The whole string's length divided by four, rounded up, plus a word count split on spaces. These are rough rules, not a tokenizer.

How does it work from the keyboard?

The field is a normal textarea. The Preview and Raw switch is a toggle group the arrow keys move through, and the preview box is focusable so a keyboard can scroll it.

How does it look on a phone?

The field comes first and the preview under it, each in a box of the same height, so you can edit and scroll down to see the result. The badges and the counts wrap under them.

All 100 ai blocks