DEV Community

loading...
Cover image for Let's Build a Playground for HTML, CSS and JavaScript code snippets

Let's Build a Playground for HTML, CSS and JavaScript code snippets

sinhapiyush profile image Piyush Sinha Originally published at piyushsinha.tech ・2 min read

If you’re a frontend developer, you’ve probably tried one or more of the code playgrounds out there — like CodePen, JSBin, JSFiddle — to figure out code issues or to discuss snippets and logic pieces with colleagues.

Let's build a working playground with basic functionality to run HTML, CSS & Javascript code snippets.

Getting Started

I'm using React for this mini-project. Feel free to use vanilla JS or any framework as it doesn't really matter here.

To create a project, run:

npx create-react-app my-app
cd my-app
npm start
Enter fullscreen mode Exit fullscreen mode

Our playground will have two main components:

  • MyTabs.js - HTML, CSS and JS tabs.
  • Output.js - Rendered output for our snippets.

MyTabs.js

We will create HTML, CSS, and JS tabs inside this component. Each tab will hold a <textarea> for the respective code snippets.

import React, { Component } from "react";
import { Tabs, Tab } from "react-bootstrap";
import "./MyTabs.css";

class MyTabs extends Component {
  render() {
    return (
      <Tabs
        transition={false}
        defaultActiveKey="html"
        id="uncontrolled-tab-example"
      >
        <Tab eventKey="html" title="HTML">
          <textarea id="htmlTextarea"></textarea>
        </Tab>
        <Tab eventKey="css" title="CSS">
          <textarea id="cssTextarea"></textarea>
        </Tab>
        <Tab eventKey="js" title="JS">
          <textarea id="jsTextarea"></textarea>
        </Tab>
      </Tabs>
    );
  }
}

export default MyTabs;

Enter fullscreen mode Exit fullscreen mode

Output.js

We will use <iframe> to render the code snippets. An iFrame is an inline frame used inside a webpage to load another HTML document inside it. This HTML document may also contain JavaScript and CSS which is loaded at the time when <iframe> tag is parsed by the user’s browser. This is exactly what we need.

import React, { Component } from "react";
import "./Output.css";

class Output extends Component {
  componentDidMount() {
    const iFrame = document.getElementById("iFrame").contentWindow.document;
    const htmlTextArea = document.getElementById("htmlTextarea");
    const cssTextArea = document.getElementById("cssTextarea");
    const jsTextArea = document.getElementById("jsTextarea");
    const runBtn = document.getElementById("runBtn");
    runBtn.addEventListener("click", function () {
      iFrame.open();
      iFrame.writeln(
        htmlTextArea.value +
          "<style>" +
          cssTextArea.value +
          "</style>" +
          "<script>" +
          jsTextArea.value +
          "</script>"
      );
      iFrame.close();
    });
  }

  render() {
    return (
      <div>
        <iframe id="iFrame" title="Output"></iframe>
      </div>
    );
  }
}

export default Output;

Enter fullscreen mode Exit fullscreen mode

In the above code, we have defined an event Listener for the click event. In the function callback, opens the iframe#document, then we write to it via its writeln() function. We passed in the contents of the HTML, CSS and JS textareas concatenating them. The CSS content was placed in between <style> tag. JS content also in-between <script> tag.

Our mini-project is complete.

Playing in our playground

Let's head over to my favourite coding playground Codepen and try to run one of my pen in our playground.

playground.gif

It worked! Now, you can play around with the code and also, make the playground more fun.

Github Repository




If you have any problems, just respond to this article.

Happy Coding!

Discussion (2)

pic
Editor guide
Collapse
leviathanprogramming profile image
𝐋𝐄𝑽𝐈𝑨𝐓𝐇𝐀𝐍 Programming

You can also use Ace Editors to have a better editor with color parsing and more built-in editor features.

Collapse
sinhapiyush profile image
Piyush Sinha Author

Thanks for the suggestion. I will try it for sure.