TypeScript Tutorial: Building a Simple Web-Based Code Editor

Written by

learnmodernjavascript

in

In the world of web development, the ability to write, edit, and experiment with code directly in a browser is incredibly useful. Whether you’re a seasoned developer or a beginner just starting to learn, a web-based code editor can streamline your workflow, allowing you to test snippets, share code easily, and learn new languages without setting up a complex development environment. This tutorial will guide you through building a simple, yet functional, web-based code editor using TypeScript, providing you with a practical project to learn and solidify your understanding of TypeScript concepts.

Why Build a Web-Based Code Editor?

Web-based code editors offer several advantages:

  • Accessibility: Access your code from anywhere with an internet connection.
  • Collaboration: Easily share code and collaborate with others.
  • Learning: Experiment with code without the need for local installations.
  • Portability: Run code on different devices and operating systems without compatibility issues.

This project will not only teach you how to build a practical tool but also give you hands-on experience with core TypeScript features like types, interfaces, classes, and event handling. You’ll learn how to structure a project, manage user input, and display results dynamically. Let’s get started!

Setting Up the Project

Before diving into the code, let’s set up our project environment. We’ll use the following tools:

  • TypeScript: The language we’ll be using.
  • HTML: For structuring the user interface.
  • CSS: For styling the editor.
  • JavaScript (compiled from TypeScript): To run the code in the browser.

Create a new project directory and navigate into it using your terminal:

mkdir web-code-editor
cd web-code-editor

Initialize a new npm project:

npm init -y

Install TypeScript as a development dependency:

npm install typescript --save-dev

Create a tsconfig.json file in the root directory. This file configures the TypeScript compiler. You can generate a basic one using the TypeScript compiler itself:

npx tsc --init

Modify the tsconfig.json file to include the following settings. We’ll specify the output directory for our compiled JavaScript and enable some helpful compiler options:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}
  • target: "es5": Specifies the JavaScript version to compile to.
  • module: "commonjs": Specifies the module system to use.
  • outDir: "./dist": Specifies the output directory for compiled JavaScript.
  • strict: true: Enables strict type checking.
  • esModuleInterop: true: Enables interoperability between CommonJS and ES modules.
  • skipLibCheck: true: Skips type checking of declaration files.
  • forceConsistentCasingInFileNames: true: Enforces consistent casing in file names.
  • include: ["src/**/*"]: Includes all TypeScript files in the src directory and its subdirectories.

Create a src directory and inside it, create an index.ts file. This is where we’ll write our TypeScript code.

mkdir src
touch src/index.ts

Finally, create an index.html file in the root directory. This will be the main HTML file for our application.

touch index.html

Building the HTML Structure

Let’s start by setting up the basic HTML structure for our code 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>Web Code Editor</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <textarea id="codeEditor"></textarea>
        <div id="output"></div>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

Here’s a breakdown:

  • We have a basic HTML structure with a title and a link to a CSS file (style.css), which we’ll create later.
  • The <textarea> element with the id codeEditor will serve as our code input area.
  • The <div> element with the id output will display the results of our code execution.
  • We include the compiled JavaScript file (dist/index.js) at the end of the <body>.

Create a style.css file in the root directory and add some basic styling to enhance the appearance of the editor:

touch style.css
body {
    font-family: monospace;
    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;
    height: 80vh;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

textarea {
    width: 50%;
    height: 100%;
    padding: 10px;
    border: none;
    resize: none;
    font-family: monospace;
    font-size: 14px;
    background-color: #fff;
    color: #333;
    outline: none;
}

#output {
    width: 50%;
    height: 100%;
    padding: 10px;
    background-color: #eee;
    overflow: auto;
    font-family: monospace;
    font-size: 14px;
    color: #333;
    white-space: pre-wrap;
}

Writing the TypeScript Code

Now, let’s write the TypeScript code that will power our code editor. Open src/index.ts and add the following code:

// Get references to the HTML elements
const codeEditor = document.getElementById('codeEditor') as HTMLTextAreaElement;
const output = document.getElementById('output') as HTMLDivElement;

