TypeScript Tutorial: Building a Simple Web-Based Code Editor with Code Execution and Debugging Features

Written by

learnmodernjavascript

in

In the world of web development, the ability to write, run, and debug code directly within a browser is incredibly valuable. Imagine being able to experiment with different programming concepts, test snippets of code, or even teach programming without the need for complex setup or installations. This tutorial will guide you through building a simple, yet functional, web-based code editor using TypeScript, complete with code execution and basic debugging capabilities. We’ll focus on creating an environment where users can write JavaScript code, see the output, and troubleshoot potential issues, making it a powerful learning tool and a convenient utility for developers.

Why Build a Web-Based Code Editor?

Web-based code editors offer several advantages:

  • Accessibility: Accessible from any device with a web browser, eliminating the need for local installations.
  • Collaboration: Facilitates easy sharing and collaboration on code snippets.
  • Learning: Provides an interactive environment for learning and experimenting with code.
  • Prototyping: Enables rapid prototyping and testing of code ideas.

Project Setup

Before we dive into the code, let’s set up our project. We’ll need:

  • Node.js and npm (Node Package Manager) installed.
  • A code editor (like VS Code, Sublime Text, or Atom).

Create a new project directory and initialize it with npm:

mkdir web-code-editor
cd web-code-editor
npm init -y

Next, install TypeScript and a few other necessary packages:

npm install typescript --save-dev
npm install esbuild --save-dev

We’re using esbuild for fast bundling of our TypeScript code. Now, create a tsconfig.json file to configure TypeScript:

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "moduleResolution": "node",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

Creating the HTML Structure

Let’s start by creating the basic HTML structure. Create an index.html file in your project root:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Code Editor</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="editor-container">
      <textarea id="code-editor">// Write your code here</textarea>
    </div>
    <div class="output-container">
      <button id="run-button">Run</button>
      <button id="debug-button">Debug</button>
      <div id="output"></div>
    </div>
  </div>
  <script src="dist/index.js"></script>
</body>
</html>

This HTML provides the basic layout: a text area for the code editor, a button to run the code, a button for debugging, and a div to display the output. Also, we link to a CSS file and include the compiled JavaScript.

Styling with CSS

Create a style.css file in your project root to add some basic styling:

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

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

.editor-container {
  width: 50%;
  background-color: #fff;
  padding: 20px;
}

#code-editor {
  width: 100%;
  height: 400px;
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.output-container {
  width: 50%;
  background-color: #eee;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

#output {
  margin-top: 20px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow-y: scroll;
  flex-grow: 1;
}

#run-button, #debug-button {
  padding: 10px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

#run-button:hover, #debug-button:hover {
  background-color: #3e8e41;
}

This CSS provides a basic layout and styling for the editor, output area, and buttons. Adjust the styles to your liking.

Writing the TypeScript Code

Now, let’s write the TypeScript code. Create a src/index.ts file:

const codeEditor = document.getElementById('code-editor') as HTMLTextAreaElement;
const runButton = document.getElementById('run-button') as HTMLButtonElement;
const debugButton = document.getElementById('debug-button') as HTMLButtonElement;
const outputDiv = document.getElementById('output') as HTMLDivElement;

runButton.addEventListener('click', () => {
  const code = codeEditor.value;
  try {
    // Clear previous output
    outputDiv.textContent = '';
    // Evaluate the code and capture the output
    const result = eval(code);
    if (result !== undefined) {
      outputDiv.textContent = String(result);
    }
  } catch (error: any) {
    outputDiv.textContent = `Error: ${error.message}`;
  }
});

debugButton.addEventListener('click', () => {
    const code = codeEditor.value;
    // Implement debugging functionality here, such as using a debugger library.
    outputDiv.textContent = 'Debugging not yet implemented.';
});

This TypeScript code does the following:

  • Selects the necessary HTML elements.
  • Adds an event listener to the

More posts