TypeScript Tutorial: Creating a Simple Web-Based Code Playground

Written by

learnmodernjavascript

in

In the world of web development, the ability to quickly experiment with code and see the results in real-time is invaluable. Whether you’re a seasoned developer or just starting your coding journey, a code playground can significantly boost your productivity and understanding. This tutorial will guide you through creating a simple, yet functional, web-based code playground using TypeScript, a language that adds static typing to JavaScript, making your code more robust and easier to maintain. We’ll cover the fundamental concepts, step-by-step instructions, and practical examples to get you started.

Why Build a Code Playground?

Imagine having a dedicated space where you can write, execute, and debug code snippets without the hassle of setting up a full-fledged development environment. A code playground offers precisely that. It’s a sandbox for experimenting with different programming concepts, testing new libraries, and learning by doing. For beginners, it provides an immediate feedback loop, allowing you to see the effects of your code changes instantly. For experienced developers, it’s a quick way to prototype ideas, troubleshoot issues, and share code examples with others.

Prerequisites

Before we dive in, ensure you have the following:

  • A basic understanding of HTML, CSS, and JavaScript.
  • Node.js and npm (Node Package Manager) installed on your system.
  • A code editor (e.g., VS Code, Sublime Text, Atom).

Setting Up the Project

Let’s start by creating a new project directory and initializing it with npm. Open your terminal and run the following commands:

mkdir code-playground
cd code-playground
npm init -y

This will create a new directory named `code-playground`, navigate into it, and initialize a `package.json` file with default settings. Next, we’ll install the necessary dependencies:

npm install typescript parcel-bundler --save-dev

We’re installing:

  • `typescript`: The TypeScript compiler.
  • `parcel-bundler`: A fast, zero-configuration web application bundler. We’ll use this to bundle our TypeScript code, HTML, and CSS into a single file that the browser can understand.

Configuring TypeScript

Now, let’s configure TypeScript for our project. We’ll create a `tsconfig.json` file in the root directory. This file tells the TypeScript compiler how to compile your code. Run the following command:

npx tsc --init

This command generates a default `tsconfig.json` file. Open this file in your code editor and modify it to suit our needs. Here’s a recommended configuration:

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

Let’s break down the important options:

  • target: Specifies the JavaScript version to compile to (ES5 is widely supported).
  • module: Specifies the module system (commonjs is fine for our needs).
  • outDir: Specifies the output directory for compiled JavaScript files.
  • rootDir: Specifies the root directory of your source files.
  • strict: Enables strict type-checking options. It’s a good practice to enable this for more robust code.
  • esModuleInterop: Enables interoperability between CommonJS and ES modules.
  • skipLibCheck: Skips type checking of declaration files.
  • forceConsistentCasingInFileNames: Enforces consistent casing in file names.
  • include: Specifies the files to be included in the compilation.

Creating the HTML Structure

Next, let’s create the basic HTML structure for our code playground. Create a file named `index.html` in the root directory of your project. 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>Code Playground</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="code-editor">
      <textarea id="code" placeholder="Write your code here"></textarea>
    </div>
    <div class="output">
      <iframe id="output-frame"></iframe>
    </div>
  </div>
  <script src="index.ts"></script>
</body>
</html>

This HTML structure includes:

  • A `textarea` with the ID “code” where users will write their code.
  • An `iframe` with the ID “output-frame” to display the output of the code.
  • A link to `style.css` for styling.
  • A script tag that imports `index.ts`, where our TypeScript code will reside.

Adding Basic Styling (style.css)

Let’s create a `style.css` file in the root directory and add some basic styling to make our code playground visually appealing. This is a minimal example; feel free to customize it further.


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: 1200px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

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

.output {
  width: 50%;
  padding: 20px;
  background-color: #eee;
}

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

iframe {
  width: 100%;
  height: 400px;
  border: none;
}

Writing the TypeScript Logic (index.ts)

