TypeScript: Building a Simple Web-Based Code Editor

Written by

learnmodernjavascript

in

In the world of web development, the ability to write and test code directly in the browser is invaluable. Whether you’re a beginner learning the ropes, a seasoned developer experimenting with new ideas, or an educator teaching programming concepts, a web-based code editor can significantly enhance your workflow. This tutorial will guide you through building a simple, yet functional, code editor using TypeScript, providing you with a solid foundation for understanding the core concepts and techniques involved.

Why Build a Web-Based Code Editor?

Web-based code editors offer several advantages over traditional desktop IDEs. They are accessible from any device with a web browser, eliminating the need for local installations and configurations. This accessibility is particularly useful for collaborative projects, quick prototyping, and educational purposes. Moreover, web-based editors often integrate seamlessly with online resources, allowing for easy sharing, testing, and deployment of code. Building one from scratch is also an excellent learning exercise, helping you understand the intricacies of web technologies, text manipulation, and user interface design.

Setting Up Your Project

Before we dive into the code, let’s set up our project environment. We’ll use a basic HTML structure, TypeScript for the core logic, and a few essential libraries to streamline development. First, create a new directory for your project and navigate into it using your terminal.

1. **Initialize the project:**

npm init -y

2. **Install TypeScript and related dependencies:**

npm install typescript --save-dev
npm install @types/prismjs --save-dev
npm install prismjs --save

* `typescript`: The TypeScript compiler.
* `@types/prismjs`: Type definitions for PrismJS, a syntax highlighting library.
* `prismjs`: The PrismJS library itself.

3. **Create a `tsconfig.json` file:**

Inside your project directory, create a `tsconfig.json` file with the following content. This file configures the TypeScript compiler.

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

4. **Create project structure:**

Create a `src` directory to hold your TypeScript files, and an `index.html` file in the root directory. Inside the `src` directory, create a file named `index.ts`. This is where our main logic will reside.

Your project structure should look like this:


my-code-editor/
├── index.html
├── package.json
├── tsconfig.json
└── src/
    └── index.ts

Building the HTML Structure

