TypeScript Tutorial: Building a Simple Web Application for a Markdown Editor

Written by

learnmodernjavascript

in

Markdown is a lightweight markup language with plain text formatting syntax. It’s widely used for writing documentation, creating blog posts, and formatting text in various applications. If you’ve ever written on platforms like GitHub, Reddit, or Stack Overflow, you’ve likely used Markdown. In this tutorial, we’ll dive into building a simple web application that allows users to write and preview Markdown content in real-time using TypeScript. This project provides a practical way to learn TypeScript fundamentals, including DOM manipulation, event handling, and working with external libraries. By the end, you’ll have a functional Markdown editor and a solid understanding of how to apply TypeScript to front-end development.

Why Build a Markdown Editor?

Creating a Markdown editor is a fantastic project for several reasons:

  • Practical Application: It teaches you how to handle user input, dynamically update the user interface (UI), and interact with the Document Object Model (DOM).
  • Real-World Relevance: Markdown is everywhere. Understanding how to process and render it is a valuable skill.
  • Foundation for More Complex Projects: It sets the stage for building more advanced applications, such as content management systems (CMS) or note-taking apps.
  • Learning TypeScript: It provides a hands-on experience of TypeScript’s type safety, code organization, and modern JavaScript features.

Prerequisites

Before we begin, ensure you have the following installed:

  • Node.js and npm (or yarn): You’ll use these to manage project dependencies. Download and install them from https://nodejs.org/.
  • A Code Editor: Visual Studio Code (VS Code) is highly recommended due to its excellent TypeScript support. You can download it from https://code.visualstudio.com/.
  • Basic HTML, CSS, and JavaScript Knowledge: While this tutorial focuses on TypeScript, some familiarity with these technologies will be helpful.

Setting Up the Project

Let’s start by setting up our project directory and installing the necessary dependencies.

  1. Create a Project Directory: Open your terminal or command prompt and create a new directory for your project: 
    mkdir markdown-editor
cd markdown-editor
  2. Initialize npm: Initialize a new npm project: 
    npm init -y

    This command creates a package.json file, which will manage our project’s dependencies.

  3. Install TypeScript: Install TypeScript globally or locally. For this tutorial, we’ll install it locally as a development dependency: 
    npm install --save-dev typescript
  4. Initialize a TypeScript Configuration File: Create a tsconfig.json file to configure TypeScript. Run the following command: 
    npx tsc --init

    This command generates a tsconfig.json file with default settings. You can customize these settings to suit your project’s needs. We will modify some settings later.

  5. Create Project Files: Create the following files in your project directory:
    • index.html: The HTML file for our application.
    • src/index.ts: The main TypeScript file for our application logic.
    • style.css: The CSS file for styling.

Configuring TypeScript

Open the tsconfig.json file and configure it to match our project requirements. Here’s a recommended configuration:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

Let’s break down these options:

  • target: "ES5": Specifies the JavaScript version to compile to. ES5 is widely supported by browsers.
  • module: "commonjs": Specifies the module system to use. CommonJS is suitable for Node.js environments.
  • outDir: "./dist": Specifies the output directory for compiled JavaScript files.
  • rootDir: "./src": Specifies the root directory of your TypeScript files.
  • strict: true: Enables strict type-checking options.
  • esModuleInterop: true: Enables interoperability between CommonJS and ES modules.
  • skipLibCheck: true: Skips type checking of declaration files (.d.ts files).
  • forceConsistentCasingInFileNames: true: Enforces consistent casing in file names.
  • include: ["src/**/*"]: Specifies the files and directories to include in the compilation.

Writing the HTML

Open index.html and add the following HTML structure:

<!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>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="input-container">
      <textarea id="editor" placeholder="Write Markdown here..."></textarea>
    </div>
    <div class="preview-container">
      <div id="preview"></div>
    </div>
  </div>
  <script src="dist/index.js"></script>
</body>
</html>

This HTML provides the basic layout:

  • A textarea with the ID “editor” for the user to input Markdown.
  • A div with the ID “preview” to display the rendered Markdown.
  • A simple container to hold the editor and preview areas.
  • Links to the CSS file for styling and the compiled JavaScript file.

Styling with CSS

Open style.css and add some basic styles to improve the appearance:


body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  display: flex;
  width: 80%;
  max-width: 1000px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.input-container, .preview-container {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
}

.input-container {
  background-color: #fff;
}

.preview-container {
  background-color: #eee;
  border-left: 1px solid #ccc;
  overflow: auto;
}

textarea {
  width: 100%;
  height: 80vh;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: monospace;
  font-size: 14px;
  resize: none;
}

#preview {
  padding: 10px;
  font-size: 16px;
  line-height: 1.6;
}

/* Markdown Styling (Optional - add more as needed) */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5em;
}

p {
  margin-bottom: 1em;
}

code {
  background-color: #ddd;
  padding: 2px 4px;
  border-radius: 4px;
}

pre {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}

This CSS provides a basic layout and some styling for the text area and the preview area. It also includes some basic styles for common Markdown elements like headings, paragraphs, and code blocks. You can customize these styles to match your preferences.

Writing the TypeScript Code

Now, let’s write the TypeScript code that will handle the Markdown conversion and update the preview.

Open src/index.ts and add the following code:


// Import the Markdown-it library
import MarkdownIt from 'markdown-it';

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

// Initialize Markdown-it
const md = new MarkdownIt();

// Function to render Markdown
function renderMarkdown() {
  if (editor && preview) {
    const markdownText = editor.value;
    const html = md.render(markdownText);
    preview.innerHTML = html;
  }
}

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

// Initial render (in case there's any default text in the editor)
renderMarkdown();

