It's a secret code writers use! putting **stars** around words makes them bold, and # hastags make them headers.

No! This entire tool lives in your browser. It's safe, fast, and free.

Can I use this for my blog?

Absolutely! This is exactly how many blog platforms (like standard README files) work.

Build Your Own Markdown Previewer (10 Easy Steps)

Hi there! 👋

Have you ever wondered how websites make text look bold, italic, or turn into links? They usually use a special language called HTML.

But writing HTML is slow and hard. Hello is annoying to type.

So, developers invented a shortcut called Markdown. It lets you typelike **Hello** and it magically turns into HTML. Today, we are going to build a tool that translates this "Developer Shorthand" into pretty web pages instantly.

Think of it like a translator:

Left Side: You speak "Markdown".
Right Side: The computer shows "Web Page".

Let's build it!

🎯What You Will Learn

✓Create a split-screen layout
✓Capture what you type instantly
✓Use a 'Library' to do the hard translation
✓Display HTML safely
✓Style a professional editor

Step 1: The Editor Desk (HTML Container) 🪑

First, we need a desk to work on. We'll create a main container called editor-container. Inside, we need two separate areas: one for typing (Input) and one for viewing (Preview).

html

<div id="editor-container">
  <h1>📝 Live Markdown Editor</h1>
  
  <div class="split-screen">
    <!-- Area 1: Where we type -->
    <div class="half">
        <h3>Type Here (Markdown)</h3>
        <textarea id="editor" placeholder="Type **bold** or # Header here..."></textarea>
    </div>

    <!-- Area 2: Where we see results -->
    <div class="half">
        <h3>See Result (Preview)</h3>
        <div id="preview"></div>
    </div>
  </div>
</div>

Step 2: The Magic Translator (The Library) 📚

Turning **text** into text is tricky coding. We don't want to write 1000 lines of code to handle every rule.

Instead, we will use a famous library called Marked.js. It's like hiring a professional translator for free.

Copy this line and paste it at the top of your file:

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.0/marked.min.js"></script>

Step 3: Making it Look Like an App (CSS) 🎨

We want a "Split Screen" look, where the editor is on the left and the preview is on the right. We use CSS "Flexbox" to put them side-by-side.

css

<style>
  body { font-family: sans-serif; background: #f3f4f6; padding: 20px; }
  
  #editor-container {
      max-width: 1000px;
      margin: 0 auto;
  }
  
  .split-screen {
      display: flex; /* Puts items side-by-side */
      gap: 20px;
      height: 500px;
  }
  
  .half {
      flex: 1; /* Both sides take equal space */
      display: flex;
      flex-direction: column;
  }
</style>

Step 4: Styling the "Type Here" Box ⌨️

The text area needs to look like a code editor. We'll give it a special font and a nice border.

css

  textarea {
      flex: 1; /* Fill the whole space */
      padding: 15px;
      border: 2px solid #ddd;
      border-radius: 8px;
      font-family: 'Courier New', monospace; /* Looks like code */
      font-size: 16px;
      resize: none; /* Stop user from stretching it */
  }
  
  textarea:focus { border-color: #3b82f6; outline: none; }

Step 5: Styling the "Preview" Box 📄

The preview box should look like a real sheet of paper. We'll give it a white background and a shadow.

css

  #preview {
      flex: 1;
      padding: 20px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      overflow-y: auto; /* Scroll if text is long */
  }

Step 6: Waking up the Translator (JavaScript) 🧠

Now for the logic. We need a function that:

Reads what you typed in the textarea.
Sends it to the marked() library.
Pastes the result into the preview box.

javascript

<script>
function updatePreview() {
    // 1. Get the text
    var rawText = document.getElementById('editor').value;
    
    // 2. Translate it using our Library
    var niceHtml = marked.parse(rawText);
    
    // 3. Show it on the screen
    document.getElementById('preview').innerHTML = niceHtml;
}
</script>

Step 7: Live Updates ⚡

We don't want a "Submit" button. We want it to be instant. We add an "event listener" that runs our updatePreview function every time you lift your finger off a key (keyup).

javascript

// Listen for typing
var editor = document.getElementById('editor');
editor.addEventListener('input', updatePreview);

Step 8: Adding Placeholder Text 👻

When the app first opens, it's blank. That's boring! Let's put some example text in there so users know what to do.

javascript

// Run this when the page loads
window.onload = function() {
    var defaultText = "# Hello World\nThis is **bold** and this is *italic*.\n\n- List item 1\n- List item 2";
    
    // Put text in the box
    document.getElementById('editor').value = defaultText;
    
    // Trigger the preview to show it
    updatePreview();
};

