Live Markdown Editor & Previewer
Write Markdown on the left and see the live rendered preview on the right — instantly.
Welcome to CalcNook Markdown Editor
Write Markdown on the left, see the live preview on the right.
Features
- ✅ Live preview as you type
- ✅ Toolbar shortcuts (Bold, Italic, Headings, Links, Tables)
- ✅ Export as HTML or download .md file
Code Example
``javascript
const greet = (name) => Hello, ${name}!;
console.log(greet("CalcNook"));
``
Quick Table
| Feature | Supported |
|---|---|
| Bold/Italic | ✅ |
| Links | ✅ |
| Images | ✅ |
| Code Blocks | ✅ |
| Tables | ✅ |
Tip: Select text before clicking toolbar buttons to wrap it.
Made with ❤️ at CalcNook
📖 Markdown Cheatsheet
**bold**Bold text
*italic*Italic text
# Heading 1Large heading
## Heading 2Medium heading
[link](url)Hyperlink
Image
`code`Inline code
```\ncode\n```Code block
- itemBullet list
1. itemOrdered list
> quoteBlockquote
---Horizontal rule
📤 Share this tool
📖 Learn More About Live Markdown Editor & Previewer
Live Markdown Editor & Previewer — Free Online Tool
Write Markdown on the left and see a live rendered HTML preview on the right — updated as you type. Includes a toolbar for common formatting, export to HTML, and direct .md file download. Everything runs in your browser with no server required.
Why Use Markdown?
- GitHub & Git repos — README.md, CONTRIBUTING.md, changelogs, wiki pages
- Documentation — Docusaurus, MkDocs, Hugo, Jekyll, and most static site generators
- Blogging — Ghost, Hashnode, DEV.to, and many CMS platforms accept Markdown
- Note-taking — Obsidian, Notion, Bear, Typora all use Markdown natively
- Developer tools — Slack, Discord, GitHub Issues, Jira all render Markdown
Essential Markdown Syntax Quick Reference
# Heading 1,## Heading 2— up to H6**bold**,*italic*,~~strikethrough~~[Link text](https://url.com)— hyperlink— image embed`inline code`and```code block```- item— bullet list,1. item— numbered list> quote— blockquote,---— horizontal rule
Features
- Split, Editor-only, or Preview-only layout modes
- Toolbar with one-click Bold, Italic, Headings, Links, Images, Code, Tables, Lists
- Live word/character/line count in the status bar
- Export as standalone HTML — with styles included, ready to open in a browser
- Download .md file — save to disk for use in GitHub or any project
Frequently Asked Questions
What is Markdown?
Markdown is a lightweight markup language that converts plain text to HTML. It uses simple symbols like ** for bold, * for italic, # for headings, and - for lists. Widely used in GitHub READMEs, documentation, and content writing.
Is my content saved?
Your markdown lives entirely in your browser's memory. It is never sent to any server. Refresh the page and the default example reloads. To save your work, use the 'Download .md' button.
How do I create a table?
Click the Table (⊞) toolbar button to insert a template, or type manually: | Header 1 | Header 2 | on one line, |---|---| on the next line, then | Cell 1 | Cell 2 | for each row.
Can I export to HTML?
Yes! Click 'Export HTML' to download a fully styled standalone HTML file, or click 'Copy HTML' to copy the raw rendered HTML to your clipboard.
What Markdown syntax is supported?
This editor supports headings (# H1 through ###### H6), bold (**text**), italic (*text*), strikethrough (~~text~~), inline code (`code`), code blocks (```), blockquotes (>), unordered lists (- item), ordered lists (1. item), links ([text](url)), images (), horizontal rules (---), and tables.
How do I write a code block?
Wrap code with triple backticks: type ``` on a line, paste your code below, then close with ``` on another line. You can optionally specify the language after the opening backticks, like ```javascript, for syntax hint in the cheatsheet.
How do I use the toolbar?
Select text in the editor first, then click a toolbar button — the selected text will be wrapped in the appropriate Markdown syntax. For example, select 'Hello' and click B to get **Hello**. Clicking buttons without selection inserts a placeholder.
What is the difference between Markdown and rich text editors?
Rich text editors (like Google Docs, Word) store formatting as invisible markup and show WYSIWYG output. Markdown stores formatting as plain text symbols. Markdown is preferred for developer documentation, Git repositories, static site generators, and content that needs to be version-controlled.
Can I use this as a README editor?
Yes. GitHub, GitLab, and Bitbucket READMEs are all Markdown files. Write your README here, preview how it renders, then download the .md file and commit it to your repository. The preview closely matches how GitHub renders Markdown.
How do I create a blockquote?
Start a line with > followed by a space: > This is a quote. For nested blockquotes, use >> on the line. Blockquotes are commonly used for pull quotes, notes, and citing content in documentation.