TypeScript Tutorial: Building a Simple Web Application for a Markdown Editor with Live Preview

Written by

learnmodernjavascript

in

In the ever-evolving landscape of web development, the ability to create rich, formatted text is crucial. Markdown, a lightweight markup language, has become a favorite for its simplicity and readability. Imagine building a tool where you can write in Markdown and instantly see the formatted output. This tutorial will guide you through building a simple web application using TypeScript that does just that: a Markdown editor with a live preview.

Why Build a Markdown Editor?

Markdown editors are incredibly useful for a variety of tasks, from writing blog posts and documentation to taking notes and creating README files. They allow you to focus on the content without getting bogged down in complex formatting. By building your own, you’ll gain practical experience with TypeScript, web development fundamentals, and the process of parsing and rendering Markdown.

Prerequisites

Before diving in, you’ll need the following:

  • A basic understanding of HTML, CSS, and JavaScript.
  • Node.js and npm (or yarn) installed on your system.
  • A code editor (like Visual Studio Code) with TypeScript support.

Setting Up Your Project

Let’s get started by creating a new project. Open your terminal and run the following commands:

mkdir markdown-editor
cd markdown-editor
npm init -y
npm install typescript --save-dev
npm install marked --save

These commands do the following:

  • Creates a new directory for your project.
  • Navigates into the project directory.
  • Initializes a new Node.js project.
  • Installs TypeScript and the marked library (for Markdown parsing) as development dependencies.

Next, let’s create a tsconfig.json file to configure TypeScript. In your project directory, run:

npx tsc --init --rootDir src --outDir dist --esModuleInterop --module commonjs --target es5

This command generates a tsconfig.json file with some default settings. We’ve added --rootDir src to tell the compiler where our source files are, and --outDir dist to specify where the compiled JavaScript files will be placed.

Project Structure

Your project structure should look like this:


markdown-editor/
├── node_modules/
├── src/
│   └── index.ts
├── dist/
├── package.json
├── package-lock.json
├── tsconfig.json
└── index.html

Creating the HTML Structure

Create an index.html file in your project directory. This file will hold the basic structure of our Markdown editor:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown Editor</title>
    <style>
        body {
            font-family: sans-serif;
            margin: 20px;
        }
        .container {
            display: flex;
        }
        .editor, .preview {
            width: 50%;
            padding: 10px;
            box-sizing: border-box;
        }
        textarea {
            width: 100%;
            height: 400px;
            resize: vertical;
        }
        .preview {
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="editor">
            <textarea id="editor" placeholder="Write your Markdown here..."></textarea>
        </div>
        <div class="preview" id="preview"></div>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

This HTML sets up a basic layout with a text area for the Markdown input and a div to display the rendered preview. The CSS provides basic styling to position the editor and preview side by side.

Writing the TypeScript Code

Now, let’s write the TypeScript code that will handle the Markdown parsing and live preview. Create an index.ts file inside the src directory:

import { marked } from 'marked';

// Get references to the editor and preview elements
const editor = document.getElementById('editor') as HTMLTextAreaElement;
const preview = document.getElementById('preview') as HTMLDivElement;

// Function to update the preview
function updatePreview() {
  if (editor && preview) {
    const markdownText = editor.value;
    // Use marked to parse the Markdown into HTML
    const html = marked.parse(markdownText);
    // Set the HTML of the preview element
    preview.innerHTML = html;
  }
}

// Add an event listener to the editor to update the preview on input
if (editor) {
  editor.addEventListener('input', updatePreview);
}

// Initial render in case there's text in the editor on load
updatePreview();

Let’s break down this code:

  • We import the marked function from the marked library.
  • We get references to the textarea (editor) and the div (preview) elements from the HTML using their IDs. The `as` keyword performs type assertions, ensuring we are treating these elements correctly.
  • The updatePreview function retrieves the text from the editor, uses marked.parse() to convert it to HTML, and then sets the HTML content of the preview element.
  • An event listener is added to the editor. Whenever the user types something (the input event), the updatePreview function is called.
  • Finally, we call updatePreview() once when the page loads to render any initial content.

Compiling and Running the Application

To compile your TypeScript code, run the following command in your terminal:

npx tsc

This command will compile your index.ts file and create a index.js file in the dist directory. Now, open index.html in your web browser. You should see the Markdown editor with the live preview.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Typo in element IDs: Make sure the IDs in your HTML (e.g., “editor”, “preview”) match the IDs you’re referencing in your TypeScript code.
  • Incorrect file paths: Double-check that the path to your JavaScript file in the <script> tag in index.html is correct (dist/index.js).
  • Missing dependencies: Ensure you’ve installed both TypeScript and the marked library using npm.
  • Compilation errors: If you encounter compilation errors, carefully read the error messages in your terminal. They often point to the line of code causing the problem. Check for syntax errors, missing semicolons, or incorrect types.
  • Markdown not rendering: If the Markdown isn’t rendering, check that the marked.parse() function is being called correctly and that the HTML is being set to the preview element. Use your browser’s developer console to inspect for any Javascript errors.

Enhancements and Next Steps

This is a basic Markdown editor, but you can add many features to make it more useful:

  • Syntax Highlighting: Integrate a library like Prism.js or highlight.js to provide syntax highlighting in the editor.
  • Toolbar: Add a toolbar with buttons for common Markdown formatting (bold, italic, headings, etc.).
  • Autosave: Implement autosaving to prevent data loss.
  • Custom Styles: Customize the CSS to change the appearance of the editor and preview.
  • Image Upload: Add the ability to upload images and insert them into your Markdown.
  • Error Handling: Implement error handling to gracefully manage issues like invalid Markdown syntax.

FAQ

Here are some frequently asked questions:

  1. Why use Markdown? Markdown is a simple and versatile markup language that’s easy to read and write. It’s great for writing documentation, blog posts, and more.
  2. What is the marked library? The marked library is a JavaScript library that converts Markdown text into HTML.
  3. How do I add custom CSS to the preview? You can add CSS rules to your index.html file to style the content within the preview div. You can also use CSS to style the editor textarea.
  4. Can I use this editor in a production environment? This is a basic example. For a production environment, you’d likely want to incorporate more robust error handling, security measures, and potentially a more feature-rich editor.

Building a Markdown editor provides a hands-on learning experience, solidifying your understanding of TypeScript, event handling, and DOM manipulation. You can adapt and expand this foundation to suit diverse applications, from simple note-taking tools to complex content management systems. Experiment with the enhancements suggested to truly master the process.

More posts