Step 9: Handling "Enter" Key (Optional Polish) ↩️

Advanced Tip: Usually, marked handles line breaks nicely. But we want to make sure our preview looks clean. The logic in Step 6 is robust enough, but if you notice that pressing "Enter" doesn't create a new line visually, marked library usually expects TWO spaces at the end of a line or a double-enter.

For this simple guide, our default marked.parse() works great! No extra code needed here, but it's good to know!

Step 10: The Full App Code 📱

You did it! You built a splitscreen Markdown Editor.

Here is the complete code. Save it as markdown-editor.html and open it in Chrome, Safari, or Edge.

html

<!DOCTYPE html>
<html>
<head>
    <title>My Markdown Editor</title>
    <!-- 1. The Translator Library -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    
    <style>
        /* 2. The Styles */
        body { font-family: 'Segoe UI', sans-serif; background: #eef2ff; padding: 2rem; margin: 0; height: 100vh; box-sizing: border-box; }
        
        h1 { text-align: center; color: #4338ca; margin-top: 0; }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            height: calc(100% - 80px); /* Fill screen minus header */
            display: flex;
            gap: 20px;
        }
        
        .pane {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .label {
            font-weight: bold;
            margin-bottom: 10px;
            color: #6b7280;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 1px;
        }
        
        textarea {
            flex: 1;
            padding: 20px;
            border: 2px solid #c7d2fe;
            border-radius: 12px;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 16px;
            resize: none;
            background: #ffffff;
            color: #1f2937;
            line-height: 1.5;
        }
        textarea:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }
        
        #preview {
            flex: 1;
            padding: 20px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
            line-height: 1.6;
        }
        
        /* Make the preview content look nice */
        #preview h1, #preview h2 { border-bottom: 1px solid #eee; padding-bottom: 0.5rem; }
        #preview code { background: #f3f4f6; padding: 2px 5px; border-radius: 4px; font-family: monospace; }
        #preview blockquote { border-left: 4px solid #e5e7eb; padding-left: 1rem; margin-left: 0; color: #6b7280; }
        #preview img { max-width: 100%; border-radius: 8px; }
    </style>
</head>
<body>

<h1>📝 Live Markdown Previewer</h1>

<div class="container">
    <!-- Left: Input -->
    <div class="pane">
        <div class="label">Write Markdown Here</div>
        <textarea id="editor" placeholder="Type something..."></textarea>
    </div>

    <!-- Right: Output -->
    <div class="pane">
        <div class="label">See Result Here</div>
        <div id="preview"></div>
    </div>
</div>

<script>
    const editor = document.getElementById('editor');
    const preview = document.getElementById('preview');

    // The logic
    function convert() {
        const text = editor.value;
        const html = marked.parse(text); // The magic line!
        preview.innerHTML = html;
    }

    // Run on type
    editor.addEventListener('input', convert);

    // Initial Text
    const starterText = `# Welcome to My Editor!
    
This looks like normal text, but it's **Markdown**.

## Features:
1. Easy to write
2. Turns into HTML instantly
3. Great for **bold ideas**

> "Code is poetry." - An anonymous developer

Try typing here!`;

    editor.value = starterText;
    convert(); // Run once at start
</script>

</body>
</html>

Conclusion

You're a formatting wizard! 🧙‍♂️

You've built a tool that takes "lazy user typing" and turns it into beautiful, professional web content.

This is the exact same technology used by Github, Discord, and Reddit for their comment sections. Now you have the power to add it to your own websites!

Try Our Pro Markdown Tool »

Hi there! 👋

Have you ever wondered how websites make text look bold, italic, or turn into links? They usually use a special language called HTML.

But writing HTML is slow and hard. Hello is annoying to type.

Think of it like a translator:

Left Side: You speak "Markdown".
Right Side: The computer shows "Web Page".

Let's build it!

🎯What You Will Learn

✓Create a split-screen layout
✓Capture what you type instantly
✓Use a 'Library' to do the hard translation
✓Display HTML safely
✓Style a professional editor

Step 1: The Editor Desk (HTML Container) 🪑

First, we need a desk to work on. We'll create a main container called editor-container. Inside, we need two separate areas: one for typing (Input) and one for viewing (Preview).

html

