DEV Community

Jonathan Park
Jonathan Park

Posted on

I Built a Markdown-to-Rich-Text Converter Because Copy-Paste Shouldn't Be This Hard

#markdown #webdev #productivity #opensource

If you write in Markdown, you've felt this pain.

You craft a perfectly formatted document — headers, bold text, code blocks, lists — then you need to paste it into Google Docs. Or Slack. Or an email. Or a CMS with a rich text editor.

So you copy. You paste. And you get... a wall of plain text with asterisks and hash symbols staring back at you.

The Workaround Tax

The usual workarounds are embarrassing for 2026:

  1. Render in a preview, copy from there — Sometimes works. Mostly doesn't preserve formatting cleanly.
  2. Export to HTML, open in browser, copy from browser — Three steps too many.
  3. Just reformat it manually — No.
  4. Use a paid app — For... copying and pasting?

I kept running into this during my own workflow. I write everything in Markdown. READMEs, docs, blog drafts, notes. But half the people I work with live in Google Docs and Notion. Every time I needed to share something, I'd lose 5 minutes reformatting.

So I Built MarkdownPaste

The idea is dead simple:

  1. Paste or type your Markdown
  2. Click "Copy as Rich Text"
  3. Paste into any rich text editor with full formatting

That's it. No account. No download. No electron app eating 400MB of RAM.

How It Actually Works

Under the hood, this uses the Clipboard API — specifically, the ability to write multiple MIME types to the clipboard at once.

When you click "Copy," the app:

  1. Parses the Markdown into an HTML string (using a lightweight parser)
  2. Creates a ClipboardItem with both text/html and text/plain representations
  3. Writes to the clipboard via navigator.clipboard.write() 
const blob = new Blob([htmlString], { type: "text/html" });
const item = new ClipboardItem({
  "text/html": blob,
  "text/plain": new Blob([plainText], { type: "text/plain" }),
});
await navigator.clipboard.write([item]);
Enter fullscreen mode Exit fullscreen mode

The key insight: most rich text editors (Google Docs, Outlook, Slack, Notion) check for text/html on the clipboard first. If it's there, they render it as formatted text. If not, they fall back to text/plain.

By writing both, you get rich formatting where it's supported and clean plaintext everywhere else.

The Gotchas

A few things I learned building this:

  • navigator.clipboard.write() requires a secure context (HTTPS) and a user gesture (click). You can't just fire it on page load.
  • Some browsers are stricter than others. Firefox had partial support for a while. It's solid now, but I added a fallback using document.execCommand('copy') with a hidden contenteditable div for older browsers.
  • Code blocks need special handling. If you just dump <pre><code> into the clipboard, some editors strip the formatting. Adding inline styles as a fallback helps.

What It Handles

  • Headers, bold, italic, strikethrough
  • Ordered and unordered lists
  • Code blocks with syntax hints
  • Links and images
  • Tables
  • Blockquotes
  • Nested formatting

It runs entirely in the browser. No server. Your text never leaves your machine.

Try It

It's free, no sign-up required: tools.impulsestudios.cc

If you write in Markdown and regularly need to paste into rich text editors, this saves a few minutes every time. Nothing revolutionary — just one less paper cut in the workflow.

Part of the Impulse Studios free tools collection. If you find a bug or want a feature, open an issue or just tell me.

Top comments (0)