Stop! Hammertime With Hammer for Mac

Looking for the best way to make static HTML sites on your Mac? Hit the nail on the head with Hammer – the newest addition to the web developer/designer’s (devigner’s?) toolbelt. Hammer is a brand new auto-build tool from Riot intended to make a developer’s life easier by speeding up the design-code-test loop. It speeds up your process of converting CoffeeScript to Javascript and SASS/SCSS to CSS, while keeping the build folder clean of trash and various dependencies.

Join us as we hammer our way through a demo of this App Store newcomer and show its features in all their glory. We’ve got two copies to giveaway to our readers as well, so keep reading to get your chance to enter.

When we compare the olden days of web design and development in the early 1990s and the web today, the leap we’ve made as a technologically obsessed species becomes staggeringly apparent. We’ve lived through the rise and fall of WYSIWYG editors, witnessed countless design trends and changes and argued over browsers, operating systems, continuously evolving programming languages and, these days more than ever, design and development on mobile devices.

With so much time spent actually developing cross-browser, cross-OS and cross-device, one can really use a tool which speeds up the actual design-code-test loop, saving valuable hours which we can then toil away on arguing about standards, as we tend to do.

Note: this review is done with a pre-release version of Hammer, and some options may differ slightly in look and functionality in the final release.

Let’s see what it can do

The TL;DR version is – Hammer automatically builds your SCSS, SASS, CSS, JS, CoffeeScript and HTML files into the Build folder inside your project. This means it automatically optimises and saves new versions of your code, without forcing you to run external programs like, for example, Compass, in addition to having an active CoffeeScript to Javascript compiler. It’s an all-in-one tool for rapid design and front end development.

Installing is, of course, as simple as ever. Simply dragging the app to your Applications folder handles everything and as soon as we run it, we’re greeted by a welcome screen.

Hitting Create new Project will let us pick a location, and will automatically create the folder. We’ll call this one “demo”.

Hammer will then build the initial project, set up some starting files and tell us it’s ready. Near the top of the window that opens next, to the left of the “Build” folder icon is an empty application placeholder. Use this to select a default text editor. I’ll use Sublime Text 2 in this case (as evident in the screenshot below). When set up, if you click this text editor icon the entire project will open in it.

The other two icons near the top of the window are also interactive – the left one, “Project Files”, opens the project folder (in my case ~/Sites/demo), and the rightmost one titled “Build” will open the Build subfolder inside our project folder (~/Sites/demo/Build).

To the left is our list of available projects (currently only one), and in the centre of the right part of the window is the build status, reporting what Hammer did, on which files, and how it went. Hammer rebuilds all files on every file save, but you can also initialise the Rebuild process manually by clicking the Rebuild Now button or hitting ⌘R. Clicking “index.html” will open it in your browser in all its magnificence.

You can open your files for editing, publish them, open them in the browser and open their containing folder directly from Hammer

The bottom-most part of the right side of the window, “Publish to”, is especially interesting — when your project is ready for deployment (for example, you’re designing a site for a client, and you’re ready to demo it), you can deploy to — for free! You get a minified link to your demo which you can send to your clients, and every new publish gives you a new link, which means you can even give your clients different versions of your design.


After opening the project in our editor by clicking the editor icon, we immediately notice some odd “include” comments in `index.html`. This is one of Hammer’s primary features — it allows you to define html fragments you can use in multiple pages without copying the same block of code over and over again, and without resorting to a server-side solution like PHP to handle the includes. Have a header you need included on all pages? No problem!

Includes help you include a common html fragment in one or more other html pages

Another immediately noticeable thing is the fact that includes do not require a file extension — just the file name is enough — nor do they require full file paths to be specified. Hammer automatically searches your project folders when building and locates the necessary files, so you can even move them around and nothing will break as long as they still have the same name. Hence, in the index.html file,
"@include _header" was enough, and there was no need for "@include /includes/_header.html"This is due to the Clever Paths feature which works in includes, image sources <img src="<!-- @path mac.png -->" /> and even in CSS background-image: url(mac.png).

