An enjoyable playground for HTML, JavaScript and CSS
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
npm install -g web-playgroundIn 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.htmland
css.cssfiles. Your browser will update instantly. You can also add a
playground.ymlby running
wpg initto customize the playground for your needs.
Web Playground supports a variety of preprocessors. To enable one, first run
wpg initto create a
playground.yml. Then uncomment the appropriate section in it. For example, to enable SCSS, add
preprocessor: babelunder
jsin
playground.yml:
js: preprocessor: babel
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:
To enable supported external preprocessor, you need to run
npm installin the same directory as
playground.yml. For example:
To use Less:
wpg initto create a
playground.yml.
preprocessor: lessunder
cssin
playground.yml.
npm install less(no
-g) to have Less available in current directory (you will see a
node_modulesdirectory).
wpg initagain to create
css.lessor you can just create the file yourself.
wpg startto start hacking.
In
js.jsfile, you can
requirenpm installed modules. web-playground will bundle that for you.
# 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);
If
playground.ymlis available in the same directory, web-playground will load it to provide more customizations. Below is the default configurations if no
playground.ymlfile is found.
title: Cat Playgroundhtml:
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'
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
Sometimes you find yourself need to put your awesome work online. You can use the bundle feature of Web Playground. Use
wpg bundleflag when you want to publish your playground. It will bundle all your assets into one
index.htmlfile, which you can view just like a webpage without web-playground.
When you work on lots of demos,
cdinto each dir and start Web Playground is frustrating. You can use
--target-diroption to specify a different target directory instead of current one.
wpgwill do exactly the same thing as if it was working on current directory. This is also very convenient when you use separately installed preprocessors or dependent modules. You will only have to install it once in
wpgrunning directory instead of each target directory.
requiredetection depends on has-require. It doesn't distinguish between code and comments.