Skip to content
🌈 Material design template for Pencil app
JavaScript CSS XSLT HTML Shell
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.
build Update Aug 7, 2015
mobile Update May 17, 2016 Updated template and added building script Jul 20, 2015

Pencil Material Design Template

A material design template for Pencil, the open source prototyping tool for Windows, Mac, Linux and Firefox (HTML export template)



  • Beautiful Material Design
  • Left and right buttons to navigate
  • Responsive
  • Click the prototype to see the hotspots
  • Three options: mobile, tablet and desktop (at the moment only mobile has been developed)
  • Mobile web support: allows you to open it on a mobile device in fullscreen, just like if you were using a real app.
  • Keyboard arrow keys support


  1. In Pencil, go to Tools > Manage Export Template...
  2. Click Install New Template...
  3. Select the template zip and click Open

Make awesome Material Design prototypes

Use these collections from Nathaniel Watson:


Example Click areas


  • Add tablet and desktop editions
  • Add custom size edition
  • Solve a few bugs
  • Use Polymer paper elements
  • Web component version
  • Support for experience customization based on values indicated on each page notes
  • Support global template UI customization
You can’t perform that action at this time.