Gesso builds packages that interact with HTML canvases. Use the power of npm, a built-in server for testing and demoing, all without writing any HTML. To deploy, simply load the resulting JS file on a page containing a canvas.
Gesso is a command-line tool that:
- Builds your project on-the-fly so you can see changes immediately
- Eliminates boilerplate by running the result in a canvas on
- Lets you deploy by adding a single
<script>element to your website
Gesso also includes an optional base library, and a plugin system to handle ambitious canvas projects.
Sometimes you just want to make good art in the browser. And that inspiration shouldn't be wasted on boilerplate or build details.
$ npm install -g gesso
Initialize a new package:$ npm init
Add Gesso as a dependency:$ npm install -S gesso
Create a new
index.jsfile and add your code. For example:var Gesso = require'gesso';var game = ;var t = 0;var x;gameupdatet += 1;var center = gamewidth - 300 / 2;x = center + Mathsint / 15 * 20;;gamerenderctxfillStyle = 'rgba(255, 255, 255, 0.2)';ctxfillRect0 0 gamewidth gameheight;ctxfont = '36px Verdana';ctxfillStyle = '#f34';ctxfillText'Hello,' 270 200;ctxfillText'Browser Games!' x 252;;gamerun;
Note: See hello for a complete project around this example.
Build and serve:$ gesso serverversion: 0.10.0* Running on* Watching for changes
Now visit http://localhost:63550 to see it in action.
The command-line interface provides commands to help you build, test, and publish an idea quickly.
You can also type
gesso -h for inline help.
Builds and serves your app, rebuilding on file changes.
$ gesso serve [options]
--port, -p <port>: The port to serve on (default
--host <address>: The host to serve from (default
Builds your app and bundles it into the output file (dist/gesso-bundle.js by default).
$ gesso build [options]
--out <path>: The output file (default
Gesso projects are normal Node projects. The only additional requirements are:
- You need to include
gessoas a dependency. The CLI delegates all commands to the local installation so you can use different versions of Gesso in different projects.
- Your project must expose an entry point. This is implicit if you create an
index.jsfile. Or you can be explicit by providing a main field.
Gesso uses browserify to construct a
require() dependency tree, including
also use many Node built-in modules since they're wrapped to work in the browser.
Detailed documentation is currently being written and will be live by version 1.0.
Please take a look at the spinning example's index.js for now.
Build your project$ gesso build
Move the generated
dist/gesso-bundle.jsto your website
Add the following on your page where you want your project to be rendered:
Note: If this is the only canvas on the page, then you can omit the
Add the following just above the
- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found
- Fork the repository, make your changes, and add yourself to authors.md
- Send a pull request
If your PR has been waiting a while, feel free to ping me on Twitter.