Markdown Editor & Preview
Live preview in your browser — drafts stay on this device.
123 words · 794 characters · 47 lines
Editor
Preview
Markdown Editor & Preview
Write CommonMark and GitHub-flavored Markdown on the left. A live preview appears on the right.
Inline styles
Italic, bold, strikethrough, and inline code.
Links and images
Visit the Toolshelf homepage. Images use a URL:

Lists
- Unordered item
- Nested item
- Task list:
- Write Markdown
- Review the preview
- Ordered item
- Second item
- Nested number
Blockquotes are useful for callouts and quoted text.
Code
function greet(name) {
return `Hello, ${name}`;
}Table
| Syntax | Result |
|---|---|
# Heading | Heading |
**bold** | bold |
Unicode is fine: नमस्ते, 你好, café, 👋.
Online Markdown editor and preview
This Toolshelf page is an online Markdown editor with a live Markdown preview. Type CommonMark-style syntax on the left (or above, on a phone) and read the formatted result immediately. It is a browser Markdown viewer as well as an editor: switch to preview only when you want to read, or editor only when you want a larger writing surface.
If you searched for a Markdown editor online, a Markdown preview, or a Markdown viewer that does not upload your draft, this tool runs after the page loads. Formatting, preview, copy, download, and print all stay in your browser.
What is Markdown?
Markdown is a lightweight markup language. You write in plain text with a small set of symbols — hashes for headings, asterisks for emphasis, brackets for links — and a renderer turns that source into structured HTML. The source stays readable in a diff, an email, or a terminal. The preview is what readers see on GitHub, in a static site, or in a documentation portal.
This editor targets everyday GitHub-flavored Markdown: headings, bold and italic, strikethrough, links, images, ordered and unordered lists (including nested lists), blockquotes, inline code, fenced code blocks, tables, horizontal rules, and task lists. It is not a full CMS and it does not execute Markdown as a programming language.
Markdown syntax you can preview here
- Headings
- Start a line with one to six # characters. # Title is a top-level heading. ## Section is the usual document heading.
- Emphasis
- Wrap text in *asterisks* for italic, **two asterisks** for bold, and ~~tildes~~ for strikethrough.
- Links and images
- Links use [label](https://example.com). Images use . Always include alt text so the image is understandable without the file.
- Lists
- Unordered lists start with - or *. Ordered lists start with 1. Nested items are indented. Task lists use - [ ] and - [x].
- Quotes, code, and rules
- Blockquotes start with >. Inline code uses backticks. Fenced blocks use three backticks before and after the code. A line of --- inserts a horizontal rule.
- Tables
- GitHub-flavored tables use pipes and a separator row: | Column | Column | on one line, then | --- | --- |, then data rows.
Who is a Markdown editor useful for?
README files
Draft a repository README, changelog, or contributing guide and check headings, lists, and code fences before you commit.
Documentation
Preview API notes, runbooks, and internal wikis that will be published as Markdown on GitHub, GitLab, or a static site.
Technical writing
Write blog drafts, tutorials, and knowledge-base articles in Markdown, then copy the source into a CMS that accepts .md.
Issue and pull-request text
Compose GitHub or Jira-style issue bodies with task lists and code samples, then paste the Markdown into the tracker.
Notes and outlines
Keep a structured outline with headings and nested lists when a plain notepad is not enough and a word processor is too heavy.
How to use this Markdown editor
- Open the editor and type or paste Markdown. A sample document is available if you want to see headings, lists, tables, and code fences at once.
- Choose split view to keep the source and preview together, editor only to write, or preview only to read. On a phone, split view stacks the editor above the preview.
- Use the compact toolbar or shortcuts for heading, bold, italic, link, image, code, quote, lists, and a starter table.
- Copy the Markdown, download a .md file, download sanitized HTML, or print the preview. Drafts autosave locally while you work.
How the live preview stays safe
Markdown can include links, images, and (in some processors) raw HTML. Untrusted HTML is a common XSS path. This preview does not render arbitrary HTML. Script tags, iframe markup, javascript: URLs, and dangerous data: URLs are not turned into live elements. Links that pass the allowlist open with rel="noopener noreferrer" when they are external http(s) addresses.
HTML export uses the same sanitized tree. If you need a renderer that passes through HTML for a trusted internal doc, use a local toolchain you control — this page is built for untrusted paste buffers as well as your own drafts.
Where drafts are stored
After you pause typing, the current Markdown, view mode, and wrap setting are written to this origin’s localStorage using the key toolshelf_markdown_editor. That storage is on this device and this browser profile only. Toolshelf does not receive the draft for processing. Private windows may discard storage when they close. If the quota is full, the editor still works in memory and shows that storage is unavailable.
What you can do in this editor
- Live Markdown preview beside or below the editor
- Editor-only, preview-only, or split view
- Headings, emphasis, lists, quotes, tables, and fenced code
- Formatting toolbar plus keyboard shortcuts
- Safe preview that does not run raw HTML or javascript: links
- Copy Markdown, download .md or sanitized HTML, and print the preview
- Autosave drafts to this browser’s localStorage
- Word wrap and line numbers in the editor
Limitations
This is not a collaborative cloud document and not a WYSIWYG word processor. Footnotes, definition lists, math, mermaid diagrams, and custom HTML components are out of scope. Syntax highlighting in the source pane is limited to a monospace editor with line numbers — the preview shows fenced blocks as preformatted text. Very large documents stay editable; the preview waits a short moment so typing stays responsive. Autosave cannot survive a storage clear or a different device unless you download the file.
Frequently asked questions
- What is an online Markdown editor?
- An online Markdown editor lets you write Markdown in the browser and see a formatted preview without installing a desktop app. This Toolshelf editor parses CommonMark-style syntax and GitHub-flavored extras such as tables and task lists, then shows a live preview next to the source.
- Do I need an account to use this Markdown editor?
- No. The Toolshelf Markdown editor and preview requires no account. There is no signup. Editing and preview are available as soon as the page loads.
- Does the preview run HTML or scripts?
- No. Raw HTML is shown as text, not executed. javascript: links, data HTML, SVG data URLs, and event-handler attributes are stripped. The preview is built from a sanitized document tree rather than untrusted innerHTML.
- Where are drafts stored?
- Drafts autosave to this browser’s localStorage under the key toolshelf_markdown_editor. They are not written to a Toolshelf database, not placed in the page URL, and not uploaded for processing. Clearing site data, using another browser, or filling the storage quota can remove or block the draft.
- Can I download Markdown or HTML?
- Yes. Download .md saves the editor source. Download HTML saves a sanitized HTML document generated from the same preview rules. Print preview opens the browser print dialog for the rendered preview, which you can also save as PDF if the browser offers it.
- What keyboard shortcuts are supported?
- Ctrl+B or Cmd+B for bold, Ctrl+I for italic, Ctrl+K for a link, Ctrl+E for inline code, and Ctrl+Shift+E for a code block. Heading, quote, and list shortcuts are listed on the toolbar buttons.
- Does it work on mobile?
- Yes. On small screens split view stacks the editor above the preview. You can switch to editor-only or preview-only. Toolbar buttons wrap, and word wrap is on by default so the page should not scroll sideways.
- How is this different from the online notepad?
- The notepad is a plain-text editor with find, replace, and multiple local notes. This page is a Markdown editor with live preview, formatting inserts, and a sanitized HTML export. Use the notepad for unstructured text; use this editor when you need Markdown syntax and a rendered view.
Related tools
Continue with related browser-based tools on Toolshelf.
- Online Notepad — Online notepad for writing and editing text.
- Text & Character Counter — Online text and character counter.
- Text Compare — Online text compare and diff checker.
- Code Formatter & Beautifier — Online code formatter and beautifier.
- Typing Test & Practice — Free typing test and touch-typing practice in your browser.
Ready to write Markdown?
Scroll up to the editor. Your draft stays in this browser unless you download it.
Back to editorWhat would you like to do next?
Continue working with the next step in this workflow. Recently used tools in this set are listed first.
- Online Notepad — Online notepad for writing and editing text.
- Text & Character Counter — Online text and character counter.
- Text Compare — Online text compare and diff checker.
- Code Formatter & Beautifier — Online code formatter and beautifier.
You may also need
Continue with related browser-based tools on Toolshelf.
- Online Notepad — Online notepad for writing and editing text.
- Text & Character Counter — Online text and character counter.
- Text Compare — Online text compare and diff checker.
- Code Formatter & Beautifier — Online code formatter and beautifier.
- Typing Test & Practice — Free typing test and touch-typing practice in your browser.