web-playground

web-playground is command line tool for quickly creating prototypes or demos. It requires no configuration or boilerplate. It has builtin preprocessors, bundler and live reloading server. You can create JS, HTML, or CSS files you need on the fly without worrying about tooling at the beginning.

web-playground is never meant to be a tool for developing production ready app. Once the prototype proven to be worthy. You will need to switch gear. That said, web-playground provides shortcut to conveniently bundle everything into a single HTML file to you put it online wherever you want.

Only supports Node >= 4

Give it a try

npm install -g web-playground

In the directory you want to put your prototypes
This will create no files, and no file is required at beginning
wpg start
echo "document.write('
Hack the playground!
')" > js.js

You can create and edit

js.js

html.html

css.css

playground.yml

wpg init

Preprocessors

Web Playground supports a variety of preprocessors. To enable one, first run

wpg init

playground.yml

preprocessor: babel

js

playground.yml

js:
  preprocessor: babel

Supported preprocessors

Web Playground supports a variety of preprocessors. But only a few are builtin (babel, node-scss, and ejs). This is to speed up installation and improve start up performance.

Supported preprocessors are:

• html
  • html (no processing)
  • ejs
  • jade (install separately)
• js
  • js (no processing)
  • babel
  • coffeescript (install separately)
  • typescript (install separately)
• css
  • css (no processing)
  • scss
  • less (install separately)
  • stylus (install separately)

To enable supported external preprocessor, you need to run

npm install 

playground.yml

To use Less:

1. Run

   wpg init

   to create a

   playground.yml

   .
2. Add

   preprocessor: less

   under

   css

   in

   playground.yml

   .
3. Run

   npm install less

   (no

   -g

   ) to have Less available in current directory (you will see a

   node_modules

   directory).
4. Run

   wpg init

   again to create

   css.less

   or you can just create the file yourself.
5. Run

   wpg start

   to start hacking.

CommonJS module

In

js.js

require

# In current directory
npm install react react-dom

// js.js
var React = require('react');
var ReactDOM = require('react-dom');

class MyComponent extends React.Component {
  render() {
    return 
Hello World
;
  }
}

ReactDOM.render(, node);

Config file

If

playground.yml

playground.yml

title: Cat Playground

html:
Available - ejs, jade
preprocessor: ejs
js:
Available - babel, coffeescript, typescript
  preprocessor: babel
These scripts will be added in appearance order and before the your js
external:
- 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js'
css:
Available - scss, less, stylus
  preprocessor: scss
Available - autoprefixer
vender_prefixing: autoprefixer
Available - reset, normalize
base: reset
These stylesheets will be added in appearance order and before the your css
external:
- 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'

Manual

Usage: wpg [options] [command]

Commands:
  init              create boilerplate files in current directory
  start [options]   load config and start local server
  bundle            bundle all asserts into a single HTML file
Options:
  -h, --help                   output usage information
  -V, --version                output the version number
  -d, --target-dir   target different directory

Bundle

Sometimes you find yourself need to put your awesome work online. You can use the bundle feature of Web Playground. Use

wpg bundle

index.html

Target different directory

When you work on lots of demos,

cd

--target-dir

wpg

wpg

Existing Issues

• CommonJS bundling only support babel as preprocessor. Need supports for CoffeeScript and TypeScript.
• Race condition when switching between CommonJS and none CommonJS bundle. Sometime the old watcher might get loaded to browser because it's slower.
• CommonJS

  require

  detection depends on has-require. It doesn't distinguish between code and comments.