Super-charge your web development with Hammer

Building websites has never been so much fun.

Forget writing front-end code the old way. Hammer will save you time.

Built-in support for SASS (with Bourbon), CoffeeScript, HAML & Markdown, as well as special Hammer tags.

  1. This folder is your Project Folder and is the folder that Hammer will watch. All your edits and changes are made in this folder.
  2. Edit files in the Project Folder using your preferred text editor, using Hammer's special tags and language support.
  3. This is the Build Folder that's recompiled inside your Project Folder. It's a static build that you can view, share & publish.

Major features to save you major time

  • Automatic language compilation New SASS (with Bourbon), CoffeeScript, HAML and Markdown all compile automatically to HTML, CSS and Javascript. Now with Slim support!
  • Special Hammer tags Use special tags for HTML includes, clever filepaths, variables and autoreloading the page in your browser.
  • Optimize your output Switch on Optimize mode for a project and its Build files will be compressed, concatenated and optimized.
  • Publish & share your builds Share your packaged Build manually, or publish a version to our short URL service and just paste a link.

Hammer has its own format, which sits right inside your HTML, CSS and JavaScript files

Start using these in your projects and you’ll wonder how you ever managed without them.

HTML Includes

Front-end developers shouldn't have to run local environments, or use PHP to do HTML includes. With Hammer, you don't have to.

<!-- @include _header.html -->

Clever Paths

Write asset paths the easy way. Hammer searches your project for the file and writes the filepath for you, even if it moves.

<!-- @path icons.png -->


Set and use variables in your files to bend them to your will. Perfect for building out templates, you can even set default values.

<!-- $foo Bar --> <p><!-- $foo --></p>

Auto Reload

Every time Hammer finishes compiling your project, it will refresh the built pages in whichever web browser you’re using.

<!-- @reload -->


Leave yourself notes and todos directly in your code. Hammer will display them right in the app.

<!-- @todo Rewrite all of this -->

Image Placeholders

Create dynamic placeholder images quickly and easily. Great when you need flexible images at the prototype stage.

<!-- @placeholder 300x400 -->

Stylesheets + JavaScripts

By using the special Stylesheet and JavaScript tags you can include multiple assets with minimum markup. Plus there’s no need for extensions; just like clever paths, Hammer will find the files itself.

<!-- @stylesheet normalize -->
<!-- @stylesheet assets/css/* -->
<!-- @javascript jquery app -->

For a complete guide to these special tags and all the other features in Hammer, please read through the Hammer Documentation

Hammer templates get you going even quicker New

  • Hammer includes a minimal boilerplate set of files when you create a new project. Now you can choose new templates for your projects and manage them in app.
  • You can also export any project as a Hammer template, to use in your own project, or, make them available to the web design/dev community for all to make use of.

Browse Template Gallery

"Hammer makes working with static site files the easiest it's ever been."

Andy Clarke, @malarkey

"For early stage local development, it's making life so much easier!"

Elliot Jay Stocks, @elliotjaystocks