What is Harp?
Why use Harp?
It’s blazing fast, easy to get setup, and dead simple. It’s also more powerful than things like CodePen or jsFiddle (more than just a “widget builder”). If you end up liking what you’ve built, you can then compile the static assets or actually deploy it to Harp’s own dropbox based hosting platform. Because of it’s speed and versatility, Harp is an efficient and effective tool for prototyping UI concepts and workflows.
- Install Node or
brew install node
- Install Harp
npm install -g harp
- Create a new Harp project
harp init project-name(will create a folder with your project name in the current directory)
- Start Harp server
harp server project-name
- Access your site at
Now you can write using your favorite frontend technologies! (This article will be using Jade/Sylus for all code examples.)
Note: Any time you would like to generate the static files for your project, you can
harp compile and your site will be generated in the
/www folder in the
root of your project.
Public vs. Private
In Harp, anything prefixed with an underscore will not be publicly available via the server or compilation. This is useful for partials and/or private layout files. Anything without an underscore will be compiled and publicly available. Making things private when possible will also improve compile time (not that you need it). Folders that are prefixed with an underscore will be private as well as anything that is contained within.
Layouts and Partials
You’ll have layout files which have the underscore prefix. The
_layout file will
be applied to anything on that folder level. eg:
/_layout.jade would apply to
anything on the root level.
/posts/_layout.jade would be applied to any page
view within the
Partials are just as easy. If you have a
partial.jade file in the
_partials/ folder you can simply:
Static Data Structures
With Harp you also get flat JSON data structures to play with. You can create a
file in any subdirectory and then have access to that data in your templates.
Eg: if you have
/posts/_data.json you can then iterate over that json
1 2 3 4 5 6 7 8 9 10 11 12
Then in your template:
1 2 3 4
This will enumerate over the top-level keys using the key name as the slug.
1 2 3 4 5 6 7
It should be noted here that the
_data.json file is intended only for meta data.
If you were blogging, like in this example, you would also need to include a
view file in the posts directory (with a file name that’s the same as the slug)
that contains the actual post itself. The
_data.json would include things like
the slug, title, tags, etc. It’s easy to see that you can use
to mimic database results for prototyping very easily.
You also get a global variables JSON file located at
/_harp.json which is useful
for layout variables (eg: site title) and other settings that you’ll need
available within scope.
The Current Object
On any template or layout you will have access to
current which will give
you brief information about the current location of the app. The
object has a
source property. Eg: if you were
/posts/post-name the current object may look like:
1 2 3 4
This is very useful if you would like to have an active-state in your site’s navigation:
1 2 3 4 5
A Boilerplate Project
If you prefer to learn by example, you can clone my harp boilerplate. It will set you up with a layout, a partial, some useful stylus mixins, icon fonts, and other helpful examples.
For more information you should check out the harp documentation