source and live preview

Free

Markdown source and live preview, both editable, with a formatting toolbar.

markdown-editor-01 · v1.2.2 · Editors block 1 of 1

npx shadcn@latest add @lib/markdown-editor-01

About this editors block

source and live preview is a free editors block for shadcn/ui. Markdown source and live preview, both editable, with a formatting toolbar. It's one React file built on the shadcn/ui Button, Dropdown menu, Empty, Input components, uses only your theme tokens, animates in as it scrolls into view and stays still for visitors who ask for less motion, and works in Next.js, Vite, React Router, TanStack Start and Astro.

Your content goes in through props: value, defaultValue, onChange, readOnly, title. Leave them out and the block shows its demo content.

What's inside

Keyboard support beyond Tab
Switch between views
Menus and popovers
A working form
A data table
Filtering or search
Entrance animation, with a reduced-motion fallback
Light and dark mode from your theme
Responsive, from phone to desktop

What it installs

@lib/cell
shadcn/ui: button, dropdown-menu, empty, input, kbd, popover, resizable, separator, tabs, toggle, toggle-group, tooltip
npm: @tiptap/extension-code-block, @tiptap/extension-image, @tiptap/extension-list, @tiptap/extension-table, @tiptap/markdown, @tiptap/pm, @tiptap/react, @tiptap/starter-kit, lucide-react

Versions

v1.2.2 Markdown editor: the preview uses the full width
v1.2.1 Markdown editor: the Split handle has a name
v1.2.0 Markdown editor: it takes the size of its parent
v1.1.0 Markdown editor: a handle between the two panes, Undo and Redo with the tools

Full changelog

More editors blocks

Text editors for writing inside your app: a source and its live preview, formatting toolbars and keyboard shortcuts.

All 1