// Function to run the code
function runCode() {
  if (!codeEditor || !output) {
    console.error('Code editor or output element not found.');
    return;
  }

  try {
    // Clear the output
    output.innerHTML = '';

    // Get the code from the textarea
    const code = codeEditor.value;

    // Create a script element
    const script = document.createElement('script');
    script.type = 'text/javascript';

    // Wrap the code in a try-catch block to handle errors
    const wrappedCode = `
    try {
      ${code}
    } catch (error) {
      console.error('Runtime error:', error);
      output.innerHTML += '<br><span style="color: red;">Runtime error: ' + error + '</span>';
    }
    `;

    // Set the script's content
    script.textContent = wrappedCode;

    // Override console.log to output to the output div
    const originalConsoleLog = console.log;
    console.log = function(...args: any[]) {
      const message = args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : arg).join(' ');
      output.innerHTML += '<br>' + message;
      originalConsoleLog.apply(console, args); // Keep the original console.log behavior
    };

    // Append the script to the document body to execute the code
    document.body.appendChild(script);

    // Remove the script element after execution
    document.body.removeChild(script);

    // Restore the original console.log
    console.log = originalConsoleLog;

  } catch (error) {
    console.error('Error during code execution:', error);
    output.innerHTML = '<span style="color: red;">Error: ' + error + '</span>';
  }
}

// Add an event listener to the textarea to run the code on input
codeEditor?.addEventListener('input', runCode);

Let’s break down the code:

  • Get HTML Elements: We get references to the <textarea> (codeEditor) and the <div> (output) using their IDs. The as HTMLTextAreaElement and as HTMLDivElement are type assertions, telling TypeScript the expected type of the elements.
  • runCode() Function: This function is the core of our code execution logic.
    • Error Handling: Checks if the code editor and output elements exist. If not, it logs an error to the console.
    • Clear Output: Clears the content of the output div before each execution.
    • Get Code: Retrieves the code entered in the codeEditor textarea.
    • Create Script Element: Creates a new <script> element.
    • Wrap Code in Try-Catch: Wraps the user’s code inside a try...catch block to catch any runtime errors. This prevents the entire editor from crashing if the user’s code has an error. It also outputs the error message to the output div, styled in red.
    • Override console.log: We override the native console.log function to redirect its output to the output div. This allows the user to see the results of console.log statements in their code. We also preserve the original behavior of console.log to the browser’s console.
    • Append and Execute Script: Appends the script to the document.body, which triggers its execution.
    • Remove Script: Removes the script element after execution to clean up.
    • Restore console.log: Resets console.log to its original function.
    • Error Handling (Outer try...catch): Catches any errors that occur during the code execution process itself (e.g., if there’s a problem creating the script element).
  • Event Listener: Adds an event listener to the codeEditor textarea. The runCode() function is called whenever the user types something in the textarea ('input' event).

Compiling and Running the Code

Now, let’s compile our TypeScript code and run the application. In your terminal, run the following command to compile the TypeScript code:

tsc

This command will compile the index.ts file and create a index.js file in the dist directory. If you have configured your tsconfig.json file correctly, the output should be in the dist folder.

To run the application, open the index.html file in your web browser. You should see a text area and an output area. Type some JavaScript code into the text area (e.g., console.log('Hello, world!');) and see the output appear in the output area.

Enhancements and Features

Our basic code editor is functional, but we can add several enhancements to make it more user-friendly and powerful. Here are some ideas:

Syntax Highlighting

Syntax highlighting makes code easier to read by coloring different parts of the code based on their syntax. We can use a library like Prism.js or highlight.js to achieve this. Here’s how you could integrate Prism.js:

  1. Include Prism.js: Add the Prism.js CSS and JavaScript files to your index.html file. You can either download the files and link them locally, or include them from a CDN:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVqW9432kCm2wtZpFi3MvE8x2H3yQ+8F4M9V6oJmH3f3M88e/SNzDw3w9N1F7P6/IEt+e2vH/tqw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" integrity="sha512-7UDG4wR9b1y9y95p8d/2XmF816n4k2O0/qfGfM5fP9W1tF2P8y+t0yJzP6v4yI4b/P05uJ0/0+qQ/w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  1. Apply Prism.js: Modify the runCode() function to apply Prism.js after the code is executed. We’ll wrap the output in a <pre> and <code> tag and apply the appropriate language class (e.g., language-javascript):
function runCode() {
  // ... (previous code)

  try {
    // ...
    const wrappedCode = `
    <pre><code class="language-javascript">
      ${code}
    </code></pre>
    `;

    // ...
    output.innerHTML = wrappedCode;
    Prism.highlightAll(); // Apply syntax highlighting
    // ...
  } catch (error) {
    //...
  }
}

Remember to adjust the language class (language-javascript) based on the language the user is writing. You could add a dropdown or other UI element to allow the user to select the language.

