HTML/CSS/JS Coding Editor for Technical Interviews

Running HTML 5 - Autocomplete is not available

Our HTML/CSS/JS environment renders a pad’s contents within an iFrame -in real-time. JavaScript console.log statements and errors are reported within your developer console.

You can use `script` and `link` tags to embed CDN-hosted JavaScript and CSS files into your pad. For example, this code sample embeds Bootstrap 5 into a pad:

<html>   <head>     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">   </head>   <body>     <h1>Hello, World</h1>     <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">       Popover on right     </button>     <script>       var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))       var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {         return new bootstrap.Popover(popoverTriggerEl)       })     </script>   </body> </html>
Code language: HTML, XML (xml)

Our three-pane layout enables you to easily separate your pad’s HTML, CSS, and JS contents. It also enables JSX usage in the JavaScript pane without further configuration needed.

If you need to use Babel to transform your JavaScript in a non-three-pane layout, you may include the Babel transpiler. This will allow you to use JSX code in the classic layout. The following example demonstrates a classic layout React example

<html>   <head>     <meta charset="UTF-8" />     <title>Hello World</<strong>title</strong>>     <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>     <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>     <script src="https://unpkg.com/@babel/standalone@7.13.12/babel.min.js"></script>   </head>   <body>     <div id="root"></div>     <script type="text/jsx">       ReactDOM.render(         <<strong>h1</strong>>Hello, React!</<strong>h1</strong>>,         document.getElementById('root')       );     </<strong>scr</strong>i<strong>pt</strong>>   </body> </html>
Code language: HTML, XML (xml)

The JSX is transpiled by including the babel transpiler and marking the JSX code with type=”text/jsx”. If you want to use JavaScript features that are not yet available in your browser, you may alternatively mark the `script` tag with type=”text/babel”

Code language: HTML, XML (xml)

React/JSX

React support is baked right into CoderPad. The quickest way to get a pad up-and-running with React is to select the “JSX React” package from the “Packages” dropdown at the top of a pad.

This will provide a template that will render out “Hello, React!” in the DOM using React and JSX.

Alternatively, you can use your own template that imports React and React DOM. If using classic layout, you’ll also need to include Babel for JSX transformation in script tags

<html>   <head>     <meta charset="UTF-8" />     <title>Hello World</title>     <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>     <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>     <script src="https://unpkg.com/@babel/standalone@7.13.12/babel.min.js"></script>   </head>   <body>     <div id="root"></div>     <script type="text/jsx">       ReactDOM.render(         <h1>Hello, React!</h1>,         document.getElementById('root')       );     </script>   </body> </html>
Code language: HTML, XML (xml)

While JSX transformation is supported out-of-the-box in three-pane’s `index.js` file, you’ll still need to include the imports to React and React DOM.

Simply include the two packages in script tags, and you can use React as expected within the JS pane.

<html>   <head>     <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>     <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>   </head>   <body>     <div id="root"></div>   </body> </html>
Code language: HTML, XML (xml)

We also support many libraries that common React applications use, such as Redux, Material UI, and Axios. To see example usage of many of these libraries (including how to add your own libraries), refer to our NPM library documentation.

Angular JS

Sample “Hello World” for AngularJS:

<html>   <head>     <script src="https://unpkg.com/angular@1.8.0/angular.min.js"></script>     <script>       angular.module('myApp', []).component('helloWorld', {         template: 'Hello World!',       })     </script>     <style>       body {         background-color: #1d2126;         color: white;       }     </style>   </head>   <body>     <div ng-app="myApp"><hello-world></hello-world></div>   </body> </html>
Code language: HTML, XML (xml)

Code language: HTML, XML (xml)

VueJS

We have full support for Vue.js and the related ecosystem. 

The quickest way to get a pad up-and-running with Vue.js is to select the “Vue.js” package from the packages dropdown at the top of a pad.

The following is an example of Vue 2 usage:

<html>   <head>     <script src="https://unpkg.com/vue"></script>     <style>       body {         background-color: #1d2126;         color: white;       }     </style>   </head>   <body>     <div id="app"><p>{{ message }}</p></div>     <script>       new Vue({         el: '#app',         data: {           message: 'Hello World!',         },       })     </script>   </body> </html>
Code language: HTML, XML (xml)

However, we also support Vue 3 as well. Here’s an example of Vue 3 being used with the composition API:

<html>   <head>     <script src="https://unpkg.com/vue@next"></script>     <style>       body {         background-color: #1d2126;         color: white;       }     </style>   </head>   <body>     <div id="app"><p>{{ message }}</p></div>     <script>       const app = Vue.createApp({             setup() {           return {             message: 'Hello, World!',           }             }       });       app.mount('#app');     </script>   </body> </html>
Code language: HTML, XML (xml)

We also support many libraries that common Vue applications use, such as Vuex, Vuetify, and RxJS. To see example usage of many of these libraries (including how to add your own libraries), refer to our NPM library documentation.

Try Our HTML/CSS/JS Editor