You’ve probably seen Markdown if you write a lot of notes, documentation, or blog entries. It allows you to format text with straightforward symbols rather than complex menus. This tutorial will teach you how to create a Markdown to HTML tool using a browser-based Javascript tool.
Using a few lines of vanilla JavaScript, you will build your own markdown to HTML converter JavaScript project rather than depending on a third-party website or library. This little program will function as a live JavaScript markdown to HTML converter, so any changes you make to your input will show up in the preview right away.
Sample Markdown you will convert
Before we move to write any code, look at a small piece of Markdown that your converter will handle. Imagine you keep a simple personal travel log online:
# Weekend in the mountains
I planned this trip to reset and get more focus.
This text includes **bold** and *italic* styles.
Here is a link to the forecast:
[Local forecast](https://example.com/weather)
Inline `code` can highlight commands or notes.
Another line of text here.This short example demonstrates several core Markdown features in a simple and readable way. It includes a heading that starts with #, bold text wrapped in double asterisks, italic text wrapped in single asterisks, a clickable link written as text, and inline code formatted using backticks like code.
Line breaks separate paragraphs to clearly distinguish ideas and improve readability. A vanilla JavaScript Markdown-to-HTML converter can process this text and convert it into clean, well-structured HTML that displays safely on any web page.
Live Markdown to HTML converter using JavaScript
In this section you will build a small markdown parser javascript no library style. It sits in a single HTML file and uses only JavaScript, HTML, and a bit of CSS. You will type Markdown on the left and see HTML output on the right.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Markdown to HTML Converter</title>
<style>
body {
margin: 0;
padding: 20px;
display: flex;
gap: 20px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #f5f5f5;
}
.pane {
flex: 1;
display: flex;
flex-direction: column;
}
h2 {
margin: 0 0 10px 0;
font-size: 18px;
}
textarea {
width: 100%;
height: 400px;
padding: 10px;
font-size: 16px;
font-family: inherit;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
.preview {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
background: #ffffff;
overflow: auto;
}
.preview h1,
.preview h2,
.preview h3 {
margin-top: 0.6em;
margin-bottom: 0.4em;
}
.preview p {
margin: 0.4em 0;
}
.preview code {
padding: 2px 4px;
border-radius: 3px;
background: #f0f0f0;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.preview a {
color: #0066cc;
text-decoration: none;
}
.preview a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="pane">
<h2>Markdown input</h2>
<textarea id="markdown-input">
# Weekend in the mountains
I planned this trip to reset and get more focus.
This text includes **bold** and *italic* styles.
Here is a link to the forecast:
[Local forecast](https://example.com/weather)
Inline `code` can highlight commands or notes.
Another line of text here.
</textarea>
</div>
<div class="pane">
<h2>HTML preview</h2>
<div id="html-output" class="preview"></div>
</div>
<script>
function markdownToHtml(markdown) {
let html = markdown;
html = html.replace(/^###### (.*$)/gim, "<h6>$1</h6>");
html = html.replace(/^##### (.*$)/gim, "<h5>$1</h5>");
html = html.replace(/^#### (.*$)/gim, "<h4>$1</h4>");
html = html.replace(/^### (.*$)/gim, "<h3>$1</h3>");
html = html.replace(/^## (.*$)/gim, "<h2>$1</h2>");
html = html.replace(/^# (.*$)/gim, "<h1>$1</h1>");
html = html.replace(/\*\*(.*?)\*\*/gim, "<strong>$1</strong>");
html = html.replace(/\*(.*?)\*/gim, "<em>$1</em>");
html = html.replace(/`([^`]+)`/gim, "<code>$1</code>");
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/gim, "<a href='$2' target='_blank'>$1</a>");
html = html.replace(/\n{2,}/g, "</p><p>");
html = "<p>" + html + "</p>";
html = html.replace(/<p><h([1-6])>/g, "<h$1>");
html = html.replace(/<\/h([1-6])><\/p>/g, "</h$1>");
html = html.replace(/<p>\s*<\/p>/g, "");
return html.trim();
}
const input = document.getElementById("markdown-input");
const output = document.getElementById("html-output");
function updateOutput() {
const markdownText = input.value;
const html = markdownToHtml(markdownText);
output.innerHTML = html;
}
input.addEventListener("input", updateOutput);
updateOutput();
</script>
</body>
</html>The page has two main sections. On the left, a is used to enter raw Markdown. On the right, a <div> displays the converted HTML output.
The markdownToHtml function does the conversion by applying simple text replacements. Headings starting with # turn into <h1>, <h2>, and <h3> tags. Text wrapped in ** becomes bold using <strong>, single * creates italics with <em>, backticks format inline <code>, and <a href="url">text</a> is converted into clickable anchor links. Double line breaks are wrapped in <p> tags to form paragraphs.
The updateOutput function reads the textarea value, converts it using markdownToHtml, and updates the preview area. Since this function runs on every input event, the HTML updates instantly as you type, creating a smooth live Markdown to HTML experience.
Conclusion
With just one HTML file and a few lines of simple JavaScript, you have created a functional Markdown to HTML tool. It can power note apps, internal tools, or a basic blog editor and reacts instantly to user input. Your frontend remains lightweight and simple to manage with this pure JavaScript markdown to HTML converter. You can customize the design to fit your website and choose which Markdown features to support.