Markdown Editor

Write Markdown with live preview side by side. Supports headings, lists, tables, code blocks, links, images, and more. Export as .md or .html.

What is Markdown Editor?

A Markdown Editor is a writing tool that lets you compose Markdown—a lightweight plain-text markup language—with a live rendered preview updating as you type. Created by John Gruber in 2004, Markdown is designed to be readable as plain text while converting cleanly to formatted HTML. Its simplicity has made it the de facto standard for an enormous range of content: GitHub README files and wikis, technical documentation sites (MkDocs, Docusaurus, GitBook), static site generators (Jekyll, Hugo, Gatsby), note-taking apps (Obsidian, Notion, Bear), blog platforms, API documentation, Slack and Discord messages, and Jupyter notebooks. Markdown's appeal is its minimal syntax—you write in plain text with simple conventions: wrap text in asterisks for bold (**bold**) or italic (*italic*), prefix lines with # for headings, indent with hyphens for bullet lists, and use backticks for inline code. The result is a file that is both human-readable in its raw form and renders beautifully as HTML. A split-pane editor that shows the Markdown source on the left and the rendered output on the right is the most productive way to write Markdown, eliminating the write-save-open-browser feedback loop that slows down writing in a plain text editor.

How to Use Markdown Editor

Type your Markdown content in the left editor pane. The rendered preview updates in real-time on the right side as you type, so you always see exactly how your content will look when published. Use the toolbar shortcuts at the top for quick insertion of common Markdown elements without memorizing syntax: bold, italic, headings, links, images, code blocks, tables, and lists. Switch between three view modes using the tabs: Editor-only (distraction-free writing mode), Split (side-by-side editing and preview—the default), and Preview-only (final rendered view for proofreading). Use keyboard shortcuts for efficiency: Ctrl+B for bold, Ctrl+I for italic, Ctrl+K for link insertion. The toolbar's table generator helps you create Markdown tables visually by specifying columns and rows, which is far easier than manually typing the pipe-separated table syntax. When finished, click Download .md to save the raw Markdown source file, or Download .html to save a complete standalone HTML file with embedded CSS styling—ready to open in any browser or publish directly.

FAQ

What Markdown syntax features are supported?

The editor supports the full CommonMark specification plus common extensions: headings (# through ######), bold (**text**), italic (*text*), strikethrough (~~text~~), inline code (`code`), fenced code blocks with language hints (```javascript), ordered and unordered lists, task lists (- [ ] item), blockquotes (>), horizontal rules (---), links ([text](url)), images (![alt](url)), tables (pipe-separated), footnotes, and HTML passthrough for elements Markdown doesn't natively support.

Can I export my Markdown as HTML?

Yes. Click the Download HTML button to get a complete, standalone HTML file with embedded CSS styling applied. The file opens correctly in any web browser and is ready to publish or share without any additional tools. The HTML output includes the rendered Markdown with appropriate heading hierarchy, properly formatted code blocks, clickable links, and styled tables. For blog posts and documentation, this is a quick way to get a publish-ready HTML document from a Markdown draft.

How do I create tables in Markdown?

Markdown tables use pipe (|) characters to separate columns and hyphens (---) for the header row separator. Example: | Name | Age | --- | --- | | Alice | 30 | | Bob | 25 |. The number of hyphens in the separator row does not matter—at least three are needed. Add colons to control alignment: :--- for left-aligned, :---: for centered, ---: for right-aligned. The table generator in the toolbar creates the structure for you so you just fill in the content.

What is the difference between .md and .mdx files?

Standard Markdown (.md) is plain text with Markdown formatting that converts to HTML. MDX (.mdx) is an extension used in React-based frameworks (Next.js, Gatsby, Docusaurus) that allows embedding JSX components directly in Markdown files. The editor here focuses on standard CommonMark Markdown (.md). For MDX files, you would typically use a dedicated MDX editor or your IDE with MDX support.

Is my content saved when I close the browser?

The editor stores your current content in the browser's localStorage, so it persists across page refreshes and browser restarts on the same device. However, localStorage can be cleared by browser settings or private browsing mode. For important documents, always use the Download .md button to save a local file as your primary backup. Do not rely on the browser-stored version as your only copy of important content.