Live Markdown Editor | HTML CSS JavaScript

Live Markdown Editor with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #35

Project Overview

The Live Markdown Editor is a frontend tool developed using HTML, CSS, and JavaScript that allows users to write Markdown text and instantly preview the formatted output. The editor converts Markdown syntax into HTML in real-time using a Markdown parsing library. This project demonstrates key frontend concepts such as real-time content updates, text parsing, and dynamic DOM rendering, making it useful for applications like documentation tools, blog editors, and note-taking platforms.

Key Features

Real-time Markdown preview while typing
Supports common Markdown syntax
Split-screen editor and preview layout
Instant conversion from Markdown to HTML
Clean and responsive interface
Lightweight implementation using JavaScript

HTML Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Live Markdown Editor</title>
<link rel="stylesheet" href="style.css">

<!-- Markdown Parser Library -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>

<body>

<div class="container">

<h1>Live Markdown Editor</h1>

<div class="editor">

<textarea id="markdownInput" placeholder="Type Markdown here...">
# Welcome

## Live Markdown Editor

**Bold Text**

*Italic Text*

- List Item 1
- List Item 2

[Visit Website](https://example.com)
</textarea>

<div id="preview"></div>

</div>

</div>

<script src="script.js"></script>

</body>
</html>

CSS Code

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

body{
background:#042354;
display:flex;
justify-content:center;
padding:40px;
}

.container{
background:white;
padding:30px;
border-radius:12px;
width:1000px;
max-width:95%;
}

h1{
text-align:center;
margin-bottom:20px;
}

.editor{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

/* INPUT */

textarea{
width:100%;
height:400px;
padding:15px;
border:1px solid #ddd;
border-radius:8px;
resize:none;
font-size:14px;
}

/* PREVIEW */

#preview{
border:1px solid #ddd;
padding:15px;
border-radius:8px;
background:#f9fafb;
overflow:auto;
}

#preview h1{
font-size:28px;
}

#preview h2{
font-size:22px;
}

#preview ul{
margin-left:20px;
}

Javascript Code

const input = document.getElementById("markdownInput")
const preview = document.getElementById("preview")

function updatePreview(){

const markdownText = input.value

const html = marked.parse(markdownText)

preview.innerHTML = html

}

input.addEventListener("input", updatePreview)

updatePreview()