Hello, Markdown!
Type Markdown on the left and see it rendered live on the right.
- List item one
- List item two
A blockquote.
a fenced code block
Markdown Previewer
Live preview of Markdown rendered as safe HTML — raw HTML and scripts in your input are never executed.
Live Preview:
What This Tool Does
This tool renders Markdown as formatted HTML side by side with your input, live, as you type — useful for previewing a README, a comment on a platform that supports Markdown, or any document before you commit to how it'll actually look.
How to Use It
Type or paste Markdown into the left panel; the rendered result appears immediately in the right panel. There's no Render button and nothing to submit — the preview just stays in sync with whatever you've typed.
The Formula
Rendering uses react-markdown, a widely used Markdown-to-React renderer, with no additional plugins enabled. That last detail matters: raw HTML in your input is never rendered as HTML — react-markdown only renders raw HTML passthrough if a plugin like rehype-rawis explicitly added, and this tool deliberately does not add it. Anything that looks like an HTML or script tag in your input is shown as plain, inert text in the preview instead of being executed, which closes off a real cross-site-scripting risk that a "render anything" tool would otherwise carry.
A Worked Example
Typing # Hello renders a large, bold heading; typing **important** renders the word important in bold. Now try pasting <script>alert(1)</script> into the input — instead of an alert box or any executed code, the preview shows the literal text <script>alert(1)</script>, exactly as typed, confirming the safety behavior described above.
Markdown Syntax Reference
| Syntax | Result |
|---|---|
| # Header | Level-1 heading (## for level 2, and so on) |
| **bold** | Bold text |
| *italic* | Italic text |
| [text](url) | A hyperlink |
| - item | Bulleted list item (1. for a numbered list) |
| `code` | Inline code |
| ```lang ... ``` | A fenced, multi-line code block |
| > quote | Blockquote |
FAQ
- Does this tool render raw HTML or script tags I paste in?
- No. React-markdown does not render raw HTML by default, and this tool does not add the rehype-raw plugin that would enable it — any HTML or script tags in your input are shown as plain text, never executed.
- Is my Markdown sent to a server?
- No, all rendering happens directly in your browser. Your text never leaves your device.
- Where can I find a quick Markdown syntax reference?
- See the Markdown Syntax Reference table above, covering headers, bold/italic, links, lists, inline and fenced code, and blockquotes.