Now, let’s create `index.ts` inside a new `src` directory. This is where the core logic of our code playground will reside. This file will:

  • Get the code from the textarea.
  • Create an HTML document.
  • Write the code into the document.
  • Update the iframe’s content with the new HTML document.

const codeEditor = document.getElementById('code') as HTMLTextAreaElement;
const outputFrame = document.getElementById('output-frame') as HTMLIFrameElement;

function updateOutput() {
  if (!codeEditor || !outputFrame) {
    return;
  }

  const code = codeEditor.value;
  const outputDocument = outputFrame.contentDocument;

  if (outputDocument) {
    outputDocument.open();
    outputDocument.write(
      `<!DOCTYPE html><html><head><style>${/* Add your CSS here */}</style></head><body>${code}</body></html>`
    );
    outputDocument.close();
  }
}

codeEditor.addEventListener('input', updateOutput);

// Initial update on page load
updateOutput();

Let’s break down this code:

  • We get references to the textarea and iframe elements using their IDs.
  • updateOutput() function:
    • Gets the code from the textarea.
    • Gets the contentDocument of the iframe.
    • Writes the code into the iframe’s document, wrapped in basic HTML structure. This is important to make sure the code renders correctly.
  • We add an event listener to the textarea to call updateOutput() whenever the user types in the textarea.
  • We call updateOutput() initially to render any code present when the page loads.

Running the Code Playground

Now that we’ve set up the project, added the HTML, CSS and TypeScript code, let’s run it. Open your terminal and run the following command:

npx parcel index.html

Parcel will bundle your code and start a development server. You should see an output similar to this:

Server running at http://localhost:1234

Open the URL in your browser (e.g., `http://localhost:1234`). You should see your code playground with the textarea and the iframe. Try typing some JavaScript code into the textarea, and you should see the output in the iframe immediately.

Enhancements and Features

Our code playground is functional, but we can enhance it with more features. Here are some ideas:

  • Syntax Highlighting: Integrate a library like Prism.js or highlight.js to provide syntax highlighting in the code editor, making it easier to read and write code.
  • Error Handling: Implement error handling to catch and display errors that occur when the code is executed in the iframe.
  • Code Autocompletion: Add code autocompletion using a library like CodeMirror or Monaco Editor to improve the coding experience.
  • CSS and HTML Support: Allow users to write and execute HTML and CSS code along with JavaScript. You could add separate textareas or tabs for each language.
  • Save and Load: Implement functionality to save and load code snippets to local storage or a backend server.
  • Themes: Allow users to choose different themes for the code editor.
  • Libraries and Frameworks: Provide options to include popular libraries and frameworks (e.g., React, Vue, jQuery) in the iframe.

Syntax Highlighting with Prism.js (Example)

Let’s add syntax highlighting using Prism.js. First, install it:

npm install prismjs --save

Then, modify your `index.html` to include Prism.js and a CSS theme:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Code Playground</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" integrity="sha512-D/B2W/j/69r250w9iH89iXWz7J+V/5R9sX8/yv7N7Wz0jD99qjXbXf5n97oQo+U/7m5qJv8u7Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
  <div class="container">
    <div class="code-editor">
      <textarea id="code" placeholder="Write your code here"></textarea>
    </div>
    <div class="output">
      <iframe id="output-frame"></iframe>
    </div>
  </div>
  <script src="index.ts"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" integrity="sha512-7Amd2j8a65Rj2g5060w21a5g3Lh96W0j3r5iR61Ew5a1K/d13/46K+59j1l0h+gY0r7iXy9yOQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>

Modify your `index.ts` to apply Prism.js to the code editor:


const codeEditor = document.getElementById('code') as HTMLTextAreaElement;
const outputFrame = document.getElementById('output-frame') as HTMLIFrameElement;

