I built an instant, client-side Markdown to HTML converter. Here is how it works.

Most online utilities are bloated, slow, and send your private data to backend servers. To solve this, I built a lightweight, high-performance Markdown to HTML Converter as part of my utility hub.

Try it live: https://tools.kandz.me/markdown-to-html

How It Works Under the Hood ⚙️

The application is built using Angular 18 and reactive Signals. Instead of pulling in a massive external parsing package, it uses a streamlined, client-side regular expression parser:

htmlOutput = computed(() => {
  let raw = this.markdown();
  if (!raw) return '';

  return raw
    .replace(/^# (.*$)/gim, '<h1>$1</h1>')
    .replace(/^## (.*$)/gim, '<h2>$1</h2>')
    .replace(/^### (.*$)/gim, '<h3>$1</h3>')
    .replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>')
    .replace(/\*(.*)\*/gim, '<em>$1</em>')
    .replace(/^\- (.*$)/gim, '<li>$1</li>')
    .replace(/\n/gim, '<br>');
});

Because it uses reactive computed signals, the preview updates the exact millisecond you change your text.

Solving the "Contrast Flicker" 🎨

During initial testing, we noticed a common issue with browser-based rendering: dynamic HTML injected via innerHTML would briefly inherit dark text before scaling to the light typography.

We resolved this by using a high-specificity scoped style sheet directly in our template, forcing absolute contrast with the dark theme viewport (#0f172a background):

<style>
  .kandz-html-render * { color: #ffffff !important; }
  .kandz-html-render strong { color: #34d399 !important; }
</style>

Total Client-Side Privacy 🛡️

Many online converters log your keystrokes to a remote database, which is a significant security risk if you are converting internal project roadmaps or private keys.

By running all calculations locally in your device's memory (RAM), your raw text never touches an external server.

Try it out and let me know if you have suggestions for expanding the regex parser: tools.kandz.me/markdown-to-html