<div id="editor-container">
  <h1>📝 Live Markdown Editor</h1>
  
  <div class="split-screen">
    <!-- Area 1: Where we type -->
    <div class="half">
        <h3>Type Here (Markdown)</h3>
        <textarea id="editor" placeholder="Type **bold** or # Header here..."></textarea>
    </div>

    <!-- Area 2: Where we see results -->
    <div class="half">
        <h3>See Result (Preview)</h3>
        <div id="preview"></div>
    </div>
  </div>
</div>

Step 2: The Magic Translator (The Library) 📚

Turning **text** into text is tricky coding. We don't want to write 1000 lines of code to handle every rule.

Instead, we will use a famous library called Marked.js. It's like hiring a professional translator for free.

Copy this line and paste it at the top of your file:

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.0/marked.min.js"></script>

Step 3: Making it Look Like an App (CSS) 🎨

We want a "Split Screen" look, where the editor is on the left and the preview is on the right. We use CSS "Flexbox" to put them side-by-side.

css

<style>
  body { font-family: sans-serif; background: #f3f4f6; padding: 20px; }
  
  #editor-container {
      max-width: 1000px;
      margin: 0 auto;
  }
  
  .split-screen {
      display: flex; /* Puts items side-by-side */
      gap: 20px;
      height: 500px;
  }
  
  .half {
      flex: 1; /* Both sides take equal space */
      display: flex;
      flex-direction: column;
  }
</style>

Step 4: Styling the "Type Here" Box ⌨️

The text area needs to look like a code editor. We'll give it a special font and a nice border.

css

  textarea {
      flex: 1; /* Fill the whole space */
      padding: 15px;
      border: 2px solid #ddd;
      border-radius: 8px;
      font-family: 'Courier New', monospace; /* Looks like code */
      font-size: 16px;
      resize: none; /* Stop user from stretching it */
  }
  
  textarea:focus { border-color: #3b82f6; outline: none; }

Step 5: Styling the "Preview" Box 📄

The preview box should look like a real sheet of paper. We'll give it a white background and a shadow.

css

  #preview {
      flex: 1;
      padding: 20px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      overflow-y: auto; /* Scroll if text is long */
  }

Step 6: Waking up the Translator (JavaScript) 🧠

Now for the logic. We need a function that:

Reads what you typed in the textarea.
Sends it to the marked() library.
Pastes the result into the preview box.

javascript

<script>
function updatePreview() {
    // 1. Get the text
    var rawText = document.getElementById('editor').value;
    
    // 2. Translate it using our Library
    var niceHtml = marked.parse(rawText);
    
    // 3. Show it on the screen
    document.getElementById('preview').innerHTML = niceHtml;
}
</script>

Step 7: Live Updates ⚡

We don't want a "Submit" button. We want it to be instant. We add an "event listener" that runs our updatePreview function every time you lift your finger off a key (keyup).

javascript

// Listen for typing
var editor = document.getElementById('editor');
editor.addEventListener('input', updatePreview);

Step 8: Adding Placeholder Text 👻

When the app first opens, it's blank. That's boring! Let's put some example text in there so users know what to do.

javascript

// Run this when the page loads
window.onload = function() {
    var defaultText = "# Hello World\nThis is **bold** and this is *italic*.\n\n- List item 1\n- List item 2";
    
    // Put text in the box
    document.getElementById('editor').value = defaultText;
    
    // Trigger the preview to show it
    updatePreview();
};

Step 9: Handling "Enter" Key (Optional Polish) ↩️

For this simple guide, our default marked.parse() works great! No extra code needed here, but it's good to know!

Step 10: The Full App Code 📱

You did it! You built a splitscreen Markdown Editor.

Here is the complete code. Save it as markdown-editor.html and open it in Chrome, Safari, or Edge.

html

<!DOCTYPE html>
<html>
<head>
    <title>My Markdown Editor</title>
    <!-- 1. The Translator Library -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    
    <style>
        /* 2. The Styles */
        body { font-family: 'Segoe UI', sans-serif; background: #eef2ff; padding: 2rem; margin: 0; height: 100vh; box-sizing: border-box; }
        
        h1 { text-align: center; color: #4338ca; margin-top: 0; }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            height: calc(100% - 80px); /* Fill screen minus header */
            display: flex;
            gap: 20px;
        }
        
        .pane {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .label {
            font-weight: bold;
            margin-bottom: 10px;
            color: #6b7280;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 1px;
        }
        
        textarea {
            flex: 1;
            padding: 20px;
            border: 2px solid #c7d2fe;
            border-radius: 12px;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 16px;
            resize: none;
            background: #ffffff;
            color: #1f2937;
            line-height: 1.5;
        }
        textarea:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }
        
        #preview {
            flex: 1;
            padding: 20px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
            line-height: 1.6;
        }
        
        /* Make the preview content look nice */
        #preview h1, #preview h2 { border-bottom: 1px solid #eee; padding-bottom: 0.5rem; }
        #preview code { background: #f3f4f6; padding: 2px 5px; border-radius: 4px; font-family: monospace; }
        #preview blockquote { border-left: 4px solid #e5e7eb; padding-left: 1rem; margin-left: 0; color: #6b7280; }
        #preview img { max-width: 100%; border-radius: 8px; }
    </style>
