Markdown Editor: Write & Preview Live
Markdown editor with live preview, syntax highlighting, and HTML export. Write documentation and READMEs in your browser.
What Is Markdown Editor?
Markdown Editor is a free online writing environment that renders a live preview of your Markdown as you type. The editor and preview sit side by side: type on the left, see formatted output on the right — instantly, with no refresh needed. It handles everything from headings and bold text to fenced code blocks, tables, and blockquotes.
The tool is built for developers writing READMEs, technical documentation, blog drafts, and release notes — anywhere Markdown is the authoring format. Rather than pushing changes to a repository and waiting for a preview render, or installing a local editor plugin, you get an accurate rendered preview in the browser. When you are done, export the file as a .md file for version control or as a complete, styled .html file ready for a web page. No account, no server upload, no configuration.
Key Features
- Live Markdown preview — Powered by
@uiw/react-md-editor, the editor renders the preview in real time using the same Markdown parsing that the library ships with. Changes appear in the preview the moment you stop typing a character. - Syntax highlighting — Fenced code blocks (
javascript,python, etc.) render with syntax-coloured output in the preview pane. The editor's own raw Markdown view also applies syntax colouring to differentiate headings, links, bold, and code spans. - Export to HTML — "Download HTML" produces a complete
<!DOCTYPE html>document with embedded CSS styles covering body font, code blocks, blockquotes, and tables. The file downloads asdocument.htmland opens correctly in any browser without external dependencies. - Download as .md file — "Download MD" saves the raw Markdown source as
document.md, ready to commit to a repository or attach to a ticket. - Copy Markdown — Copies the raw Markdown text to the clipboard for pasting into GitHub, GitLab, Confluence, Notion, or any Markdown-aware input field.
- Copy HTML — Copies the rendered inner HTML from the preview pane. Useful when you need to paste formatted content into a rich-text editor that accepts HTML.
- Common formatting toolbar — The
@uiw/react-md-editortoolbar provides buttons for bold, italic, headings, lists, links, images, code, and more. No keyboard shortcut memorisation required. - Quick reference panel — A syntax cheat sheet below the editor covers the nine most-used Markdown constructs: headings, bold, italic, links, images, inline code, lists, blockquotes, and fenced code blocks.
How to Use Markdown Editor
Step 1: Start writing or load your content
When the page loads, the editor contains a sample document demonstrating headings, bold and italic text, an unordered list, a fenced JavaScript code block, a table, a blockquote, and a link. The preview pane on the right shows the rendered output of that sample.
Clear the editor by clicking the "Clear" button in the action bar, or simply select all and start typing. The editor height is fixed at 600px with vertical scrolling enabled for longer documents.
Step 2: Write Markdown using the toolbar or keyboard
The toolbar across the top of the editor includes buttons for the most common formatting operations. Click B to wrap the selected text in double asterisks for bold, or click I to wrap it in single asterisks for italic. Heading buttons insert #, ##, or ### prefixes. Code fence buttons insert a triple-backtick block with a language placeholder.
For fenced code blocks with syntax highlighting, write:
def greet(name: str) -> str: return f"Hello, {name}!"
print(greet("world"))
The preview renders this as a coloured code block. The quick reference panel at the bottom of the page shows all nine syntax patterns at a glance.
Step 3: Verify the rendered output in the preview pane
The right pane updates as you type. Scroll it independently of the editor to review the full document. The data-color-mode="auto" attribute means the editor and preview adapt to your operating system's light or dark mode preference automatically.
Check that:
- Tables render with borders and alternating header styling
- Links are clickable (they use
hrefattributes in the rendered HTML) - Code blocks have the correct syntax colours for the language you specified
- Images show (if you have referenced publicly accessible image URLs)
Step 4: Export your document
Choose the export that matches your use case:
- Copy Markdown — paste the raw source into GitHub PR descriptions, Jira comments, Notion pages, or any Markdown field
- Copy HTML — paste the rendered markup into rich-text editors that accept HTML input
- Download MD — saves
document.mdto your Downloads folder - Download HTML — saves
document.htmlwith embedded styles, ready to host as a static web page
The exported HTML document includes a <style> block with sensible defaults: system font stack, max-width: 800px centred layout, code background #f4f4f4, blockquote left border, and full-width table with bordered cells.
Step 5: Recover previous work with history
Premium supporters can use the History panel below the editor to restore any previously auto-saved document. Non-premium users should copy or download their work before navigating away, as the editor content is not persisted across sessions.
Practical Examples
Writing a project README
A developer is creating a README for a new CLI tool. They write:
# my-cli
A command-line tool for batch file renaming.
## Installation
npm install -g my-cli
## Usage
my-cli --pattern "*.log" --prefix "archive-"
## Options
| Flag | Description | Default |
|------|-------------|---------|
| `--pattern` | Glob pattern for matching files | `*` |
| `--prefix` | String prepended to filenames | `""` |
| `--dry-run` | Preview changes without renaming | `false` |The live preview shows the table with column headers, the bash code blocks with syntax highlighting, and the heading hierarchy. They click "Download MD" to save the file directly into their project root.
Creating a styled HTML page from documentation
A technical writer has a Markdown document describing an API endpoint. They paste the content, verify the preview, then click "Download HTML". The resulting document.html includes embedded CSS and renders correctly when opened in a browser or sent as an email attachment — no external stylesheet required.
Drafting a release changelog
A developer writing a version 2.4.0 changelog uses the editor to structure the document with ## headings for "Breaking Changes", "New Features", and "Bug Fixes", using unordered lists under each. They click "Copy HTML" to paste the formatted content directly into their company's release management tool, which accepts rich HTML input.
Tips and Best Practices
The toolbar inserts formatting around selected text. Select a word and click the Bold button; the selection becomes word. If nothing is selected, the button inserts a placeholder like bold text at the cursor.
Fenced code blocks require a language identifier for syntax highlighting. A bare ` block renders as plain monospace text. Append the language name immediately after the opening backticks ( `typescript , `sql , `yaml ) for coloured output.
Copy HTML captures the live preview's inner HTML. The handleCopyHtml function reads document.querySelector('.w-md-editor-preview')?.innerHTML. If the preview has not rendered yet (for example, immediately after page load), the copied HTML may be empty. Wait for the preview to populate before clicking "Copy HTML".
Downloaded HTML is self-contained. The document.html file includes all necessary styles inline. You can email it, host it on a static file server, or attach it to a ticket without any additional assets.
Clear does not ask for confirmation. Clicking "Clear" immediately empties the editor. If you have unsaved work, download or copy it first.
Common Issues and Troubleshooting
"The editor shows a loading spinner." The @uiw/react-md-editor component is lazy-loaded to avoid server-side rendering issues. The spinner appears briefly while the editor bundle loads. It should disappear within one or two seconds on a normal connection.
"Copy HTML produced empty output." The function reads the preview container's innerHTML. If the preview has not yet rendered (uncommon but possible on very slow connections), this may return an empty string. Scroll the preview pane to trigger a render, then try again.
"My table is not rendering." Markdown tables require a separator row of dashes between the header row and the data rows: |------|------|. Ensure every cell in the header row has a corresponding separator cell. Leading and trailing pipe characters (|) are optional but recommended for consistency.
"Fenced code has no syntax highlighting." Verify the language identifier is on the same line as the opening backticks with no space: `javascript not ` javascript . Also confirm the language name is lowercase and spelled correctly (python, not Python).
"Downloaded MD file has no extension on macOS." macOS sometimes strips the .md extension for files it does not recognise as a standard type. Rename the file to add .md after downloading, or configure your browser to always ask where to save downloads.
Privacy and Security
All Markdown rendering, HTML conversion, and file export happen entirely in your browser. No content you type is transmitted to Glyph Widgets servers or any third party. The editor works offline once the page has loaded. This makes it safe for internal documentation, proprietary technical specifications, and drafts containing confidential project details.
Frequently Asked Questions
Is Markdown Editor free? Yes, completely free with no usage limits. There is no registration, subscription, or payment of any kind required.
Does it work offline? Once the page loads and the editor bundle initialises, all writing, preview, and export features work without a network connection.
Is my data safe? Everything you type stays in your browser's memory. No content is sent to a server. It is safe to write confidential documentation, internal API references, or private notes.
What Markdown flavour does it support? The editor uses @uiw/react-md-editor, which is based on remark and supports CommonMark syntax with GitHub Flavored Markdown extensions including tables, task lists, and fenced code blocks with language identifiers.
Can I embed images? Yes, using standard Markdown image syntax: !alt text. The image must be publicly accessible — local file paths do not work in a browser context. The image renders in the live preview immediately.
What languages are supported in fenced code blocks? The preview renders syntax highlighting for any language that the underlying remark/highlight.js pipeline supports. Common languages — JavaScript, TypeScript, Python, Java, Go, Rust, SQL, Bash, YAML, JSON, and many others — all work with the language identifier appended to the opening fence.
Does the downloaded HTML file need an internet connection? No. The exported document.html contains all styles inline in a <style> block. No external CSS frameworks, CDN resources, or fonts are loaded. It renders identically offline.
Can I use keyboard shortcuts? The @uiw/react-md-editor component supports standard text-editing shortcuts (Ctrl/Cmd+B for bold, Ctrl/Cmd+I for italic) depending on the platform. The toolbar buttons are the most reliable way to insert formatting if shortcuts behave differently on your operating system.
How do I create a task list? Use - [ ] for an unchecked item and - [x] for a checked item:
- [x] Write first draft
- [ ] Review with team
- [ ] PublishWhat happens to my content when I clear the editor? The editor resets to an empty string immediately. Content is not recoverable from the tool itself unless you previously used the History panel (premium feature) or copied/downloaded the content beforehand.
Related Tools
JSON Formatter — Format JSON data before embedding it in Markdown documentation.
Diff Checker — Compare two versions of a Markdown document to find what changed between drafts.
Text Diff — A text-focused comparison tool for auditing prose changes in documentation.
Try Markdown Editor now: Markdown Editor