Proto is a front-end web prototyping tool, combining markup (Jade), script (CoffeeScript), and style (Stylus) into a single page. It's strength is prototyping small interaction details. Proto is similar to JSFiddle in that a set of sources are compiled and combined, but it operates from the command line.

This scratches an itch I've been having for a while. I really like using languages like CoffeeScript and Sass, but having to configure an environment just for a quick prototype was tedious, and prototyping in JSFiddle doesn't allow those languages. (It now does, and there are other services that do — CodePen and bl.ocks.org are pretty nifty — but they don't work quite how I'd like and require using a web editor or are otherwise tightly constrained.) I wanted to be able to prototype a small bit of interface to quickly test interaction ideas, have the prototype update live as I make changes, and then share that prototype with others. The prototypes also needed to be private and includable in a different project repository. I partially addressed the problem with Pad Hacker, which was also an attempt to create a work environment for iPads. But, sharing was awkward without a full service behind it, and it had various limitations. Proto addresses these problems by creating a quick environment setup process, and using GitHub Gists as a backend for sharing.

With Proto, I can quickly initialize the project, start editing on it and seeing the changes in browser as I make them. LiveReload works really well for this, automatically refreshing the browser as I make the changes, which updates the page since it is compiled on-the-fly. To share, I can create a Gist to send to colleagues, who can then clone that repo and use the Proto project themselves.

Actually serving the compiled page is important, in order to experiment with features that the browser will not allow for security reasons when viewing a local file. Also, it helps significantly for prototyping on mobile, since the mobile browser can just be pointed to the computer Proto is running on.

Proto is pure JavaScript (well, CoffeeScript mostly). I decided on doing it this way because it allows for a pure codebase with no weird dependencies outside of its language. The source languages were picked largely because of their whitespace-sensitive nature. I chose Stylus over Sass because it's nearly the same syntax (not the crap SCSS syntax but the nice Sass syntax), while having a much more mature JavaScript parser. Pad Hacker uses Haml, but I chose Jade instead because it also is much more established and powerful in the JavaScript world.

A Proto project is really just a folder with five files, describing each of the three sources, plus basic settings, and notes.

Initializing creates a folder with the necessary files:

Once initialized, the project can be served:

Which looks something like this:

Compiled source:

Notice that Proto conveniently adds a slew of libraries into the compiled page. These libraries are specified in the settings.json file for that project, and users can add or remove libraries as they wish.

Now, I can start editing those files that were generated:

And edit away…

Errors I make in the compilation process are passed through to the browser:

I've made some edits, now I want to share the prototype with a colleague. For sharing, Proto uses GitHub Gists as a backend. It supports anonymous Gists, but authenticated ones are much more useful. Authentication involves generating an access token using the GitHub API. (Username and password are never stored. Ever .)

Once an access token is generated, I can then create authenticated Gists with my Proto projects, which makes them full git repositories . By default, Proto creates private Gists, but they can be made public using the public option.

After making some more edits, I can update the same gist with my changes, using '.' notation even. (Note, '.' notation works except when initializing a project.)

This commits my changes and pushes them to the Gist repo, showing up as a commit. If I want to, I can go back through the history, and generally use it as one uses a git repo.

There is also a Proto viewer service, proto.es , which will render Proto-specific Gists.

To get started with Proto, simply install it using npm:

And create a project:

Happy prototyping!