function updateOutput() {
  if (!codeEditor || !outputFrame) {
    return;
  }

  let code = codeEditor.value;
  // Apply syntax highlighting
  code = Prism.highlight(code, Prism.languages.javascript, 'javascript');

  const outputDocument = outputFrame.contentDocument;

  if (outputDocument) {
    outputDocument.open();
    outputDocument.write(
      `<!DOCTYPE html><html><head><style>${/* Add your CSS here */}
      .token.comment, .token.prolog, .token.doctype, .token.cdata {
        color: slategray;
      }

      .token.punctuation {
        color: #999;
      }

      .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted {
        color: #905;
      }

      .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
        color: #690;
      }

      .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {
        color: #a67f58;
        background: hsla(0, 0%, 100%, .5);
      }

      .token.atrule, .token.attr-value, .token.keyword {
        color: #07a;
      }

      .token.function, .token.class-name {
        color: #DD4A68;
      }

      .token.regex, .token.important {
        color: #e90;
      }

      .token.variable {
        color: #e90;
      }

      .token.bold {
        font-weight: bold;
      }
      .token.italic {
        font-style: italic;
      }
      </style></head><body><pre><code class="language-javascript">${code}</code></pre></body></html>`
    );
    outputDocument.close();
  }
}

codeEditor.addEventListener('input', updateOutput);

// Initial update on page load
updateOutput();

Add these CSS rules to the style section in the iframe to style the Prism.js output:

Now, when you type JavaScript code in the textarea, it will be syntax-highlighted in the output iframe. Remember to adapt the language in Prism.languages.javascript if you want to support other languages.

Common Mistakes and How to Fix Them

  • Incorrect File Paths: Double-check that your file paths in the HTML and TypeScript code are correct. A common mistake is misspelling the file names or placing files in the wrong directories.
  • CORS (Cross-Origin Resource Sharing) Errors: When loading external resources (e.g., scripts, stylesheets) in the iframe, you might encounter CORS errors. Ensure that the external resources allow cross-origin requests. If you’re using a local development server, this is less likely to be an issue.
  • Typographical Errors: Typos in your code can lead to unexpected behavior. Use a code editor with syntax highlighting and error checking to catch these errors early.
  • JavaScript Errors in the Iframe: If your JavaScript code in the textarea has errors, they might not be immediately visible. Use the browser’s developer tools (right-click, “Inspect”) and look in the console to see any errors that occurred inside the iframe.
  • Incorrect HTML Structure: Make sure your generated HTML is valid and well-formed. If you are injecting HTML from the textarea into the iframe, ensure that the injected HTML is properly structured (e.g., has a root element, closing tags).

Key Takeaways

  • You’ve learned how to create a basic, functional code playground using TypeScript, HTML, CSS, and Parcel.
  • You’ve understood the importance of a code playground for experimentation and learning.
  • You’ve learned how to set up a TypeScript project, configure Parcel, and write code that interacts with the DOM.
  • You’ve explored ways to enhance the code playground with features like syntax highlighting.

FAQ

  1. Can I use this code playground for production?

    While this code playground is a great learning tool and can be used for simple experiments, it’s not designed for production use. For production environments, consider using more robust code editors and frameworks.

  2. How can I add support for other languages (e.g., HTML, CSS)?

    You can add support for other languages by adding separate textareas or tabs for each language and modifying the updateOutput() function to handle different languages appropriately. You’ll need to use the appropriate Prism.js language definition for each language you support.

  3. How do I handle errors in the code?

    You can add error handling by wrapping the code execution in a try...catch block in the updateOutput() function and displaying the error messages in the iframe or the main page. Consider adding a console in the iframe to view console.log and other debugging output.

  4. How can I save and load code snippets?

    You can implement saving and loading functionality using local storage or a backend server. For local storage, you can use the localStorage API to store and retrieve code snippets. For a backend server, you’d need to create an API endpoint to save and load code snippets from a database.

Building a code playground is a rewarding experience that deepens your understanding of web development. As you continue to experiment with different features, libraries, and frameworks, you’ll gain valuable skills and insights. The possibilities for expanding this project are vast, and the knowledge you gain will serve you well in your future coding endeavors. Embrace the opportunity to learn, experiment, and create, and your coding skills will flourish.

More posts