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 libary 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 configuartion 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": "https://warhol.io/patterns",
  "breakpoints": [800, 1000],
  "theme": {
    "themeUrl": "https://warhol.io/patterns/theme",
    "colors": {
      "colorsUrl": "https://warhol.io/patterns/colors/theme",
      "sources": ".colors",
    "typography": {
      "sources": ".typography",
  "components": [
    { "source": ".teaser", "componentUrl": "https://warhol.io/patterns/components/teaser" },
    { "source": ".button" }

The component .teaser has its own URL, but the component .button has not - Warhol will fall back to the patternLibUrl an 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 libary with a password? At the moment Warhol only really works with HTTP basic auth. You can provide an URL with a username and password like https://username:password@example.com to enable Warhol to access your password-protected pattern libaray.