TypeScript Tutorial: Building a Simple Interactive Web-Based Markdown Editor

Written by

learnmodernjavascript

in

Markdown has become a ubiquitous format for writing on the web. From simple notes to complex documentation, its readability and ease of use make it a favorite for both writers and developers. But what if you could create your own interactive Markdown editor, right in your browser? This tutorial will guide you through building a simple, yet functional, Markdown editor using TypeScript, HTML, and CSS. We’ll cover everything from the basics of Markdown to handling user input and rendering the formatted output.

Why Build a Markdown Editor?

Creating your own Markdown editor is a fantastic way to learn about several important concepts:

  • Front-end Development: You’ll gain hands-on experience with HTML, CSS, and JavaScript (TypeScript in this case), the core technologies of web development.
  • Text Processing: You’ll learn how to parse and transform text, a skill applicable to many areas of software development.
  • User Interface (UI) Design: You’ll get to think about how users interact with your application and how to design a user-friendly interface.
  • TypeScript Fundamentals: You’ll practice writing clean, type-safe code, improving your overall coding skills.

Furthermore, building a Markdown editor can be a fun and rewarding project. You’ll have a tangible application you can use and expand upon, allowing you to learn and grow your skills continuously.

Prerequisites

Before we dive in, make sure you have the following:

  • Basic HTML, CSS, and JavaScript knowledge: Familiarity with these languages will be helpful.
  • Node.js and npm (or yarn) installed: These are needed for managing project dependencies and running the development server.
  • A code editor: Visual Studio Code (VS Code) is recommended, but you can use any editor you prefer.
  • TypeScript installed globally (optional): You can install it using npm install -g typescript or yarn global add typescript. However, you can also use a local installation.

Setting Up the Project

Let’s start by setting up our project directory and installing the necessary packages. Open your terminal or command prompt and follow these steps:

  1. Create a project directory: 
    mkdir markdown-editor
cd markdown-editor
  2. Initialize a Node.js project: 
    npm init -y

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

  3. Install TypeScript and a bundler (e.g., Parcel): 
    npm install typescript parcel --save-dev

    Parcel is a zero-configuration bundler that simplifies the build process. We’ll use it to bundle our TypeScript code, HTML, and CSS into a deployable package.

  4. Create a TypeScript configuration file: 
    npx tsc --init

    This generates a tsconfig.json file, which allows us to configure TypeScript compilation options. We’ll customize this file later.

  5. Create project files: Create the following files in your project directory:
    • index.html
    • src/index.ts
    • src/style.css

HTML Structure (index.html)

Let’s set up the basic HTML structure for our Markdown editor. Open index.html and add the following code:

<!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="src/style.css">
</head>
<body>
  <div class="container">
    <div class="input-section">
      <textarea id="editor" placeholder="Write Markdown here..."></textarea>
    </div>
    <div class="output-section">
      <div id="preview"></div>
    </div>
  </div>
  <script src="src/index.ts"></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 HTML output.
  • A link to our stylesheet (src/style.css).
  • A script tag that links to our TypeScript file (src/index.ts).

CSS Styling (src/style.css)

Let’s add some basic styling to make our editor look presentable. Open src/style.css and add the following CSS:

.container {
  display: flex;
  height: 100vh;
  font-family: sans-serif;
}

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

.output-section {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #f4f4f4;
  overflow-y: scroll; /* Enable scrolling for long content */
}

textarea {
  width: 100%;
  height: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  resize: none; /* Prevent resizing */
}

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

/* Basic Markdown Styling */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5em;
  margin-top: 1em;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.2em;
}

p {
  margin-bottom: 1em;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

ul, ol {
  margin-bottom: 1em;
  padding-left: 20px;
}

li {
  margin-bottom: 0.25em;
}

code {
  font-family: monospace;
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 3px;
}

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

This CSS styles the basic layout and provides some basic Markdown styling for headings, paragraphs, lists, and code blocks. Feel free to customize this to your liking.

TypeScript Logic (src/index.ts)

Now, let’s write the TypeScript code that will handle the Markdown parsing and rendering. Open src/index.ts and add the following code:

import { marked } from 'marked'; // Import the marked library

// 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 markdown = editor.value;
    const html = marked.parse(markdown);
    preview.innerHTML = html;
  }
}

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

// Initialize the preview with any existing content
updatePreview();

Let’s break down this code:

  1. Import Marked: We import the marked library, which we’ll use to parse the Markdown. Make sure to install it: npm install marked
  2. Get Element References: We get references to the textarea (editor) and the div (preview) elements using their IDs. We use type assertions (as HTMLTextAreaElement and as HTMLDivElement) to tell TypeScript what type of HTML element they are. This helps with type checking and code completion.
  3. updatePreview Function: This function does the core work:
    • It gets the Markdown text from the editor.
    • It uses marked.parse() to convert the Markdown to HTML.
    • It sets the innerHTML of the preview element to the generated HTML.
  4. Event Listener: We add an event listener to the editor. Whenever the user types something (the input event), the updatePreview function is called.
  5. Initial Preview: We call updatePreview() once when the page loads to display any existing content in the editor.

Configuring TypeScript (tsconfig.json)

The tsconfig.json file controls how TypeScript compiles your code. Here’s a recommended configuration:

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "sourceMap": true, // Generate source maps for easier debugging
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

