Markdown Editor With Live Preview shadcn/tailwind block

Markdown editor

Write and preview side by side

Source on the left, rendered on the right. The two stay in sync as you type — no rebuild, no flicker, just text.

README.mdCONTRIBUTING.mdLICENSE.md

1# Beste UI
2.
3A drop-in component library for shipping faster.
4.
5## Why it works
6.
7- Production-ready out of the box
8- Typed end-to-end
9- Zero runtime cost
10.
11## Install
12.
13```bash
14bunx beste-ui add hero
15```

Beste UI

A drop-in component library for shipping faster.

Why it works

Production-ready out of the box
Typed end-to-end
Zero runtime cost

Install

bash

bunx beste-ui add hero

About this block

Markdown Editor With Live PreviewPRO

Browser-chrome card rendering a markdown source editor on the left and the rendered HTML on the right — minimal monochrome syntax markers, structured preview blocks (headings, paragraphs, lists, fenced code). Every label is editable; no media props required.

More Showcase blocks

View all Showcase

PRO

showcase23

Component Preview With Code Editor

Browser-chrome card pairing a live button-variant preview on the left with a syntax-highlighted code editor on the right — dotted canvas background, size pill toggle. Every label is editable; no media props required.

PRO

showcase18

Code Editor With Live Logs

Browser-chrome card pairing a syntax-highlighted code editor with a live log stream — filter pills, color-coded levels, and a tail-mode footer. Every label is editable; no media props required.

PRO

showcase29

AI Workspace With Streaming Response

Browser-chrome card rendering an AI prompt and a structured response — markdown blocks (headings, paragraphs, lists, quotes, code), citation list, copy/regenerate/apply footer. Every label is editable; no media props required.

PRO

showcase17

Code Editor With Test Results

Browser-chrome card pairing a syntax-highlighted code editor with a live test-results panel — pass/fail rows, expandable failures, and a coverage footer. Every label is editable; no media props required.

PRO

showcase15

Code Editor With Live Activity Feed

Browser-chrome card pairing a syntax-highlighted code editor with a live activity feed — pulsing status dot, color-coded events, and an open-log footer. Every label is editable; no media props required.

PRO

showcase20

Code Editor With Environments Panel

Browser-chrome card pairing a syntax-highlighted code editor with a deploy environments panel — health dots, version pills, and a promote-to-production footer. Every label is editable; no media props required.