shadcn.io is not affiliated with official shadcn/ui
Markdown Preview File Upload Block for React Aria
A notes editor window: editable Markdown source beside a live preview of headings, lists, code, bold, italic and links, with word, heading and reading-time counts, Export HTML and Copy Markdown.
Installation
Overview
Write Markdown and see it rendered as you type, with this editor window for React with React Aria. It is Inkhash, a notes editor. The source in a Textarea sits beside its preview; a small renderer at module scope turns the text into typed blocks and spans (headings 1 to 3, paragraphs, bullet and numbered lists, fenced code, bold, italic, inline code and links) that are drawn as elements, so pasted HTML shows as text and never runs. The status bar counts words and headings and gives a reading time. Export HTML builds a file from the same blocks with the Download Trigger, a Copy Button copies the Markdown, and a File Upload strip lists a chosen .md file by name and size. On a phone a Toggle Group switches between Source and Preview. The window is framed by Guides, with a CSS entrance only. For note apps, docs editors and comment boxes.
FAQ
Is it safe to paste HTML?
Yes. The preview is built from React elements, not injected HTML, so tags in the source are shown as plain text. Links only open if they start with http, https, # or /; anything else shows its label without a link. The exported file escapes the same text.
Which Markdown does it support?
Headings with one to three hashes, paragraphs, bullet lists (- or ), numbered lists, fenced code blocks, bold, italic*, inline code and links (opens in a new tab). Tables, images and nested lists are not rendered.
How are the counts worked out?
Words are runs of non-space characters in the source, headings are lines that the renderer read as headings, and the reading time is words over 200 a minute, never under one minute.
What stays local in this demo?
The text, the preview and the export. Nothing is saved, so a reload restores the sample; a chosen or dropped file is listed by name and size and never read.