Key configurations:

  • target: Specifies the JavaScript version to compile to (ES2015 is a good choice for modern browsers).
  • module: Specifies the module system (ESNext is a good choice for modern JavaScript).
  • moduleResolution: How modules are resolved (node is common).
  • esModuleInterop: Allows interoperability between CommonJS and ES modules.
  • strict: Enables strict type checking. This is highly recommended for writing robust code.
  • outDir: Specifies the output directory for compiled JavaScript files.
  • sourceMap: Generates source maps, which allow you to debug your TypeScript code in the browser.

Building and Running the Application

Now, let’s build and run our application:

  1. Build the project: In your terminal, run: 
    npx parcel index.html

    Parcel will bundle your HTML, TypeScript, CSS, and any other assets into a production-ready package. It will also automatically create a development server, making it easy to see your changes as you code.

  2. Open the application: Parcel will tell you the URL where your application is running (usually something like http://localhost:1234). Open this URL in your web browser.
  3. Start typing Markdown: Type Markdown in the left-hand editor, and you’ll see the rendered HTML in the right-hand preview section.

Common Mistakes and How to Fix Them

Here are some common mistakes you might encounter and how to fix them:

  • Error: “marked is not defined”
    • Cause: You haven’t installed the marked library or you haven’t imported it correctly.
    • Solution: Make sure you run npm install marked and that your import statement in src/index.ts is correct: import { marked } from 'marked';
  • Error: The preview isn’t updating.
    • Cause: The event listener isn’t working, or the updatePreview function isn’t being called.
    • Solution: Double-check that you’ve added the event listener correctly: editor.addEventListener('input', updatePreview);. Make sure the updatePreview function is defined correctly. Check the console for any JavaScript errors.
  • Problem: The styling is not applied.
    • Cause: The CSS file is not linked correctly, or there are CSS syntax errors.
    • Solution: Ensure that the link tag in your index.html is correct: <link rel="stylesheet" href="src/style.css">. Inspect your browser’s developer tools (usually accessed by right-clicking and selecting “Inspect”) to check for CSS errors or to see if the stylesheet is loaded.
  • Problem: Type errors in TypeScript.
    • Cause: You have type errors in your TypeScript code.
    • Solution: Carefully review the error messages in your terminal or code editor. TypeScript provides helpful error messages that indicate the source of the problem. Make sure your types are consistent (e.g., using the correct type assertions).

Enhancements and Next Steps

This is a basic Markdown editor, but you can enhance it in several ways:

  • Add Markdown features: Implement support for more Markdown syntax, such as tables, footnotes, and definition lists. The marked library supports many Markdown features out of the box.
  • Add a toolbar: Create a toolbar with buttons to apply formatting, such as bold, italics, and headings.
  • Implement live preview: Instead of updating the preview on every input, you could debounce the input to improve performance.
  • Add syntax highlighting: Use a library like Prism.js or highlight.js to add syntax highlighting to code blocks.
  • Implement saving and loading: Add functionality to save the Markdown content to local storage or a server.
  • Implement image uploading: Allow users to upload images and embed them in their Markdown.
  • Add a dark mode toggle: Allow users to switch between light and dark themes.

Summary / Key Takeaways

In this tutorial, you’ve built a simple Markdown editor using TypeScript, HTML, and CSS. You’ve learned how to set up a TypeScript project, handle user input, parse Markdown using the marked library, and display the formatted output. You’ve also learned about basic HTML and CSS styling. This project provides a solid foundation for building more complex web applications. Remember to experiment with the code, try out different Markdown syntax, and explore the enhancements mentioned above. By building this Markdown editor, you have taken a significant step in learning front-end web development with TypeScript.

FAQ

Q: What is Markdown?
A: Markdown is a lightweight markup language with plain text formatting syntax. It’s designed to be easy to read and write, and it can be converted to HTML. Common Markdown elements include headings, paragraphs, bold text, italic text, lists, and links.

Q: Why use TypeScript for this project?
A: TypeScript adds static typing to JavaScript, making your code more robust and easier to maintain. It helps you catch errors early in the development process and improves code readability. It also provides features like auto-completion and refactoring, which can significantly improve your productivity.

Q: What is Parcel?
A: Parcel is a zero-configuration web application bundler. It simplifies the build process by automatically handling tasks such as bundling JavaScript, CSS, and HTML files. It also provides features like hot module replacement (HMR), which allows you to see changes in your browser instantly without refreshing the page. Parcel is a great choice for this project because it requires minimal setup and is easy to use.

Q: Where can I learn more about Markdown?
A: You can find comprehensive documentation and tutorials on the Markdown syntax at various online resources, such as the official Markdown website (although there isn’t one definitive “official” website, many good tutorials exist). You can also find many Markdown tutorials and guides on websites like GitHub, GitLab, and Stack Overflow.

Q: What are the benefits of using a library like marked?
A: Using a library like marked simplifies the process of parsing Markdown. It handles the complex logic of converting Markdown syntax into HTML, saving you time and effort. It also ensures that your Markdown is parsed correctly and consistently, regardless of the complexity of the content.

This project demonstrates the power of TypeScript and front-end technologies for building interactive web applications. You now have a functional Markdown editor that you can use and expand upon. Keep exploring, keep coding, and your skills will continue to grow.

More posts