Start designing in the browser with Handcraft

Handcraft is designed to be a part of your production process.

  1. Wireframing
  2. Design
  3. H
  4. Development
  5. Profit!

Read more about why we made Handcraft.

Get feedback in five steps

Handcraft is the fastest way to get real feedback on a real prototype.
Just sign up. Create a prototype. Write some HTML. Save, view, share the URL. Done.

  1. 1Sign up
  2. 2Create a prototype
  3. 3Write some HTML
  4. 4Save & view
  5. 5Share the URL
  6. 6Done!

Take your designs to the next level.

Design in the browser

Handcraft means 100% HTML prototypes. This constraint means you can only design what works in the real world.

Build an interactive prototype

Include state changes, error messages, and alternate designs directly in your prototype.

Don't repeat yourself

No more copy/pasting repeating content and navigation. Instead, use markup like <layout/> and <page/>.

Forget about lorem ipsum

Fill your prototypes with real content and spend more time on one of the most important interface elements: copy.

We did this stuff so you don't have to.

Secure and private

Prototypes live at [yourprototype].handcraft.com and can be protected by a password of your choosing.

Collaborate with your team

Easily share prototypes with colleagues and work on code together without fear of losing your changes.

No versioning hassle

Your work is automatically backed up. Change history of all your prototypes means you'll never lose your work.

Professional presentation

We take care of the loose ends so your clients always get a smooth experience.

What people are saying about us

  • Larry Stone “For rapid prototyping, Handcraft is the perfect tool for designers who code. It's as low- or high-fidelity as I need it to be and leverages familiar technologies. I love this paradigm.”

    — Larry Stone, User Interface Designer at oDesk

  • Bartosz Burclaf “Handcraft is just awesome! We started using it a few months ago and since that time we don't have to use any other templating languages, graphic based mockups etc.”

    — Bartosz Burclaf, CEO of eFabryka.com

  • Given up on Mozilla Pencil. It's decent, but it's not me. Trying out Handcraft. Wireframing with an HTML variant language. Much more me. :) — @onion2k
  • I gotta say, handcraft.com is awesome. #prototyping — @irwin
  • Just found out about http://handcraft.com, a web-based HTML prototyping tool. Very clean solution. Definitely worth a try. — @bcurdy
  • Handcraft is f**king amazing !!! I am already eager to start coding in it! Wonderful idea and realization guys !!! — Web Store user
  • Trying out @Handcraft at the recommendation of @smashingmag. So far it's pretty rad. — @tara
  • Designing in the browser just got a whole lot easier with @Handcraft - imagine Firebug… but saving your edits back to server. DYSWIM? — @michaelrose
  • Handcraft looks like it will be an invaluable resource for developing web content for teaching students web design techniques. — Web Store user
  • Handcraft.com is impressing me more by the minute - a true powerhouse for web prototyping. And the goodies are cutting edge! /cc @Handcraft — @tacoe
  • RT @smashingmag Backfire: save CSS changes made in Firebug - http://bit.ly/bNfYGL - This. Looks. Phenomenal. — @brandonbhel
  • Plugin genial. Guarda los cambios de #CSS realizados en Firebug http://tinyurl.com/28ecned — @ivoserrano
  • I've been looking for some mock-up tools and this is the coolest I've seen http://handcraft.com/ — @Skierkowski
  • I've always searched for a tool like this and finally decided to build it myself as I didn't find anything. Thank you guys for making such an awesome tool. — Web Store user
  • proper interactive prototypes you can export to an aspnet mvc project... very interesting indeed: http://handcraft.com/ — @mattk
  • Backfire from Handcraft is the BOMB, I tell you: A savebutton for Firebug's CSS editor: http://bit.ly/bYkczk — @jsjo
  • handcraft: write interactive prototypes instead of static wireframes using HTML, CSS, JavaScript - http://handcraft.com/ — @smashingmag
  • Handcraft for prototyping looks like it might be handy for small remote teams: http://bit.ly/c8D8nC — @stackhousehouse
  • quick test drive of @Handcraft... clever stuff like switching focus from code to writing. — @jessekorzan
  • This is a totally awesome prototyping tool and I look forward to using it more. — Web Store user
  • Groovy little HTML prototyping app called Handcraft: http://bit.ly/anki5E #HTML #design — @camsweeney
  • Found a terrific interactive web-based prototype development & sharing tool : Handcraft. Great idea, neat implementation, lots of goodies! — @ntarunkumar
  • I hope @Handcraft can do for IDEs what the iPhone did to cell phones. I love when stagnant, overcomplicated and outdated technology is replaced. — @lucaswoj

We believe great designers are craftsmen.

Having intimate knowledge of the tools and processes required to craft a quality product is something we think is vital to any designer worth her salt.

That's why we made Handcraft: it's the next step in design after wireframes or Photoshop. You use it when it's time to buckle down and really start chiseling out the details. You can't do that unless you're working with the final medium. That medium is the web browser.

Handcraft takes full advantage of browser features like tabs and HTML5. Our take on working on a design? You don't really know what it's going to be like unless you're in the browser. Leading designers around the world agree with us.

Q42 Handcraft is a Q42 product. We're a team of 35 interaction and software engineers and we've been handcrafting websites for over a decade. Handcraft is something that evolved naturally.

Read more about why we made Handcraft

Leading designers worldwide think like us.

  • "If you want to be a really exceptional designer [...] then learning to use the current tools will only make your understanding and work stronger."

    — Rebekah Cox, Lead Product Designer at Quora

  • "I don't think it makes sense to call oneself an interface designer unless there is at least an understanding of how programs work."

    — Ryan Singer, Product Manager at 37signals

  • "The best [designers] tend to be the ones with a non-trivial technical background."

    — Glen Murphy, Lead User Experience Designer, Google Chrome

  • "Designing in a browser makes the design process more fluid, efficient and accurate because it addresses issues that are difficult when making static visuals, if they are addressed at all."

    — Andy Clarke of Walls Come Tumbling Down