Pattern Lib URL

The field patternLibUrl in your configuration tells Warhol about the main URL (the "kitchen sink page") for your pattern library. If your pattern library has such a page with all components and colors, patternLibUrl is the only URL you have to configure. If your pattern library only has individual pages for colors, components and typography, you will have to provide these URLs individually in the respective configuration sections (see the docs on configuring components, themes, and specifically theme colors, theme typography and theme icons). The URLs for nested configuration sections override the URLs of their parent sections. An example:

  "patternLibUrl": "",
  "breakpoints": [800, 1000],
  "theme": {
    "themeUrl": "",
    "colors": {
      "colorsUrl": "",
      "sources": ".colors"
    "typography": {
      "sources": ".typography"
  "components": [
    { "source": ".teaser", "componentUrl": "" },
    { "source": ".button" }

The component .teaser has its own URL, but the component .button has not - Warhol will fall back to the patternLibUrl and try to find the component there. The field theme.typography does not have an own URL, but as its parent field theme has a themeUrl defined, this URL will serve as the URL for typography examples. The field theme.colors has its own colorsUrl defined, which takes precedence over theme.themeUrl and patternLibUrl.

The field patternLibUrl can be omitted if each child element (component, theme and/or theme subsection) has its own URL defined. Warhol will warn you if you missed any URL when configuring your pattern library.


  • How can I protect my pattern library with a password? At the moment Warhol only really works with HTTP Basic Authentication. You can provide an URL with a username and password like to enable Warhol to access your password-protected pattern library.