Inclusions extend to assets as well, and you can just as easily embed your JS and CSS (or CoffeeScript and SASS/SCSS) into the html. Typing something like <!-- @javascript app --> will not only look for the app.js (or file in your entire project, it will also generate the required <script> tags. Likewise for CSS — using <!-- @stylesheet style --> will include the file through the appropriate <link> tags, and using something like <!-- @stylesheet assets/css/* --> will include every stylesheet file found in the entire assets/css folder, one after the other.


Hammer also supports declaring variables. They are similar in syntax to PHP variables and declared thusly:<!-- $title My New Title -->
This declares the `title` variable and allows you to use it all over the current document, like so: <title><!-- $title --></title>In case a page does not explicitly re-declare a variable, you can use a default value: <title><!-- $title | This is a title --></title>.

As you can see, variables are a powerful tool in any developer’s arsenal as they make refactoring data on a page significantly faster.

Variables enable data-reuse, and can even be used as a way to demonstrate internationalisation in your project

Automatic Reload

Including a @reload tag in your file tells Hammer to reload the page in the browser every time it builds, i.e. every time you save the file.

This provides you with the responsiveness of a WYSIWYG editor in the comfort of your browser. Edit CSS and markup in one window/monitor, and watch the changes as they are applied live in/on another. This saves additional time that’s usually wasted on switching to the other window and hitting Reload, and you’ll quickly get accustomed to it.

Navigation helpers and Clever Path

Last but not least, two more features deserve a mention.

Clever Path, which we’ve already mentioned above in the Includes section, is realised through an @path keyword. Using @path prints out the path to the html file in question, so <!-- @path _header --> in our demo app would produce /includes/_header.html.

Clever path will load the first file it finds, so if there are multiple files of the same name, be more specific by adding a full path route or file extension

Using this type of pathing in your navigation links (see _nav.html) will enable Hammer to figure out the page it’s currently on, and if what it figures out matches any of the anchor tags rendered with `@path` on that given page, it automatically gives the anchor tag the “current” class. If the anchor is inside a `<li>` element, it too is given the `current` class.

For example, if we’re on the `index.html` page and said page contains the following:

<a href="<!-- @path index -->">Index</a>
<a href="<!-- @path about -->">About</a>

The first link will automatically be given a current class and will appear in the Build folder like so:

<a href="/index.html" class="current">Index</a>
<a href="/about.html">About</a>

This allows us to use the exact same navigation element on every page we use – without having to customise each page to have its own current element, further making refactoring easier and saving time.

Nav helpers rid developers of having multiple nearly-identical html fragments manually pasted into every one of their pages.


Our giveaway is now closed, and congrats to Khouba and Zach for winning a copy of Hammer!

As a newcomer to the App Store, Hammer hit the ground running. The features it offers are a worthwhile addition to any developer’s arsenal, so go ahead and give the trial version a go. Additionally, if the price tag is too much but you end up falling in love with the app as one tends to do, Riot and Appstorm have teamed up for a promotional giveaway of two Hammer licenses to you — our readers!

Just leave a comment below letting us know what you want to use most in Hammer, and optionally tweet about the giveaway and leave a link to the tweet below for an extra entry. We’ll close the giveaway on November 24th, so hurry and get your entry in!


Hammer for Mac is an autobuild tool from Riot which aims to make front end development faster, easier and smoother



Add Yours
  • I really want to use the fragments feature!

  • includes…reload….no clutter…..

  • i want it. nice editor

  • I used to use Dreamweaver and templates for all of the features mentioned above and I hated it. Now I have something a lot more elegant to use. Love the includes and clever paths.

    • Also worked with Dreamweaver templates, I was looking for a solution like this for a while, includes are fantastic, great job!

  • i’m curious about variables and clever paths!

  • Looks useful! I really want to have this! :)

  • Its much better than CodeKit

  • I need it! :)

  • the way he works with the variables is interesting!

  • Includes… finally i can put rest to my cmd+c and cmd+v shortcuts ;)

  • The includes and reload features would really help speed up development. ‘Clever Path’ is pretty awesome too!

  • You can really tell the developer has thought the workflow through. So many of the things in here are exactly the way I like to develop.

    I’ve really been wanting an easy way to do exactly what the HTML fragments feature does, and this app does it beautifully!

  • Thought this was gonna be Hammer as in Hammer building half-life engine maps :P miss building maps for CS 1.5/6 :)

  • I’ve been using Anvil (also by Riot) and really liked the feel and functionality, I‘d love a license for Hammer.

  • This looks superb. Right up my alley for designing especially the HTML includes feature. I mostly like the way it works as an addition to our existing code editor rather than yet another new one. Great work.

    Some tweet love here too –

  • @reload, includes, and variables all seem interesting. I really wany to see how this stacks up against Codekit.

  • This is incredible! I am working on redesigning website for a NGO and most of the time, I use Coda’s Clip feature to organise snippets. But Hammer’s Includes will possibly redefine my workflow because I am pretty sure I’ve been abusing my clips. I put everything in it, including breadcrumbs, footers, and banners. Includes will be an elegant way to solve this problem for me.

    By the way, Clever Path also seems to be a very promising feature.

    P.S. Psyched to see more awesome apps on MAS! App Store rules!
    P.S.S. Tweeted:

  • It looks useful indeed, I’m just wondering: Who is, in this day and age still building static HTML? And Why?

    • Company I work for is working that way and I really like it, because you could concentrate only to front-end. Afterwards there’re another people and they’re putting this static templates on cms. So everybody is doing his best.

  • Am using cmd line tools for static site generation now, but Hammer sounds like time saver! Would like to see ability to generate html out of Markdown, which I find best for blog posts. Also additional blog oriented tools would be welcome.

  • Looks pretty good. Definitely going to take the trail for a run.

  • Exactly what I was recently looking for, mainly because of code fragments, but other features are also awesome. Thanks a lot for this review.

  • This cool app would really speed up websites coding process for me. Would love to get one licence.

  • I’m currently using Jekyll for static site templates (which is very good, by the way) but this seems like a pretty nice alternative; definitely interested in giving this one a try.

  • oh this is nice. I like the idea of fragments.
    Even if I don’ t win I think I’ll buy it, but i’ll wait till I see if I win it first.

  • Clever Paths!! Definitely Clever Paths!

  • The “multi-format” build feature so I can stay more organized!

  • This is soooo going to help in speed up my work process. I need this in my life.

  • The tweet! (Would love to get a license)

  • No more fiddling with – love it :D.

    • “with php include()” …. the html sanitizer got it :D

  • Good start. But only for static HTML pages? Would be much more interesting if there would be support for Content Management Systems. But it seems some people are interested. Good luck with sales!

  • It’s a real Hammer! Super useful idea of HTML includes.

  • I really loved all the features… it is like an app where everything is on one place… which makes life easier and fun to develop… love the ideas on Hammer.

    Link to tweet:

  • Wow, Hammer looks awesome! Thank you for the review. The compiler, includes automatic reload, clever paths and variables gonna help to save a lot of time! Would love to get a license for that awesome app :)

  • I recently decided to rebuild my site and move from a CMS solution to static HTML for improved control over unique layouts, increased speed, etc. Variables and includes would *feel* like using server side languages without all the hassle. By the way, I’d definitely be using this in conjunction with their other incredible app: Anvil.

  • I’d like to try the variables and compare the app to codekit and see which I find to be more useful.

  • 1) Live reload, for sure (for webkit AND mozilla, if supported)
    2) Including js and css without having to worry about all the right tags with the right attributes — really focusing on what really needs focusing on instead of all the other cruft.

    Future Features:
    – Implementing some markdown into it all would be a SUPER nice feature!
    – Form builders would be super time saving and allow FE devs to REALLY lay down the hammer!

    Question: How would you add spans in links if you’re still stuck with CSS3-less sliding doors

  • I want to use the include! I always wanted it but i always had to get a cms like, just for this shit.

  • Hmm interesting app. Need to compare it with CodeKit. :)

  • Great app:)

    Want to use the publishing feature and the fragmenting…

    Great :):)

    Best Sebastian

  • The clever paths, the automatic reloading and the includes is what does it for me!

  • This is a great app. It is the perfect tool to run a static website on site44.

  • The includes and variables are super helpful!

  • Clever paths, html includes and variables are awesome!!

  • The path helpers are really nice–such a simple feature, but saves a crapload of time.

  • The Holy Grail for one key piece of the web dev process?

  • Yes please!

  • I’m making a web-app with lots of repetitive code, this code constantly gets updated, instead of searching and replacing / coding with excel, using the include-function would be so friggin awesome!

  • The Includes is a killer feature, oh and compiling my Sass would be nice too. Plus the UI is lovely. All in all this would speed up my front end development workflow dramatically!

  • I will use it to quickly and easily share my progress with clients – Hammer turns a four-step-process into one simple click. Awesome.

  • Z0MG, I want to use the includes feature so hard.

  • Clever Paths!

  • Would be mostly interested of having ability to use Navigational helpers to avoid the need for using any PHP on the server-side.

    Have been using both LiveReload and some command line -based alternatives, but Hammer looks quite refreshing change. (Thought, I wouldn’t normally like custom template tags that much, but this time it isn’t that bad.)

  • Oh that sass compiling looks really nice, looks a lot nicer than which I’m currently using.

  • I want to try the include feature! this editor seems really nice, really nice design.

  • have been using middleman but this looks even better!!!

    love the reload and clever paths~

  • HTML Includes. Sweet and simple.

  • Loved Includes, paths and reload features!

    would be nice being able to customize the publish url

  • I’d like to give the variables and includes a try. Nice for simple static sites. Plus the one click publish. Pretty fantastic start!

  • I like the look of those clever paths!

  • Like it very much. A possibility to leave ol’ DW … finally. But! Every time a build is done, each file gets a new date, so my FTP-sync allways uploads the whole build.

    And … is it possible to get a compressed css like in code kit?

    (I’m just testing the trial version)

  • Fragments, reload, and such seem great.

    Altho I’d love to see support for:
    * less
    * custom project templates
    * modification of some things like the “current”-class (bootstrap prefers “active”)
    * image minimization
    * javascript minimization
    * css minimization
    * better anvil integration (and anvil should have automatic support for
    * settings to configure how these things work

    Currently I’m using codekit to handle some of these things, but I’d love to switch over as hammer seems to have it’s functionality handled better.

  • I would love to use the includes and the build url :)

  • I’m totally in love with clever paths and includes :)


  • Paths seem awesome. Definitely need to try this.

  • I could actually use the includes a lot in my projects !

  • It would be a good addon to my workflow for Static Sites as most of my development happes locally anyway.

  • HTML includes is what sells me the most in Hammer. I’ve previously been using Jade templates to achieve this. With Hammer, I wouldn’t need Jade for that purpose at least.

    In future versions, I’d like to see this feature:

    – Mark files for reload inside Hammer’s UI, instead of adding @reload in actual code.

    … Tweeted:

  • I’ld love one copy!

    It looks great. So does there anvil app by the way.

  • At first I was interested in the includes, but now I’m more intrigued about the publishing feature.

  • Bourbon included? I’m sold.

  • Hammer seems awesome I’m really looking forward to use the includes and the build url together with their anvil app.

  • I have to redo 3 static sites (about 50 pages each, have to manually edit all headers/footers) and have been dreading the process for weeks. Hammer looks like it would allow me to cut the drudgery down to a minimum.

  • Could possibly fall in love with hammer for prototyping quick webdesign ideas and for showing off stuff to clients via dropbox as it is plain HTML.

  • Hammer looks fantastic. Looking forward seeing how it evolves!

    Thoughts on further development:

    * Dedicated facility for defining custom site structures (file/folder hierarchy and skeleton code).
    * Further support for template languages: LESS, Stylus, etc.
    * Running code through minification tools.
    * Publishing to a private server (possible?)

  • I’ve been looking for a static HTML tool for quite some time – never heard of Hammer before, but it might actually fit the bill. Variables and includes look very useful.

    Would love to win a license.

  • This would be ridiculously cool for running a static html-based blog. The tie-in with Anvil makes it even more attractive.

  • Been “um-ing” and “ah-ing” over Codekit for a while but reading this has turned me on a 180˚!

    Some really great features that will help me loads and thanks for the review, has explained some of the points in clearer detail which makes me excited about it even more!

  • “Hammer” will give the last nail in the coffin for DreamWeaver templates!
    Would also see support for minify css, compressing images and LESS compiling.

  • Looks great. Very tempted to try it out on my next project.

  • the includes are so simple! great stuff!

  • Includes made easy are my favorite feature right now. Would love to test it!

  • Nice:-)

  • Very excited about this. To many features to pick just one

  • The clever paths are definitely the feature it seems I’d use the most. I also like the “no fuss” compiler a lot.

  • All the features look interesting. This tool could improve my workflow.
    Trial downloaded :)

  • Loving the look of this app. Going to have to find some time to try it out. The includes feature looks like a winner for streamlining static content.

  • Variables, instant reloading, includes : all-in-one. Nice !

  • I think that it’s really nice that Hammer is taking away some hassle when trying to publish something!
    Looks really nice and would love to try it out some time.

  • Wow, hammer’s html templates look really cool.

  • Would be a handy tool to have HTML Creation App arsenal!

  • Finally I could master sass and compass

    • It does not support Compass out of the box; for some reason they chose Bourbon, which is kind of the same, but far less popular. The lack of Compass is a big problem for me personally.

  • The auto-building and @reload directive would be lifesavers.

    Tweeted at:

  • It’s just perfect! Includes, reloads, everything is perfect! I need it!

  • Looks great and I guess it would be just awesome to use it with Espresso! :-)

  • I wish we could only specify if we wanted Codekit to be used to compile files for LESS and other file types.

  • Looks great as a lighter alternative to Coda, just for static pages. Could be very useful to improve workflow speed and get things done faster.

  • Automatic reload. Brilliant.

  • I’m really looking forward to fragment includes. It’ll be nice not to have to run MAMP just to include a common header in all my pages.


  • I would love a copy, just for include and smart paths. That’s so clever!

  • clever paths / includes / seems perfect for small projects!

  • This would speed up dev time for sure!

  • hammer looks great and i’m sure it will speed-up my workflow…
    trial downloaded — hope i’ll get one licence… ;-)

  • Includes seems very useful

  • Looks like it will really streamline things. Nice!

  • Most useful thing are probably variables and html snippet includes. Thats exactly what I am missing in CodeKit, with which I am using SASS and CoffeeScript already.

  • Includes and Autoreload for me are the most usefull.

  • Clever Paths are not so clever. If you make a structure like this:
    Home – index.html
    Blog – blog/index.html
    Contact – contact/index.html
    it doesn’t work. You put “” for Home but if you are viewing the blog page when you hit “Home” it just links to blog/index.html.
    The whole point of static generators is to help with hierarchy. This doesn’t.

  • Looks like a great tool for rapid development of small static sites!

  • Just purchased Hammer. Looks great but a few big questions arise:

    1. Publishing: how private is this – will it end up in search engine results?
    2. Publishing: is there a way to delete published versions?
    3. Publishing: can you password protect published material? (I guess not but this is a leading question, hoping vendor might pick this one up.)
    4. Publishing: (how) can you browse previously published versions?
    5. Growl / Notifications: (how) can you get Growl or Notification Center popups on compilation completion?
    6. Debugging: not a question, but I’d like to see more verbose error messages containing e.g. line numbers.

    Looking forward seeing this evolve!

  • Just downloaded the trial and I am very impressed. The includes and autoreload are awesome.

    The big problem for me is the lack of support for Compass. Why they chose Bourbon over Compass is a strange; Bourbon was initially targeted at Rails devs, which is not the market for Hammer. Compass is *far* more popular in the web dev world, and my work depends in it these days.