Code Completion (Autocompletion)

Code completion suggests code snippets, variable names, and function names as the user types, significantly speeding up development and reducing errors. Libraries like CodeMirror or Monaco Editor (used by VS Code) provide this functionality out of the box. Integrating these libraries is more complex but provides a richer editing experience.

Error Highlighting

Highlighting errors directly in the code editor, rather than just in the output, can help the user quickly identify and fix issues. This can be achieved by parsing the code for syntax errors and displaying error markers (e.g., red underlines) in the textarea. Libraries that provide code completion often include error highlighting features.

Saving and Loading Code

Allow the user to save their code to local storage or a server, and load it later. This is a crucial feature for any code editor. You could use localStorage for simple saving and loading. For more advanced features, you’ll need to implement server-side functionality.

Themes

Allow users to choose different color themes for the editor to personalize their experience. This can be implemented by providing CSS classes that change the colors of the editor elements.

Keyboard Shortcuts

Implement keyboard shortcuts for common actions like saving, loading, and running code. This enhances the user experience by providing quicker access to important features.

Common Mistakes and How to Fix Them

Here are some common mistakes developers make when building web-based code editors and how to avoid them:

  • Not Handling Errors Properly: Failing to catch and display errors can lead to a frustrating user experience. Always use try...catch blocks and provide informative error messages.
  • Security Vulnerabilities: Be extremely cautious about executing arbitrary code from the user. If you’re allowing the user to run code in the browser, be aware of potential security risks like Cross-Site Scripting (XSS). Sanitize user input and avoid directly injecting user-provided code into the DOM without proper escaping.
  • Ignoring Performance: As the code editor grows in complexity, performance can become an issue. Optimize your code to avoid unnecessary re-renders and slow operations. For example, if you’re implementing syntax highlighting, consider using a library optimized for performance or only highlighting the visible part of the code.
  • Poor User Experience: A clunky or unintuitive interface can make the editor difficult to use. Focus on providing a smooth and responsive user experience. Consider features like auto-indentation, code folding, and a clear and uncluttered UI.
  • Ignoring Accessibility: Make sure your code editor is accessible to users with disabilities. Use semantic HTML, provide alt text for images, and ensure that the editor is navigable using a keyboard.

Key Takeaways

In this tutorial, we’ve built a basic web-based code editor using TypeScript. We’ve covered the fundamental concepts of setting up a project, handling user input, executing code, and displaying output. We’ve also discussed how to enhance the editor with features like syntax highlighting and error handling. This project provides a solid foundation for building more complex and feature-rich code editors.

FAQ

  1. Can I use this code editor for production?

    The code editor presented in this tutorial is a basic implementation and is primarily for educational purposes. It’s not designed for production use due to potential security vulnerabilities and lack of advanced features. If you need a production-ready code editor, consider using a well-established library like CodeMirror or Monaco Editor.

  2. How can I add syntax highlighting?

    You can integrate a syntax highlighting library like Prism.js or highlight.js. Include the library’s CSS and JavaScript files, and then use the library’s functions to highlight the code in the output area. Remember to wrap the output in <pre> and <code> tags and specify the correct language class.

  3. How do I handle errors in the user’s code?

    Wrap the user’s code inside a try...catch block. Catch any exceptions and display the error message in the output area. You can also implement more sophisticated error handling, such as highlighting the line of code where the error occurred.

  4. How can I save and load code?

    You can use localStorage to save the code in the user’s browser. Use the localStorage.setItem() method to save the code and the localStorage.getItem() method to load it. For more advanced saving and loading, you’ll need to implement server-side functionality.

  5. What are the security considerations?

    Be extremely cautious about executing user-provided code. Sanitize user input to prevent Cross-Site Scripting (XSS) attacks. Avoid directly injecting user-provided code into the DOM. Consider using a sandboxed environment to execute the code if you need to run untrusted code.

This tutorial provides a starting point for creating your own web-based code editor. By following the steps and exploring the enhancements, you can create a powerful tool for writing and experimenting with code. Remember to prioritize security, user experience, and performance as you build your editor. The journey of building a web-based code editor is a great way to improve your TypeScript skills and learn about web development fundamentals. With each feature you add and each challenge you overcome, you’ll grow as a developer and gain a deeper understanding of how web applications work. This project serves as a fantastic illustration of the power of TypeScript and how it can be utilized to create interactive and useful web applications.

More posts