TypeScript Tutorial: Building a Simple Web-Based Code Editor with Themes

Written by

learnmodernjavascript

in

In the world of web development, code editors are indispensable tools. They’re where we write, test, and debug our code. While complex IDEs offer a wealth of features, sometimes you need a simple, focused editor. This tutorial will guide you through building a basic web-based code editor using TypeScript, complete with a theme selection feature. This allows users to customize their coding environment to their preferences, improving readability and comfort.

Why Build Your Own Code Editor?

You might be wondering, why build something when there are so many excellent code editors already available? The answer lies in customization, learning, and control. Building your own editor provides:

  • A Deeper Understanding: You’ll learn the underlying principles of how code editors work, from syntax highlighting to event handling.
  • Customization: You can tailor the editor to your specific needs and preferences.
  • Learning TypeScript: It’s a practical way to learn and practice TypeScript, one of the most popular languages for modern web development.
  • Portfolio Project: It’s a great project to showcase your skills.

This tutorial focuses on a core feature: implementing themes. This functionality adds a layer of personalization and can make the coding experience more enjoyable.

Setting Up the Project

Before we dive into the code, let’s set up our project. We’ll use a simple HTML structure, a bit of CSS for styling, and, of course, TypeScript.

  1. Create Project Directory: Create a new directory for your project, e.g., `code-editor-with-themes`.
  2. Initialize npm: Navigate to your project directory in the terminal and run `npm init -y`. This will create a `package.json` file.
  3. Install TypeScript: Install TypeScript as a development dependency: `npm install –save-dev typescript`.
  4. Create TypeScript Configuration: Generate a `tsconfig.json` file by running `npx tsc –init`. This file configures how TypeScript compiles your code. You can customize this file, but the default settings are fine for this tutorial.
  5. Create HTML File: Create an `index.html` file in your project directory with the following basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Editor with Themes</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="editor-container">
            <textarea id="code-editor"></textarea>
        </div>
        <div class="theme-selector">
            <label for="theme-select">Theme:</label>
            <select id="theme-select">
                <option value="default">Default</option>
                <option value="dark">Dark</option>
                <option value="light">Light</option>
            </select>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
  1. Create CSS File: Create a `style.css` file in your project directory and add some basic styles to position the elements.

body {
    font-family: monospace;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    color: #333;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.editor-container {
    width: 80%;
    margin-bottom: 20px;
}

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

.theme-selector {
    margin-bottom: 20px;
}

label {
    margin-right: 10px;
}

select {
    padding: 5px;
    border-radius: 3px;
    border: 1px solid #ccc;
}
  1. Create TypeScript File: Create a `script.ts` file. This is where we’ll write our TypeScript code.

Writing the TypeScript Code

Now, let’s write the TypeScript code to make our code editor functional. We’ll start by selecting the necessary HTML elements and defining our themes.


// script.ts

const codeEditor = document.getElementById('code-editor') as HTMLTextAreaElement;
const themeSelect = document.getElementById('theme-select') as HTMLSelectElement;

// Define themes
const themes = {
    default: {
        backgroundColor: '#fff',
        textColor: '#000',
        borderColor: '#ccc',
    },
    dark: {
        backgroundColor: '#1e1e1e',
        textColor: '#fff',
        borderColor: '#333',
    },
    light: {
        backgroundColor: '#f9f9f9',
        textColor: '#000',
        borderColor: '#eee',
    },
};

In this code:

  • We select the `textarea` (the code editor) and the `select` element (the theme selector) using their IDs.
  • We define a `themes` object. This object holds the CSS properties for each theme (background color, text color, and border color). You can expand this object to include more styles, such as font size, font family, and more.

Next, we’ll create a function to apply the selected theme to the code editor.


// Function to apply the theme
function applyTheme(themeName: string) {
    const theme = themes[themeName] || themes.default;
    codeEditor.style.backgroundColor = theme.backgroundColor;
    codeEditor.style.color = theme.textColor;
    codeEditor.style.borderColor = theme.borderColor;
}

Here’s what this code does:

  • The `applyTheme` function takes the theme name as a string.
  • It retrieves the corresponding theme object from the `themes` object. If the theme name doesn’t exist, it defaults to the `default` theme.
  • It then applies the background color, text color, and border color to the `codeEditor` element using the CSS `style` property.