Let’s start by creating the basic HTML structure for our code editor in `index.html`. This will include a text area for code input, a display area for the highlighted code, and potentially some basic styling.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Code Editor</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVqUAhG6arU62zUqT2K2FTvy5vvQnG192YHH9/VbA6JNe03k39amH6rAk/WPFwI3y5a4JOPn/ZKhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        body {
            font-family: monospace;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }
        .container {
            display: flex;
            height: 100vh;
        }
        .input-area, .output-area {
            width: 50%;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;
        }
        .input-area {
            background-color: #fff;
            border-right: 1px solid #ccc;
        }
        .output-area {
            background-color: #2d2d2d;
            color: #fff;
            overflow: auto;
        }
        textarea {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            padding: 10px;
            box-sizing: border-box;
            font-family: monospace;
            font-size: 14px;
        }
        code {
            white-space: pre-wrap;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="input-area">
            <textarea id="code-input" placeholder="Write your code here"></textarea>
        </div>
        <div class="output-area">
            <pre><code id="code-output" class="language-javascript"></code></pre>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" integrity="sha512-7UD43uWp0M/P4qS6E5c0o+M96Nf0aGgNqM5e/Nn9+0V/3a1+k1J2d/V8XgGk/J+8FwQfG+F2w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="./dist/index.js"></script>
</body>
</html>

Key elements of the HTML:

  • A `textarea` with the id `code-input` for code input.
  • A `<pre><code>` block with the id `code-output` for displaying the highlighted code. The `language-javascript` class is an example; we will change it dynamically.
  • Include PrismJS CSS and JS files for syntax highlighting, using a CDN for simplicity.
  • A link to `dist/index.js`, which will contain our compiled TypeScript code.

Writing the TypeScript Logic

Now, let’s write the TypeScript code in `src/index.ts` to handle the code editor’s functionality. This includes capturing input changes, highlighting the code, and updating the output area.


// Import PrismJS
import Prism from 'prismjs';

// Get references to HTML elements
const codeInput = document.getElementById('code-input') as HTMLTextAreaElement;
const codeOutput = document.getElementById('code-output') as HTMLElement;

// Function to highlight code
function highlightCode() {
  if (!codeInput || !codeOutput) return;

  const code = codeInput.value;
  // Determine the language based on the code (simple heuristic)
  let language = 'javascript';
  if (code.startsWith('//')) {
    language = 'javascript'; // Or 'typescript', depending on your preference
  } else if (code.includes('import')) {
    language = 'typescript';
  } else if (code.includes('<')) {
    language = 'html';
  } else if (code.includes('class')) {
      language = 'typescript'; // Or 'java', 'c++', etc.
  }

  // Highlight the code using PrismJS
  const highlightedCode = Prism.highlight(code, Prism.languages[language], language);
  codeOutput.innerHTML = highlightedCode;
  // Add the language class to the code element
  codeOutput.className = `language-${language}`;
}

// Event listener for input changes
codeInput.addEventListener('input', highlightCode);

// Initial highlight (for any pre-existing code in the textarea)
highlightCode();

Explanation:

  • We import the PrismJS library.
  • We get references to the `code-input` textarea and `code-output` code element.
  • The `highlightCode` function:
    • Gets the code from the textarea.
    • Determines the programming language. (This is a very basic example; more sophisticated language detection would be necessary for a real-world editor.)
    • Uses `Prism.highlight()` to highlight the code.
    • Updates the `code-output` element with the highlighted HTML.
    • Adds the appropriate language class to the `code-output` element.
  • An event listener is attached to the textarea to trigger the `highlightCode` function on every input change.
  • We call `highlightCode()` initially to highlight any default content in the textarea.

Compiling and Running the Code

With the HTML and TypeScript code in place, let’s compile the TypeScript code and run the application. Open your terminal and execute the following command in the project directory:

tsc

This command will compile the TypeScript code in `src/index.ts` and generate a `dist/index.js` file. Now, open `index.html` in your web browser. You should see a code editor with a text area on the left and a highlighted output area on the right. As you type code into the text area, it should be highlighted in the output area.

Enhancements and Features

Our simple code editor is functional, but there are many ways to enhance it. Here are some ideas for adding more features:

  • **Language Detection:** Implement more robust language detection to automatically determine the language based on the code’s content or a dropdown selection.
  • **Code Completion:** Integrate a code completion library (like CodeMirror or Monaco Editor) to provide suggestions as the user types.
  • **Error Highlighting:** Implement error highlighting to indicate syntax errors or other issues in the code.
  • **Themes:** Allow users to choose different themes for the editor.
  • **Line Numbers:** Add line numbers to the editor for easier navigation.
  • **Syntax Highlighting Customization:** Allow users to customize the syntax highlighting colors and styles.
  • **Code Folding:** Implement code folding to collapse and expand sections of code.
  • **Saving and Loading:** Add functionality to save and load code from local storage or a backend server.
  • **Multiple Languages:** Support multiple programming languages, such as Python, Java, C++, etc.
  • **Run Code:** Add a button to run the code directly within the browser (e.g., for JavaScript).

Common Mistakes and Troubleshooting

Here are some common mistakes and troubleshooting tips:

  • **Incorrect File Paths:** Double-check the file paths in your HTML (e.g., `<script src=”./dist/index.js”></script>`) and ensure that the files are in the correct locations relative to your HTML file.
  • **Typos:** Carefully review your code for typos, especially in variable names, function names, and HTML element IDs.
  • **Missing Dependencies:** Make sure you have installed all the necessary dependencies using `npm install`.
  • **Browser Console Errors:** Use your browser’s developer console to check for any JavaScript errors. These errors can provide valuable clues about what’s going wrong.
  • **Incorrect Syntax Highlighting:** If syntax highlighting isn’t working, check the following:
    • Verify that you have included the PrismJS CSS file in your HTML.
    • Ensure that the language class (e.g., `language-javascript`) is correctly applied to the `<code>` element.
    • Confirm that PrismJS supports the language you are trying to highlight.
  • **TypeScript Compilation Errors:** If you encounter TypeScript compilation errors, carefully read the error messages and fix the code accordingly. Make sure your `tsconfig.json` is set up correctly.

Key Takeaways

We’ve built a basic, functional code editor using TypeScript, HTML, and PrismJS. You’ve learned how to set up a TypeScript project, create the HTML structure, write the TypeScript logic for syntax highlighting, and compile and run the code. This tutorial provides a fundamental understanding of building web-based code editors, including the core concepts of text manipulation, user interface interaction, and syntax highlighting. You can now use this as a foundation to expand and customize your own code editor with additional features and capabilities.

FAQ

Here are some frequently asked questions about building a web-based code editor:

Q: Can I use a different syntax highlighting library?

A: Yes, there are other syntax highlighting libraries you can use, such as highlight.js, CodeMirror, or Monaco Editor. The choice depends on your specific needs and preferences. CodeMirror and Monaco Editor offer more advanced features like code completion and are often used in professional web-based IDEs.

Q: How do I add support for more programming languages?

A: To add support for more languages, you’ll need to:

  • Include the relevant language definition files for your syntax highlighting library (e.g., PrismJS).
  • Update your language detection logic to identify the language based on the code.
  • Add the appropriate language class to the `<code>` element in your HTML.

Q: How can I implement code completion?

A: Code completion is a more advanced feature that requires a dedicated library or framework. CodeMirror and Monaco Editor are excellent choices for implementing code completion. These libraries provide features such as auto-suggestions, parameter hints, and more.

Q: How do I handle user input in the textarea?

A: You can use the `input` event listener to capture user input in the `textarea`. This event fires whenever the content of the textarea changes. Inside the event handler, you can retrieve the current text using the `value` property of the textarea element. This is demonstrated in the TypeScript example above.

This project offers a gateway into the world of web-based development tools. By understanding the principles behind this simple code editor, you’ve taken a significant step toward creating more complex and interactive web applications. You’re now equipped to explore more advanced features and tailor your editor to your specific needs, fostering your skills and creativity in the realm of web development.

More posts