Pattern Lab comes with support for a number of special keyboard shortcuts to make using Pattern Lab easier. These are broken up by where they work or are most useful.

Modifying the viewport:

  • ctrl+shift+0: set the viewport to 320px
  • ctrl+shift+[1-9]: set the viewport to one of the pre-determined breakpoints in the MQs list. 1 is at the top.
  • ctrl+shift+s: set the viewport to "small"
  • ctrl+shift+m: set the viewport to "medium"
  • ctrl+shift+l: set the viewport to "large"
  • ctrl+shift+h: toggle Hay mode
  • ctrl+shift+d: toggle disco mode

Modifying the views:

  • ctrl+shift+a: open/close annotations view
  • ctrl+shift+c: open/close code view
  • cmd+a/ctrl+a: select the content of the current open tab in code view
  • ctrl+shift+u: make the Mustache tab active
  • ctrl+shift+y: make the HTML tab active
  • esc: close the open view

Other:

  • ctrl+shift+f: open/close the pattern search