Let’s break down this code:

  • Import Markdown-it: We import the Markdown-it library, which will handle the Markdown to HTML conversion. You will need to install this dependency using npm: npm install markdown-it.
  • Get DOM Elements: We retrieve references to the HTML elements: the textarea for the editor and the div for the preview. We use type assertions (as HTMLTextAreaElement and as HTMLDivElement) to tell TypeScript the expected types of these elements.
  • Initialize Markdown-it: We create a new instance of the Markdown-it parser.
  • Render Markdown Function: The renderMarkdown function takes the text from the editor, converts it to HTML using md.render(), and updates the innerHTML of the preview element.
  • Event Listener: We add an event listener to the editor textarea. The ‘input’ event triggers the renderMarkdown function whenever the user types or modifies the text in the editor.
  • Initial Render: We call renderMarkdown() once to render any default content that might be present in the editor when the page loads.

Compiling and Running the Application

Now, let’s compile our TypeScript code and run the application.

  1. Compile TypeScript: Open your terminal and run the following command in your project directory: 
    tsc

    This command compiles your TypeScript code to JavaScript and places the output in the dist directory.

  2. Open in Browser: Open index.html in your web browser. You can do this by double-clicking the file or by using a local web server (e.g., using the Live Server extension in VS Code).
  3. Test: Start typing Markdown in the left-hand text area, and you should see the rendered HTML in the right-hand preview area.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them:

  • Incorrect File Paths: Ensure that the file paths in your index.html (for CSS and JavaScript) are correct. Double-check the paths to style.css and dist/index.js.
  • Typo Errors: TypeScript helps catch many errors, but typos in HTML element IDs or variable names can still cause problems. Use your browser’s developer tools (usually accessed by right-clicking and selecting “Inspect” or “Inspect Element”) to check for errors in the console.
  • Missing Dependencies: Make sure you’ve installed all the necessary dependencies using npm (e.g., markdown-it). If you get an error that a module cannot be found, run npm install in your project directory to install all dependencies listed in your package.json.
  • Incorrect TypeScript Configuration: Double-check your tsconfig.json file to ensure it’s configured correctly. Incorrect settings can lead to compilation errors. Pay close attention to the outDir, rootDir, and include settings.
  • Browser Caching: Sometimes, your browser might cache the old JavaScript or CSS files. If you’ve made changes, try clearing your browser’s cache or hard-refreshing the page (usually Ctrl+Shift+R or Cmd+Shift+R) to ensure that you are seeing the latest version of the code.
  • DOM Element Selection Issues: If the JavaScript code cannot find the HTML elements by their IDs (e.g., “editor”, “preview”), the script will likely fail. Ensure that the IDs in your HTML match those used in the TypeScript code, and that the elements are present when the script runs (i.e., the script tag is placed after the HTML elements in the body).

Enhancements and Next Steps

Here are some ideas to enhance your Markdown editor:

  • Add Markdown Syntax Highlighting: Use a library like highlight.js or Prism.js to highlight the Markdown syntax in the editor. This improves readability.
  • Implement Live Preview in Editor: Use a library like CodeMirror to create a rich text editor that previews the Markdown as you type.
  • Add Toolbar: Include a toolbar with buttons for common Markdown formatting, such as bold, italics, headings, links, and images.
  • Implement Image Upload: Allow users to upload images and embed them in their Markdown.
  • Add Saving and Loading: Implement functionality to save the Markdown content to local storage or a server and load it later.
  • Add Exporting: Allow users to export the rendered HTML or the Markdown to a file.
  • Implement Themes: Allow users to select different themes for the editor and preview areas.

Key Takeaways

In this tutorial, you’ve learned how to:

  • Set up a TypeScript project for a web application.
  • Use Markdown-it to convert Markdown to HTML.
  • Handle user input using event listeners.
  • Dynamically update the DOM.
  • Structure and organize your code using TypeScript.

This project provides a solid foundation for understanding how to use TypeScript in front-end development and building interactive web applications. Remember to experiment and explore the many features of Markdown and TypeScript to enhance your project.

FAQ

  1. How do I install Markdown-it?

    You install Markdown-it using npm. In your project directory, run: npm install markdown-it

  2. Why is the preview not updating?

    Check the following:

    • Make sure the Markdown-it library is installed.
    • Ensure that the event listener is correctly attached to the editor textarea.
    • Check your browser’s console for any JavaScript errors.
  3. How do I add syntax highlighting to the editor?

    You can use a library like highlight.js or Prism.js. Include the library in your HTML and apply its styling to the editor’s text area. Then, use the library’s functions to highlight the code based on the Markdown syntax.

  4. Can I use this editor with other frameworks (React, Vue, Angular)?

    Yes, the core logic of converting Markdown to HTML using Markdown-it can be easily adapted for use with frameworks like React, Vue, or Angular. You would typically integrate the Markdown-it logic within the component’s lifecycle methods and use the framework’s data binding capabilities to update the preview.

  5. How can I deploy this application?

    You can deploy this application by:

    • Using a static site hosting service like Netlify, Vercel, or GitHub Pages.
    • Uploading the HTML, CSS, and compiled JavaScript files to a web server.

You’ve now created a basic, yet functional Markdown editor using TypeScript. The skills and concepts covered in this tutorial can be applied to a wide range of web development projects. Consider this a starting point for exploring more complex features and expanding your understanding of TypeScript and front-end development. The ability to process and display Markdown content is a valuable asset in many web applications, and with this knowledge, you are well on your way to building more sophisticated tools and interfaces. Continue experimenting, and don’t be afraid to try out new features and libraries to further enhance your project and your skillset. The world of web development is constantly evolving, and by continuing to learn and adapt, you’ll be well-prepared to meet any challenge that comes your way.

More posts