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 an interactive frontend project built using HTML, CSS, and JavaScript. It allows users to write Markdown content in an editor and see the formatted result instantly in a separate preview area. This creates a simple writing environment where users can check how their Markdown will look while they type.

First, the editor provides a dedicated area for entering Markdown text. Next, JavaScript reads the content whenever the user makes a change and processes the Markdown syntax. Finally, the formatted result appears in the preview section without requiring the page to reload. This project demonstrates text parsing, input events, live preview updates, DOM manipulation, and dynamic content rendering.

Key Features

Real-Time Markdown Preview: Users can type Markdown content and see the formatted result immediately. This makes it easier to understand how Markdown syntax affects the final output.
Live Text Processing: JavaScript monitors changes in the editor and processes the entered content continuously. Therefore, the preview stays synchronized with the user’s input.
Separate Editor and Preview: The interface divides the workspace into an editing area and a preview area. This allows users to write content while checking the rendered result at the same time.
Markdown Formatting: The editor supports common Markdown formatting concepts such as headings, bold text, italic text, lists, and other basic syntax. The preview converts the entered syntax into formatted content.
Dynamic Content Rendering: JavaScript updates the preview whenever the Markdown content changes. As a result, users do not need to click a separate preview button.
Simple Writing Interface: The project provides a clean layout with clearly separated editing and preview sections. This keeps the interface easy to understand for beginners.
Instant User Feedback: Every change in the editor can immediately affect the preview. Therefore, users can experiment with Markdown syntax and see the result quickly.
Responsive Layout: The editor and preview areas are designed to work within the available page width. This makes the component suitable for different screen sizes.
DOM Manipulation: JavaScript accesses the editor and preview elements and changes the displayed content dynamically. This demonstrates an important technique for building interactive web interfaces.
Reusable Markdown Component: The same editor structure can be adapted for blogs, documentation tools, note-taking apps, and content management interfaces.

What You'll Learn

How to create a Markdown editor using HTML
How to build a side-by-side editor and preview layout
How to listen for real-time input changes
How to process Markdown text with JavaScript
How to convert formatted text into HTML
How to update the DOM dynamically
How to create an instant preview interface
How to build a responsive text-editing component

HTML Code

The HTML creates the main structure of the Live Markdown Editor. First, it provides a heading and a main editor area where users can enter their Markdown content. Next, the preview section provides a separate area for displaying the rendered result. Both sections have their own elements so JavaScript can read the editor content and update the preview dynamically.

The structure keeps the writing and preview areas separate, making it easier to understand how the input moves from the editor to the rendered output.

<!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

The CSS controls the layout and appearance of the Markdown editor. The main container uses a clean card-style design with spacing, rounded corners, and a shadow to separate the editor from the page background. Next, the editor and preview areas use a flexible layout so users can view them together on larger screens. The textarea receives appropriate padding, borders, and sizing to provide a comfortable writing area.

The preview section also uses spacing and typography styles so headings, paragraphs, lists, and other rendered Markdown content remain easy to read. Media-query rules can adjust the layout for smaller screens.

*{
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

JavaScript provides the live Markdown functionality. First, it selects the editor and preview elements so it can monitor the user’s input and update the rendered content. Next, an input event listener runs whenever the user types or changes the Markdown text. JavaScript reads the current content, processes the Markdown syntax, and generates the corresponding formatted HTML.

Finally, the generated HTML is inserted into the preview area. Therefore, the preview changes immediately as the user writes, creating a real-time Markdown editing experience.

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()