Finally, we’ll add an event listener to the theme selector to change the theme when the user selects a different option.


// Event listener for theme selection
themeSelect.addEventListener('change', () => {
    const selectedTheme = themeSelect.value;
    applyTheme(selectedTheme);
});

// Apply default theme on page load
applyTheme('default');

In this code:

  • We add an event listener to the `themeSelect` element. The listener is triggered when the user changes the selected option.
  • Inside the listener, we get the selected theme’s value and call the `applyTheme` function to apply the selected theme.
  • We also call `applyTheme(‘default’)` when the page loads to set the default theme.

Compiling and Running the Code

Now that we’ve written our TypeScript code, we need to compile it to JavaScript and then run it in the browser.

  1. Compile TypeScript: Open your terminal and navigate to your project directory. Run the command `tsc` to compile your `script.ts` file into `script.js`. If you have configured your `tsconfig.json` correctly, this command will generate a `script.js` file in the same directory.
  2. Open in Browser: Open the `index.html` file in your web browser. You should see the code editor with the default theme.
  3. Test the Theme Selector: Select different themes from the dropdown menu. The code editor’s appearance should change accordingly.

Enhancements and Next Steps

This is a basic example, but it provides a solid foundation. Here are some ideas for enhancements:

  • Syntax Highlighting: Implement syntax highlighting to make the code more readable. Libraries like Prism.js or highlight.js can help with this.
  • Autocompletion: Add autocompletion to suggest code snippets or variable names as the user types.
  • Code Folding: Allow users to collapse and expand code blocks.
  • Error Detection: Integrate a linter to detect errors in the code.
  • More Themes: Add more themes and allow users to customize them.
  • Save/Load functionality: Add the ability to save and load code.
  • Code execution: Add the functionality to execute the code inside the editor.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect Element Selection: Make sure you are selecting the correct HTML elements using `document.getElementById()`. Double-check the IDs in your HTML.
  • Typos: Typos in your code can cause errors. Carefully check your code for any typos, especially in variable names and function calls.
  • Incorrect Paths: Ensure that the paths to your CSS and JavaScript files in your `index.html` file are correct.
  • Compiler Errors: If you are getting compiler errors, read the error messages carefully. They often provide clues about what’s wrong. TypeScript’s compiler is quite helpful in pointing out errors.
  • CSS Specificity: If your styles aren’t applying correctly, check the CSS specificity. Make sure your CSS rules are specific enough to override the default styles. Use your browser’s developer tools to inspect the elements and see which styles are being applied.

Key Takeaways

  • TypeScript Fundamentals: This tutorial provides a practical introduction to using TypeScript.
  • DOM Manipulation: You’ve learned how to select and manipulate HTML elements using JavaScript.
  • Event Handling: You’ve learned how to handle events, such as the `change` event on a select element.
  • Theme Implementation: You’ve implemented a theme selection feature, which is a common feature in code editors.

FAQ

  1. Can I use this code editor for production?

    This is a basic code editor and is not suitable for production use without significant enhancements. It is designed to demonstrate how to implement themes in a code editor, not to be a full-fledged editor.

  2. How do I add more themes?

    Simply add more entries to the `themes` object, defining the CSS properties for each new theme. Remember to include an option in the HTML’s select element for the new theme.

  3. How can I improve the performance?

    For more complex code editors, consider using techniques like virtual DOM, code splitting, and memoization to improve performance. For this simple example, performance is not a significant concern.

  4. Can I use external libraries?

    Yes, you can integrate external libraries to add features like syntax highlighting, autocompletion, and more. Make sure to install the library using npm or yarn and import it into your TypeScript file.

Building a web-based code editor with themes is a rewarding project that combines practical web development skills with a touch of personalization. By following this tutorial, you’ve taken the first step towards creating a customized coding environment. As you continue to experiment with different features and enhancements, you’ll gain a deeper understanding of web development principles and TypeScript. This project is a fantastic starting point for exploring more advanced concepts, like integrating external libraries, adding code execution features, or even building a full-fledged IDE. Remember, the journey of a thousand lines of code begins with a single line, and now you have the tools to continue building.

More posts