</head>
<body>

<h1>📝 Live Markdown Previewer</h1>

<div class="container">
    <!-- Left: Input -->
    <div class="pane">
        <div class="label">Write Markdown Here</div>
        <textarea id="editor" placeholder="Type something..."></textarea>
    </div>

    <!-- Right: Output -->
    <div class="pane">
        <div class="label">See Result Here</div>
        <div id="preview"></div>
    </div>
</div>

<script>
    const editor = document.getElementById('editor');
    const preview = document.getElementById('preview');

    // The logic
    function convert() {
        const text = editor.value;
        const html = marked.parse(text); // The magic line!
        preview.innerHTML = html;
    }

    // Run on type
    editor.addEventListener('input', convert);

    // Initial Text
    const starterText = `# Welcome to My Editor!
    
This looks like normal text, but it's **Markdown**.

## Features:
1. Easy to write
2. Turns into HTML instantly
3. Great for **bold ideas**

> "Code is poetry." - An anonymous developer

Try typing here!`;

    editor.value = starterText;
    convert(); // Run once at start
</script>

</body>
</html>

Conclusion

You're a formatting wizard! 🧙‍♂️

You've built a tool that takes "lazy user typing" and turns it into beautiful, professional web content.

This is the exact same technology used by Github, Discord, and Reddit for their comment sections. Now you have the power to add it to your own websites!

Try Our Pro Markdown Tool »

Build Your Own Markdown Previewer (10 Easy Steps)

Step 1: The Editor Desk (HTML Container) 🪑

Step 2: The Magic Translator (The Library) 📚

Step 3: Making it Look Like an App (CSS) 🎨

Step 4: Styling the "Type Here" Box ⌨️

Step 5: Styling the "Preview" Box 📄

Step 6: Waking up the Translator (JavaScript) 🧠

Step 7: Live Updates ⚡

Step 8: Adding Placeholder Text 👻

Step 9: Handling "Enter" Key (Optional Polish) ↩️

Step 10: The Full App Code 📱

Conclusion

FastTools Team

Build Your Own Markdown Previewer (10 Easy Steps)

Step 1: The Editor Desk (HTML Container) 🪑

Step 2: The Magic Translator (The Library) 📚

Step 3: Making it Look Like an App (CSS) 🎨

Step 4: Styling the "Type Here" Box ⌨️

Step 5: Styling the "Preview" Box 📄

Step 6: Waking up the Translator (JavaScript) 🧠

Step 7: Live Updates ⚡

Step 8: Adding Placeholder Text 👻

Step 9: Handling "Enter" Key (Optional Polish) ↩️

Step 10: The Full App Code 📱

Conclusion

FastTools Team

Finance

Health

Education

Fun Tools

Image & AI

PDF Only

Social

YouTube

Convert

Developer

Festivals

Step 1: The Editor Desk (HTML Container) 🪑

Step 2: The Magic Translator (The Library) 📚

Step 3: Making it Look Like an App (CSS) 🎨

Step 4: Styling the "Type Here" Box ⌨️

Step 5: Styling the "Preview" Box 📄

Step 6: Waking up the Translator (JavaScript) 🧠

Step 7: Live Updates ⚡

Step 8: Adding Placeholder Text 👻

Step 9: Handling "Enter" Key (Optional Polish) ↩️

Step 10: The Full App Code 📱

Conclusion

FastTools Team

Step 1: The Editor Desk (HTML Container) 🪑

Step 2: The Magic Translator (The Library) 📚

Step 3: Making it Look Like an App (CSS) 🎨

Step 4: Styling the "Type Here" Box ⌨️

Step 5: Styling the "Preview" Box 📄

Step 6: Waking up the Translator (JavaScript) 🧠

Step 7: Live Updates ⚡

Step 8: Adding Placeholder Text 👻

Step 9: Handling "Enter" Key (Optional Polish) ↩️

Step 10: The Full App Code 📱

Conclusion

FastTools Team