Build an HTML/CSS/JS Playground

Learn how to build your own HTML playground

Bit, Codepen, Stackblitz, and Storybook has some of the most popular code playgrounds right now. Codepen is used for vanilla HTML/CSS/JS, Bit’s Playground is used for Angular, React and Vue, Stackblitz covers a whole lot while Storybook is mainly for React. These platforms make it possible to write vanilla/React/Angular code in our browser and execute them without creating projects in our machine. They come in handy when you want to test out a piece of code easily.

This will be our first in a series on how to "build a _ playground". Others that will come out are:

• Build an Angular playground
• Build a React playground

In this post, we will learn how to build a basic HTML/CSS/JS playground, we will learn how the aforementioned platforms do their “magic”.

Tip: Easily reuse small modules and UI components across your JS projects

Use Bit to easily develop, isolate and publish small modules and UI components in your different projects. Don’t install entire libraries and don’t copy-paste code, when you can build faster with small reusable modules.

Take a look.

Example: React components pushed to Bit’s cloud

Let’s get to work

First, create a project folder js_editor:

mkdir js_editor
cd js_editor

Create an index.html and editor.js files

touch index.html editor.js

Now, we will create tabs that will hold HTML, CSS, and JS. Each tab will hold a textarea, one textarea will be for HTML, another for CSS and the last for JS. We will use iframe to render the HTML, CSS, and JS. An iframe is an HTML tag that creates a new browser instance, there it can render HTML/CSS/JS inside itself. Using iframe is like creating a new browser in a browser.

So we will capture the keyup event in our document then, we will get the HTML code from the HTML textarea, get the CSS code from the CSS textarea and get the js code from the js textarea, then render them in the iframe.

Now, our index.html will contain the following code:

See, we used bootstrap to create the tabs. Copy bootstrap.min.js, bootstrap.min.css, and jquery.js to your workspace.

Now, let’s flesh out our editor.js:

We have a function getEl that retrieves the HTML*Element instance of an element via its id name. Next, we get the contentWindow.document of the iframe#iFrame. Then, we get hold of the html, css and js textarea HTMLTextareaElement instances.

We listened on the keyup event of the body element, the function callback will fire if its children element is typed upon. In the function callback, opens the iframe#document, then we write to it via its writeln function. See 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.

Playing in our playground

Our playground is complete, load the index.html in your browser. From here, we can HTML code in the HTML tab, we will see it being rendered in the iframe on the left. Typing CSS code in the CSS tab will style the HTML code rendered on the iframe. Writing JS code will attach JS to the HTML code.

See in the below gif how I added a button with id “but”, then styled it along with the HTML tag, then I added a click event on the button to alert “Yay”.

Conclusion

See, it is very easy. What Bit, Codepen, plunkr, stackblitz, etc does is not magic. It is just the basic stuff provided to us, they amplify it making it seem like magic.

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

If you have any question regarding this or anything I should add, correct or remove, feel free to comment, email or DM me.

Thanks !!!

Learn More

11 JavaScript Animation Libraries For 2019

Atomic Design With React And Bit: Simplify a Complex UI

11 Javascript Utility Libraries you Should Know in 2019