This is a simple boilerplate helper for your everyday web experiments.
JavaScript CSS HTML Ruby
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Web Playground

This is a simple boilerplate helper for your everyday web experiments. To add a test:

  • create a new js file under the js/tests dir
  • import it's exports to index.js.
  • In index.js add your test as string in the top level array. You can use select optgroup and assign them a name by prepending to the array their name along with the | sign.
let tests = [
"|Some Group Title", "someFunc",

import {someFunc} from 'js/tests/testfile.js';
  • your test js file will need to export a function defining your test and which returns an Object in the form:
export function someFunc () {
	return {
		value: yourTestOutcomeToBePrinted,
		description: "description of what the test performed",
		code: "..someString", //would get syntax highlighted and executed if 'value' wasn't provided
		link: "some info url", //would get opened on a seperate window
		type: "string" //incase you'd like to print it out on the screen otherwize console log would do the job
  • Incase you also need some initial markup add to your index.html a template block with id someFuncTemplate
<template id="someFuncTemplate">
	<div class='a' id="e1">
  • In addition, you can operate against the return value using devtool by accessing window.o.

(The project uses the not yet supported ES6 module loading via Babel experimental module.)

*(console.log is customized to print out to the browser, you can silent it by passing false to a 3rd argument.)


  • compass
  • npm
  • local web server - though installed locally through npm it is recommended to be installed globally as a cli command.


  • run npm install
  • run npm start (which actually executes compass watch & ws)

Utilizing jjsonviewer browser-es-module-loader