Markdown Editor
What is Markdown?
Markdown is a lightweight markup language for writing structured content in readable plain text. Headings, lists, links, images, quotes, code blocks, and tables can be expressed with simple characters and later rendered as HTML or other formats. A Markdown editor helps compare source and preview, catch formatting mistakes, and prepare content faster for README files, documentation, blog posts, notes, knowledge bases, changelogs, and product copy. Markdown stays intentionally simple, but platforms support different extensions such as GitHub-Flavored Markdown, frontmatter, task lists, or Mermaid diagrams. Because of that, the final rendering should still be checked in the system where the content will be published.
How to Use
How to use
- Enter Markdown text in the left editor
- Right panel shows real-time preview
- Use toolbar buttons to insert common syntax
- Bottom bar displays word, character, line counts
- Content auto-saves to browser local storage
Features
Editing Tips
- Preview rendering can vary between platforms, so check final output in the target system when using tables, HTML, or extended Markdown features.
- Auto-save is useful while drafting, but keep a separate copy for important notes before clearing browser data or switching devices.
Use Cases
Technical Principle
Markdown rendering usually has three steps: a tokenizer slices the text into syntactic units like headings, paragraphs, lists, and code blocks; a parser turns the token stream into an abstract syntax tree (AST) per the grammar rules; a renderer walks the AST and outputs the matching HTML. Common JavaScript libraries include marked, markdown-it, remark, and micromark - they differ in bundle size, speed, and extensibility, but all follow the CommonMark spec. CommonMark fixed the original Markdown grammar's ambiguities (e.g. how to indent nested lists, how to find the boundary of inline code) so that different implementations render the same result. On top of CommonMark, GitHub added GFM (GitHub Flavored Markdown), which adds tables, task lists (- [ ]), strikethrough (~~), autolinks, and fenced code blocks; GFM is the de facto standard today, and most modern Markdown tools enable it by default. Code-block syntax highlighting is usually done by highlight.js or Prism.js, which recognize the language tag at render time and tag keywords, strings, and comments with CSS classes that a theme styles in color. To stop user-supplied HTML from triggering XSS, renderers typically pipe the output through DOMPurify or a similar allowlist filter that strips script, iframe, and on* event attributes - so pasting someone else's Markdown can't execute a malicious script.
- Parsing flow: raw text goes through Tokenizer -> Parser -> Renderer to become HTML, with the AST as the intermediate representation.
- Standards: CommonMark is the official grammar; GFM extends it with tables, task lists, strikethrough, fenced code blocks, and autolinks.
- Library comparison: marked is small and fast, markdown-it has a rich plugin ecosystem, and remark sits on the unified ecosystem and is good for document-processing pipelines.
- Syntax highlighting: highlight.js or Prism.js read the code block's language tag at parse time and tag keywords, strings, and comments with CSS classes.
- XSS protection: libraries like DOMPurify filter the output HTML against an allowlist, removing script, iframe, and on* event attributes to prevent script injection.
- Live preview: the editor listens to input events, debounces each change, re-parses, and updates the right-hand DOM via diff to balance responsiveness and performance.
Examples
Headings, Lists, and Code Blocks
# Heading 1
## Heading 2
- List item A
- List item B
- Nested list item
```javascript
function hello() {
console.log('Hello Markdown');
}
```Tables
| Tool | Type | Size |
|---------|--------|------|
| Vite | Build | Small|
| Webpack | Build | Large|
| Rollup | Bundle | Mid |Quotes and Links
> "Markdown lets writing return to the content itself."
> -- John Gruber
Reference: [CommonMark Spec](https://commonmark.org)FAQ
Which Markdown flavor is supported?
Most builds use CommonMark plus GitHub Flavored Markdown extensions: tables, strikethrough, task lists, fenced code blocks with language hints. Some include MathJax/KaTeX for $math$ blocks and Mermaid for diagrams. Check the toolbar for what's available.
Is the document uploaded?
No. Markdown parsing and rendering happen in your browser using a JS library (typically markdown-it or remark). Your draft never leaves the device.
How does the live preview work?
As you type, the source pane is parsed and rendered to HTML in the preview pane. Synced scrolling keeps the two panes aligned by matching paragraph positions. Most builds also support fullscreen and side-by-side toggle.
Can I export the document?
Yes - download as .md (the raw source), HTML (rendered, ready to embed in a web page), or PDF (printed via the browser's print engine). PDF output preserves headings, lists, code blocks, and embedded images. For pixel-precise PDFs, paste the HTML into a real word processor.
Will it save my draft if I close the tab?
Most builds auto-save to localStorage, so reopening the same browser restores the draft. Closing a private window or clearing site data wipes it. For real persistence, export the .md file periodically to your file system or git repo.
Are images uploaded if I paste them?
Some editors store pasted images as inline base64 (visible in the markdown source). Others upload to an image host - check the page behaviour. If privacy matters, save images to your file system first and reference by relative path.
Can I insert tables, math, or diagrams?
GitHub Flavored Markdown tables (| col1 | col2 |) work everywhere. Math blocks ($x^2$) and Mermaid diagrams (```mermaid) need explicit support; check the toolbar for buttons. Where supported, the preview renders them live.